パンくずリスト作成メモ
概要
とあるWordPress案件でパンくずリストをカスタマイズしなくてはいけなかったのでその時の覚え書きです。
WordPressのテンプレート階層構造や、その判断に使用する関数なども合わせて整理しました。
おそらくテーマによってはタイトルの表記などが異なるので最終的にはテーマごとにカスタマイズは必要かもしれません。
パンくずリスト
ウェブサイト内で現在表示されているウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの
→(wikipedia)パンくずリスト – Wikipedia
前提条件
・WordPressの「設定」「表示設定」「フロントページの表示」において
「固定ページ (以下を選択)」で
「フロントページ」と「投稿ページ」とも
いずれかの固定ページが指定されいているものとします。
おそらく、この設定がかわるとパンくずリストの表示、もしくは、条件分岐も変わってくると思われます。
・テーマはtwentytwelveを使用。WordPress › Twenty Twelve « Free WordPress Themes
・個別ページ/カテゴリーアーカイブページはカテゴリ階層、固定ページは親子関係も含めて表示
・タグアーカイブ、作成者アーカイブ、月別アーカイブ、年月日アーカイブ等は、掲載していません(というか、力尽きました。。。)
・階層の区切りには「 >> 」を使用しました。
・適時、CSS等で整形が必要ですが、本例では横に階層をつなげているので、特に何もしなくても、それなりの表示になります。
最終的なソースコード
<div id="breadcrumbs"> <!-- トップページ以外のみ表示 --> <?php if ( is_front_page() == false ) : ?> <!-- 投稿記事一覧の場合 「フロントページの表示」で「投稿ページ」に設定されているページ --> <?php if ( is_home() ) : ?> <a href="<?php bloginfo('url'); ?>">HOME</a> >> <?php $original_title = wp_title( '|', false, 'right' ); ?> <?php $delimiter_title = explode('|', $original_title); ?> <?php echo $delimiter_title[0]; ?><BR><BR> <?php wp_title( '|', true, 'right' ); ?> <!-- この行は、wp_titleで得られた文字列をそのまま表示しています --> <?php endif; ?> <!-- 投稿記事の場合;カテゴリ階層考慮して表示 --> <?php if ( is_single() ) : ?> <a href="<?php bloginfo('url'); ?>">HOME</a> >> <?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' >> '); ?> <?php the_title(''); ?> <?php endif; ?> <!-- 固定ページの場合;親子関係を考慮して表示 --> <?php if ( is_page() ) : ?> <a href="<?php bloginfo('url'); ?>">HOME</a> >> <?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?> <a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>"> <?php echo get_page($parid)->post_title; ?></a> >> <?php } ?> <?php the_title(''); ?> <?php endif; ?> <!-- カテゴリーアーカイブ表示;カテゴリ階層を考慮して表示 --> <?php if ( is_category() ) : ?> <a href="<?php bloginfo('url'); ?>">HOME</a> >> <?php echo get_category_parents(get_category( $cat ), true, ' >> '); ?> <?php endif; ?> <?php endif; ?> </div><!-- #breadcrumbs -->
ソースコード説明
(1)条件分岐
・is_front_page();トップページ。当初「トップページだったら」なにもせず「endif」と記述していたのですが、これだと、固定ページをトップページに指定しているため、「is_page」の分岐に引っかかり、パンくずリストが表示されました。従いまして、最初に「トップページ以外」という条件分岐を付けました。
・is_home() ;投稿記事一覧
・is_single();個別記事(投稿)
・is_page();固定ページ
・is_category();カテゴリーアカイブページ
(2)各条件分岐内の説明(わかりにくくてすみません。各関数は関数名でググればだいたい、WordPress Codex 日本語版にヒットしますんで。)
・is_home() ;投稿記事一覧
bloginfo(‘url’)でWordPressトップページのURL取得します。
wp_title( ‘|’, false, ‘right’ ); では「新着情報 | sample2 | Just another WordPress site」のような感じの表示になってしまうので、文字列に代入後、再びデリミタ「|」で文字を配列に分割、配列の最初の要素のみをパンくずリストに設定しました。※今回のソース/下記例では参考までに「wp_title」の結果も表示しています。
※当初、wp_titleの代わりに、the_title(”);で良いのかな、と思ってたら、投稿記事一覧の最初の投稿のタイトルを取得してしまうので却下です。まあ、関数リファレンスをしっかり読みましょう、ということです。
・is_single();個別記事(投稿)
get_the_category()で表示している投稿のカテゴリを取得し、配列$catに代入。
配列$catの先頭配列(カテゴリが複数ある場合、最初のカテゴリ)に対して、get_category_parentsで親カテゴリリストを表示します。
the_title(”);で現在の投稿のタイトルを表示します。
・is_page();固定ページ
個々の関数の意味は省きますが、現在表示の固定ページのIDからその親ID階層を配列に取得するのですが、現在の親、その親、という配列順になるため、array_reverseで親から順に並び替えます。
その後、各階層の親ページのリンクURLをget_page_link( $parid );で取得、ページタイトルをget_page($parid)->post_title;で取得、表示。
最後に、現在の固定ページのタイトルをthe_title(”);で表示します。
・is_category();カテゴリーアカイブページ
get_category( $cat )でアーカイブとして表示しているカテゴリを取得し、get_category_parentsでそのカテゴリの親リストを表示します。
表示種類別パンくずリスト表示例
(2)投稿記事一覧の場合 「フロントページの表示」で「投稿ページ」に設定されているページ
(4)固定ページの場合;親子関係がわかるように表示(例は1階層の親ページがある場合)
(5)カテゴリーアーカイブの場合;カテゴリ階層を考慮して表示
参考サイト(有難うございます!)
・テンプレート階層 – WordPress Codex 日本語版
・条件分岐タグ – WordPress Codex 日本語版
・関数リファレンス – WordPress Codex 日本語版
・パンくずリストの追加方法 -WordPressの投稿・固定ページ対応-|ThePresentNote
・is_home()とis_front_page()の違いって何? | 図解WordPress
最後に
参考ソースはネット上にたくさんあって最初はコピペで楽しようと思ったのですが、結局、各テンプレート関数の意味などを理解しないと期待通りの表示にならなくて、今回は、自分でソースコードを書いてみました。
さらに言うと、この記事を書いている間に、同じような表示を行うのに別の関数を使用していたりして、あらまあ、という気付きにもなりました。反省〜
例)WordPressトップページのURLを表示する際に、bloginfo(‘url’); と echo get_option(‘home’); を特に理解せず両方使用していた、など。
/////