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

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

// 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 );

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

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

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

대시보드 스타일

관리자 대시보드 위젯과 기여자 및 구독자의 대시보드 위젯 스타일이 다른 것은 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, 자바스크립트 템플릿 등에 관한 간단하고 기초적인 정보를 경험하는 과정입니다. 예제 사이트 전체에 이어지는 내용이 필요한 것은 아니므로 선택하여 진행하면 됩니다.