WordPress 固定ページの一覧を親・子・孫の順番で表示する方法

Last update 
/ Posted by Takumi Hirashima

WordPress で固定ページの一覧を親・子・孫の順番で表示する方法を紹介します。
そのほかに、現在表示しているページに紐づく子ページの一覧や、ページの親ページのIDを取得して親に紐づく子孫の一覧を表示する方法など、ちょっと風変わりな表示方法も紹介します。

  1. 固定ページの一覧を親・子・孫の順番で表示
    1. 現在表示している固定ページの子ページを一覧で表示
  2. 現在表示している固定ページに紐づく親・子・孫の一覧を表示
  3. 指定したページの子の一覧を表示
  4. まとめ

固定ページの一覧を親・子・孫の順番で表示

固定ページの一覧を親・子・孫の順番で表示する方法を紹介します。
次のコードを、一覧を表示させたいテンプレートに追加します。

<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を指定する場合は 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 で固定ページの一覧を親・子・孫の順番で表示する方法を紹介しました。
使い所が限定されますが固定ページの多いサイトには以外と重宝するかもしれません。
この投稿は以下の投稿を参考にさせていただきました。合わせてごらんください。
固定ページで親、子、先祖、最上の親、孫、最下の孫の取得

私が続けて読みたい関連記事

スポンサーリンク