[워드프레스] 하위 페이지 목록 표시하기

워드프레스의 페이지 편집 화면에서 "페이지 속성" 옵션에 보면 "상위" 페이지를 설정할 수 있는 속성이 있습니다. 페이지들을 특정 상위 페이지(부모 페이지)의 하위 페이지(자식 페이지)로 설정하여 그룹화하는 것이 가능합니다.

상위 페이지를 설정하는 옵션은 발행된 페이지가 있는 경우에만 표시됩니다. 위와 같이 설정하면 현재 페이지가 Parent 페이지의 하위 페이지(자식 페이지)가 됩니다. 이렇게 하나의 상위 페이지에 여러 개의 자식 페이지를 설정할 수 있습니다. 상위 페이지와 하위 페이지에 하위 페이지의 목록을 표시하는 방법을 살펴보겠습니다.

테마에서 지원하는 경우

특정 테마(예: 가장 인기 있는 유료테마인 AVADA)에서는 상위-하위 페이지를 설정하면 자동으로 사이드바에 표시되는 경우가 있습니다. 예를 들어, 아바다 테마에서 페이지에 사이드바가 표시되도록 하는 경우 자동으로 하위 페이지 목록(있는 경우)을 표시합니다.

하위 페이지에서는 현재 하위 페이지의 색상이 바뀌어 표시됩니다.

사용자 코드 사용하기

사용자 코드를 사용하여 하위 페이지(자식 페이지)의 목록을 사이드바나 페이지 내에 표시할 수 있습니다. 다음과 같은 코드를 함수 파일에 추가하도록 합니다.

function wpb_list_child_pages() {

global $post;

if ( is_page() && $post->post_parent )

$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );

if ( $childpages ) {

$string = '<ul>' . $childpages . '</ul>';
}

return $string;

}

add_shortcode('wpb_childpages', 'wpb_list_child_pages');
// Source: wpbeginner

[wpb_childpages] 숏코드를 사이드바 위젯이나 페이지 내에 추가하여 하위 페이지 목록을 표시할 수 있습니다.

유료 테마 판매 사이트인 테마포레스트에서 오랫동안 1위를 달리고 있는 아바다(AVADA) 테마에 실제로 적용해본 모습입니다. 레이아웃이 만족스럽지 않네요. CSS를 통해 레이아웃을 조정해주도록 합니다.

다음 코드를 사용하여 페이지 템플릿에 추가할 수도 있습니다.

<?php wpb_list_child_pages(); ?>

그러면 테마에서 자동으로 하위 페이지를 감지하여 표시합니다.

플러그인 사용

위의 방법이 여의치 않으면 Child Pages Shortcode와 같은 플러그인을 사용할 수 있습니다.

이 플러그인을 설치하고 활성화하면 다음 숏코드를 사용할 수 있습니다: [child_pages]

이 숏코드를 사이드바 위젯에 적용해보면 다음과 같이 재미 있는 모양으로 표시됩니다.

이 플러그인을 사용할 경우 하위 페이지에는 목록이 표시되지 않습니다. 필터를 사용하여 표시되는 콘텐츠와 형식을 변경할 수 있습니다. 자세한 사용법은 플러그인 페이지를 참고하시기 바랍니다.

참고:

• 워드프레스 add_filter 이해
• 페이지별로 다른 메뉴 항목/위젯/사이드바 표시하기