WordPress 固定ページ一覧を親・子・孫の順番で表示する方法
最終更新日 - 公開日 2016.02.09
by
WordPress で固定ページ一覧を親・子・孫の順番で表示する方法を紹介します。
例えば、サイトマップに固定ページの一覧をツリー状に表示したい時に便利な方法です。
そのほかに、現在表示しているページに紐づく子ページの一覧。
親ページのIDを取得して、その親ページに紐づく子孫の一覧を表示する方法なども合わせて紹介します。
固定ページ一覧を親・子・孫の順番で表示
固定ページ一覧を親・子・孫の順番で表示する場合は、テンプレートタグ wp_list_pages() を使用します。
例えば、親・子・孫の順番で固定ページの一覧を表示したい場合は、次のコードをテンプレートに追加します。
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
パラメーター title_li はデフォルトで表示される見出し「ページ」を表示しないようにします。
HTML は次のように作成されます。
<ul>
<li class="page_item page-item-1111"><a href="#">ページ</a></li>
<li class="page_item page-item-2222 current_page_item"><a href="#">現在表示しているページ</a></li>
<li class="page_item page-item-3333 page_item_has_children">
<a href="#">親ページ</a>
<ul class='children'>
<li class="page_item page-item-4444 page_item_has_children">
<a href="#">子ページ</a>
<ul class='children'>
<li class="page_item page-item-5555"><a href="#">孫ページ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
現在表示されているページには、カレントのクラスも付与されるのでデザインの調整も可能です。
現在表示している固定ページの子ページを一覧で表示
パラメーター child_of に $post->ID を指定して、現在表示している固定ページの子ページの一覧を出力します。
<ul>
<?php wp_list_pages('title_li=&child_of='.$post->ID); ?>
</ul>
ページIDを指定する場合は child_of にページ ID を指定します。
<ul>
<?php wp_list_pages('title_li=&child_of=32'); ?>
</ul>
現在表示している固定ページに紐づく親・子・孫の一覧を表示
現在表示している固定ページに親ページがある場合に、その親のIDを取得して親・子・孫の一覧を表示する方法を紹介します。
次のコードを、一覧を表示させたい固定ページのテンプレートに追加します。
<?php // 固定ページの親・子・孫の一覧を表示
$page_parent = $post->ancestors[count($post->ancestors) - 1]; // 最上の親のIDを取得
echo '<h1><a href="'.get_page_link($page_parent).'">'.get_the_title($page_parent).'</a></h1>'; // 最上の親のタイトルを表示
$page_childs = get_posts( 'numberposts=-1&order=ASC&orderby=menu_order&post_type=page&post_parent='.$page_parent ); // 最上の親に紐づく子ページの情報を取得
if ( $page_childs ) { // 子ページがあれば表示
foreach ( $page_childs as $page_child ) { // 子ページのループ
$page_child_id = $page_child->ID; // 子ページのIDを取得
$page_grandsons = get_posts( 'numberposts=-1&order=ASC&orderby=menu_order&post_type=page&post_parent='.$page_child_id ); // 子ページに紐づく孫ページの情報を取得
if ( $page_grandsons ) { // 孫ページのループ
echo '<h2><a href="">'. get_the_title($page_child_id).'</a></h2>'; // 子ページのタイトルを表示
echo '<ul>';
foreach ( $page_grandsons as $page_grandson ) { // 孫ページのループ
$page_grandson_id = $page_grandson->ID; // 孫ページのIDを取得
echo '<li><a href="'. get_page_link($page_grandson_id).'">'.get_the_title($page_grandson_id).'</a></li>'; // 孫ページの情報を表示
}
echo '</ul>';
}
}
}
?>
指定したページの子の一覧を表示
指定したページの子の一覧を表示するには get_posts を使用します。
パラメータに基づいて投稿データの配列を作成することで、表示件数や内容を細かく制御することができます。
次のコードをテンプレートに追加します。
<?php // 指定したページの子の一覧を表示
$page_parent_id = 123; // IDの指定、動的に出す場合は $post->ID など適宜変更してください
$page_childs = get_posts('numberposts=-1&order=ASC&orderby=menu_order&post_type=page&post_parent='.$page_parent_id ); // 最上の親に紐づく子ページの情報を取得
if ( $page_childs ) { // 子ページがあれば表示
echo '<ul>';
foreach ( $page_childs as $page_child ) { // 子ページのループ
$page_child_id = $page_child->ID;
echo '<li><a href="'. get_page_link($page_child_id).'">'.get_the_title($page_child_id).'</a></li>'; // 子ページの情報を表示
}
echo '</ul>';
}
?>
まとめ
WordPress で固定ページ一覧を親・子・孫の順番で表示する方法を紹介しました。
固定ページの多いサイトには以外と重宝する方法かもしれません。
この投稿は次のサイトを参考にさせていただきました。
固定ページで親、子、先祖、最上の親、孫、最下の孫の取得
