WordPress 固定ページで親・子・孫の表示に対応したパンクズリストの表示方法

WordPress の固定ページで親・子・孫の表示に対応したパンクズリストの表示方法を紹介します。
例えば、固定ページに表示するパンクズリストを動的に表示したい場合に便利な方法です。

固定ページのパンクズリストを表示

固定ページのパンクズリストを表示する方法を紹介します。
例えば、現在表示している固定ページ（孫）に親ページ・子ページが存在して、親・子を含めたパンクズリストを表示したい場合、次のコードをテンプレートに追加します。

<?php //固定ページの親・子・孫に対応したパンクズリストを表示

  echo '<div class="breadcrumbs"><ul>';

  echo '<li class="home"><a href="'. home_url( '/', 'http' ).'">ホーム</a></li>';

  if(is_page()){ // 固定ページの場合に表示

    if( $post -> post_parent != 0 ){ // 投稿の親ページがあるかどうかを判別

      $ancestors = array_reverse( $post->ancestors ); // 投稿の祖先ページの ID を配列として取得

      foreach($ancestors as $ancestor){ // 配列を一覧として表示

        echo '<li><a href="'.get_permalink($ancestor).'">'.get_the_title($ancestor).'</a></li>'; // 親ページの URL とタイトルを表示

      }

    }

    echo '<li class="current"><a href="'.get_the_permalink().'">'.wp_trim_words( get_the_title(), 24, '...' ).'</a></li>'; // 現在の投稿のタイトルを字数制限して表示

  }

  echo '</ul></div>';

?>

表示される HTML は次の通りです。

<div class="breadcrumbs">

  <ul>

    <li class="home"><a href="#">ホーム</a></li>

    <li><a href="#">親ページ</a></li>

    <li><a href="#">子ページ</a></li>

    <li class="current"><a href="#">孫ページ</a></li>

  </ul>

</div>

実際のリンク URL はそのページに合わせたものが表示されます。

まとめ

WordPress の固定ページで親・子・孫の表示に対応したパンクズリストの表示方法を紹介しました。