パンくずリストは大規模で深い階層を持つサイトなどでは有用なナビゲーションになりますが、WordPressなどの動的にページ生成される場合に実装するのは少し面倒だったりします。プラグインなどもあるのですが、カスタマイズするのであれば自前で揃えたほうが何かと都合がいいケースもあります。
そこで、ちょうど先日クライアントワークのWordPress案件でパンくずリストを実装する機会があり、その時に使ったコードを備忘録として残しておきたいと思います。今回は投稿やカスタム投稿、カスタム分類は対象外ですが、固定ページの部分には使えるかと思います。
まずはfunctions.phpに固定ページに対して、親ページを持つかどうかをチェックする関数を下記のように用意します。親ページがある場合には、親ページの投稿IDを返すようにしています。
【functions.php】
function is_subpage() {
global $post;
if ( is_page() && $post->post_parent ) {
return $post->post_parent;
} else {
return false;
}
}
そして、固定ページのテンプレートにパンくずリストを実装していきます。ここでの仕様ですが、最下層以外のページはタイトルとパーマリンクを、最下層のページはタイトルのみを出力させるようにします。下記のようにコードを記述します。
【page.php】
<ul>
<li><a href="<?php echo home_url(); ?>">サイトトップ</a> >
</li>
<?php
$postId = $post->ID;
$parentPostArry = array_reverse(get_post_ancestors($post));
if(is_subpage()):
?>
// 2階層目以下の下層ページの場合は階層数だけ繰り返し、ページタイトルとリンクを出力
<?php foreach($parentPostArry as $parentsPostId): ?>
<li><a href="<?php echo get_permalink($parentsPostId); ?>"><?php echo get_the_title($parentsPostId); ?></a> >
</li>
<?php endforeach; ?>
<?php echo get_the_title($postId); ?>
<?php else: ?>
// 1階層目の下層ページの場合は繰り返さずに出力
<?php the_title(); ?>
<?php endif; ?>
</ul>
このパンくずリストはループ外でも使用できるようにする想定です、まずはグローバルの$post変数を参照し、固定ページが持つ親ページの投稿IDを「get_post_ancestors()」関数を使って配列形式で取得します。デフォルトでは直近の順番になるので「array_reverse()」で配列の順番を逆にして、先祖側からに並び替えます。そしてfunctions.phpで用意しておいた、固定ページが親ページを持っているかで分岐させます。親ページがない場合には、そのまま下層ページのタイトルを出力させます。
次に、foreachで先ほどの配列から値である親ページの投稿IDをループさせていきます。パーマリンクの取得には「get_permalink()」を、ページタイトルには「get_the_title()」を使って、引数にはそれぞれループで取り出した親ページの投稿IDを入れていきます。そして最後に、現在の下層ページのタイトルを出力させるようにします。
上記のコードによって、実際にHTMLとして出力されると下記のようなイメージなります。
【HTML】
<ul> <li><a href="https://example.com">サイトトップ</a> > </li> <li><a href="https://example.com/page1/">1階層目の下層ページ</a> > </li> <li><a href="https://example.com/page1/page2/">2階層目の下層ページ</a> > </li> <li><a href="https://example.com/page1/page2/page3/">3階層目の下層ページ</a> > </li> <li><a href="https://example.com/page1/page2/page3/page4/">4階層目の下層ページ</a> > </li> <li>5階層目の下層ページ </li> </ul>
CSSなどでインラインスタイルする必要はありますが、ブラウザで表示させるとこのような横並びで階層がわかるナビゲーションに仕上がります。
サイトトップ > 1階層目の下層ページ > 2階層目の下層ページ > 3階層目の下層ページ > 4階層目の下層ページ > 5階層目の下層ページ
いかがでしょうか、ちょっとした簡易サイトの場合であれば、このように自前で用意したほうが簡単かもしれませんね。今回は固定ページで使えるものですが、また別の機会に投稿ページやカスタム投稿、カスタム分類に対応したバージョンも作ってみたいと思います。
（参考にさせて頂いたサイト）
関数リファレンス/is page
親情報を取得するget_post_ancestors() と get_ancestors() の違い [WordPress]
