워드프레스 대시보드 위젯 추가

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

워드프레스 대시보드(알림판)를 변경한다는 것은 보통 대시보드의 위젯을 변경한다는 것으로 삭제나 추가의 뜻입니다. 기본 제공 대시보드 위젯은 예제 사이트에서 출력되지 않는데, 예제 테마를 제공할 때 다음 코드를 추가하였습니다.

// default-functions.php
unset(
    $wp_meta_boxes['dashboard']['normal']['high']['dashboard_browser_nag'],
    $wp_meta_boxes['dashboard']['normal']['core']['dashboard_activity']
);
remove_meta_box('dashboard_right_now', 'dashboard', 'normal');   // Right Now
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal'); // Recent Comments
remove_meta_box('dashboard_incoming_links', 'dashboard', 'normal');  // Incoming Links
remove_meta_box('dashboard_recent_drafts', 'dashboard', 'side');  // Recent Drafts
remove_meta_box('dashboard_right_now', 'dashboard', 'normal');   // Right Now
remove_meta_box('dashboard_quick_press', 'dashboard', 'side');  // Quick Press
remove_meta_box('dashboard_primary', 'dashboard', 'side');   // WordPress blog
remove_meta_box('dashboard_secondary', 'dashboard', 'side');   // Other WordPress News
remove_meta_box('dashboard_plugins', 'dashboard', 'normal');   // Plugins
remove_action('welcome_panel','wp_welcome_panel'); // Welcome Panel

대시보드에 위젯을 추가하는 것도 기본 패턴에 따라 처리하면 쉽습니다. 이번 장에서는 관리자, 기여자, 구독자 구분하지 않고 다음 2가지 콘텐츠를 대시보드 위젯으로 추가합니다.

  • 타입 post 포스트 목록
  • 분류 phototag term 목록

Dashboard Widgets API

원하는 콘텐츠를 대시보드 위젯에 추가하기 위해서 위젯과 출력 콘텐츠에 관한 다음의 API 예시를 참고하면 됩니다.

// 코덱스 예시
add_action( 'wp_dashboard_setup', 'example_add_dashboard_widgets' );
function example_add_dashboard_widgets() {
    wp_add_dashboard_widget(
        'example_dashboard_widget',         // 위젯 슬러그
        'Example Dashboard Widget',         // 위젯 제목
        'example_dashboard_widget_function' // 함수
    );  
}

function example_dashboard_widget_function() {
    // 출력 콘텐츠
}

예제에서 2가지 위젯은 다음의 패턴으로 구성할 수 있습니다.

/* 대시보드 위젯 */
add_action( 'wp_dashboard_setup', 'pics_dashboard_widgets' ); 
function pics_dashboard_widgets() {
    // 포스트 (타입 post)
    wp_add_dashboard_widget(
        'latest_post_widget',
        '안내',
        'dashboard_latest_post_widget'
    );
    // 포토태그(phototag)
    wp_add_dashboard_widget(
        'phototags_widget',
        '사진태그',
        'dashboard_phototags_widget'
    );
}

/* 안내 (타입 post) */
function dashboard_latest_post_widget() {
    //
}

/* 포토태그 (phototag term) */
function dashboard_phototags_widget() {
    //
}

타입 post 포스트 목록

타입 post 포스트 목록 출력은 지난 과정에 반복한 워드프레스 쿼리 함수로 간단하게 출력할 수 있습니다.

/* 안내 (타입 post) */
function dashboard_latest_post_widget() {
    global $post;
    $posts = get_posts( array(
        'post_type' => 'post',
        'posts_per_page' => 10,
    ) );

    if ( $posts ) {
        echo '<ul>';
        foreach ( $posts as $post ) {
            the_title( sprintf( '<li>'.  get_the_date() . ' <a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' );
        }
        echo '</ul>';
    }
}

분류 phototag term 목록

분류의 term 데이터를 구하는 방법은 검색 폼, 프런트 페이지와 사이트 아래 term 목록 출력에서 함수, 쿼리, 캐시 데이터(Transient API)의 순서로 반복해서 다룬 내용인데, 이번에는 워드프레스 태그를 출력하는 wp_tag_cloud 함수를 사용해봅니다. 다음 코드를 확인하세요.

/* 포토태그 (phototag term) */
function dashboard_phototags_widget() {
    wp_tag_cloud( 'taxonomy=phototag&smallest=10&largest=22&number=100' );
}

위의 코드는 최소 10pt, 최대 22pt 크기로 term 아카이브 페이지 링크가 있는 phototag 분류의 term 이름 100개를 출력하는 것입니다.

위의 코드 3번 줄은 다음처럼 사용할 수 있으며, 설정하지 않은 파라미터는 기본 설정을 적용합니다.

$args = array(
    'taxonomy' => 'phototag',
    'smallest' => 10,
    'largest' => 22,
    'number' => 100,
);
wp_tag_cloud( $arg );

다음 링크의 이번 장 변경 파일을 받고 압축을 푼 후 테마 루트에 덮어쓰세요.

관리자 대시보드에는 다음 그림처럼 위젯과 콘텐츠가 출력됩니다.

관리자 대시보드 위젯

기여자 및 구독자 대시보드를 보면 다음 그림처럼 사진태그 위젯의 콘텐츠가 관리자 대시보드와 다른 스타일로 출력합니다.

워드프레스 8 - 무료 이미지 저장소

기여자와 구독자 대시보드 위젯

대시보드 스타일

관리자 대시보드 위젯과 기여자 및 구독자의 대시보드 위젯 스타일이 다른 것은 admin-style.css 파일에 의한 것으로, 관리자 제외 그룹에서 로드한다는 것을 지난 과정에서 확인하였습니다.

위젯 스타일

위젯에 적용하는 스타일 파일의 CSS 코드는 다음과 같습니다.

#latest_post_widget li {
    font-size: 1.4em;
    line-height: 1.5;
}
#phototags_widget {
    text-align: justify;
}
#phototags_widget a {
    color: #666;
    font-size: 1.4em;
    line-height: 2;
}
#phototags_widget a:hover {
    color: royalblue;
    font-size: 1.6em;
    font-weight: 700;
    background-color: #eee;
    padding: 2px 10px;
}

이때 ‘CSS 코드의 아이디’와 대시보드 위젯 API 코드에서 사용한 ‘위젯 슬러그’가 같은데, API 코드에서 정의한 위젯 슬러그를 워드프레스에서 해당 위젯 아이디로 사용한다는 것을 알 수 있습니다.

#latest_post_widget
#phototags_widget

대시보드 위젯 박스

다음 그림은 관리자 대시보드 화면으로 위젯이 없는 공간 점선 테두리를 볼 수 있습니다.

관리자 대시보드 위젯 박스

기여자와 구독자 대시보드에서는 나오지 않는데, 마찬가지로 admin-style.css 파일의 다음 CSS 코드에 의한 결과입니다.

.metabox-holder .postbox-container .empty-container {
    border: transparent;
}

대시보드 위젯 박스 한 줄 출력 개수

관리자 대시보드 위젯은 브라우저 화면 크기에 따라 달라지지만, 보편적인 화면 전체 크기에서 4개의 위젯 박스가 나옵니다. 기여자와 구독자 대시보드 위젯은 2개가 나오는데, 다음 CSS 코드의 결과입니다.

@media only screen and (min-width: 1024px) {
    #dashboard-widgets .postbox-container {
        width: 50% !important;
    }
}

화면 옵션(Screen Options)

사용자가 위젯 API로 커스텀 위젯을 추가하면 다음 그림처럼 화면 옵션에 선택 항목으로 추가됩니다.

커스텀 위젯의 스크린 옵션 선택 항목

기본 위젯을 포함하여 위젯 순서 등 더 많은 정보는 코덱스를 참고하세요.

첫 번째 예제 구성을 마치며

이번 장 대시보드 커스텀 위젯 추가를 끝으로 ‘고품격 고품질 워드프레스 무료 사진 저장소’ 예제 구성은 끝입니다. 다음 장에서 이어지는 내용은 지금까지 구성한 예제의 일부 요소를 워드프레스 WP REST API 사용으로 변경하는 것이며, 맞물려 jQuery, ajax, 자바스크립트 템플릿 등에 관한 간단하고 기초적인 정보를 경험하는 과정입니다. 예제 사이트 전체에 이어지는 내용이 필요한 것은 아니므로 선택하여 진행하면 됩니다.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

» 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.