【WordPress】コピペで使えるパンくずリスト（複数階層対応）

パンくずリストは、ユーザーがサイト内で現在どの位置にいるのかを視覚的に示すための便利なナビゲーションです。特に階層構造のあるページや投稿では、ユーザーが親ページやトップページに戻りやすくするための有効な手段です。

この記事では、WordPressで簡単にコピペして使える汎用的なパンくずリストのコードスニペットを紹介します。このコードは、カスタム投稿タイプや多階層の子ページにも対応しています。

コード全体

コードスニペットの全体は以下になります。

<div class="breadcrumb">
  <a href="<?php echo home_url('/'); ?>">TOP</a>
  <?php
  $ancestors = get_post_ancestors($post);
  if (!empty($ancestors)) {
    $ancestors = array_reverse($ancestors);
    foreach ($ancestors as $ancestor_id) {
      $ancestor_title = get_the_title($ancestor_id);
      $ancestor_link = get_permalink($ancestor_id);
      echo '<a href="' . $ancestor_link . '">' . $ancestor_title . '</a>';
    }
  }
  ?>
  <span><?php the_title(); ?></span>
</div>

このコードを有効なテーマの page.php や header.php に追加するとパンくずリストとして表示されます。

• スタイルの調整
  上記のスニペットには、スタイルの設定は含まれていません。.breadcrumb クラスに対して適宜CSSでスタイリングを行ってください。
• Warning: Undefined variable $post が表示される場合
  ほとんどのテンプレートでは $post グローバル変数が自動的に設定されていますが、いくつかのテンプレートやカスタムクエリの中で使用する場合は、グローバル変数$postを明示的に参照する必要があります。
  その場合は、コードスニペットを設置した箇所より前に、global $post; を追加してください。
• 全投稿タイプ、複数階層に対応
  このコードは、固定ページや投稿、カスタム投稿タイプに対応しており、多階層の子ページでも適切に動作します。

詳しい構造の説明

それでは、コードスニペットの仕組みを詳細に説明します。

1. トップページへのリンク

<a href="<?php echo home_url('/'); ?>">TOP</a>

この部分では、サイトのトップページへのリンクを表示しています。

home_url('/') は WordPress の関数で、サイトのトップページの URL を取得します。これにより、どのページからでもトップページに戻るリンクを作成できます。

2. 親ページの取得と表示

$ancestors = get_post_ancestors($post);

この行は、現在のページの親ページ ID の配列を取得しています。get_post_ancestors() 関数は、親ページ ID を取得し、さらにその上位のページまで遡って、すべての親ページの ID をリスト化します。

if (!empty($ancestors)) {

この条件文は、親ページが存在する場合にのみ、以下の処理を実行することを意味しています。親ページがない場合は何も表示されません。

$ancestors = array_reverse($ancestors);

array_reverse($ancestors); は、取得した親ページの配列を逆順に並べ替える関数です。これにより、トップページに近い順から表示されるようになります。

foreach ($ancestors as $ancestor_id) {

このループは、各親ページの ID に対して処理を行います。各親ページのタイトルとリンクを取得し、それらをパンくずリストに追加します。

$ancestor_title = get_the_title($ancestor_id);

get_the_title($ancestor_id); は、親ページのタイトルを取得する関数です。この関数は、指定されたページ ID に基づいてタイトルを取得します。

$ancestor_link = get_permalink($ancestor_id);

get_permalink($ancestor_id); は、親ページのリンクを取得する関数です。この関数は、指定されたページ ID に基づいてページのパーマリンク（URL）を取得します。

echo '<a href="' . $ancestor_link . '">' . $ancestor_title . '</a>';

この行は、親ページのタイトルをリンクとして表示しています。echo 文を使って、HTML のリンクタグを生成し、親ページのタイトルとリンクを表示します。

3. 現在のページのタイトル表示

<span><?php the_title(); ?></span>

この部分では、現在表示しているページのタイトルを表示しています。

<?php the_title(); ?> は、現在のページのタイトルを取得して表示する WordPress の関数です。このタイトルはスパンタグで囲まれており、リンクではなくテキストとして表示されるため、ユーザーに現在のページであることを示します。

まとめ

このパンくずリストは、WordPressサイトで階層構造のページや投稿、さらにはカスタム投稿タイプにも対応できる汎用的なソリューションです。コピペしてすぐに使える上、スタイルのカスタマイズも自由自在です。

ぜひ、あなたのサイトにも導入してみてください！