サイトを観覧している時に自分がいまどの階層にいるかを把握するために「パンくずリスト」というものがあります。パンくずリストは一般的にサイトの上あたりについている階層を示すものです。ユーザーの現在位置を知らせ、クローラーを巡回させる役割があります。今回は「Wp SiteManager」というプラグインを使います。

CONTENTS

• 1.パンくずリストの名前の由来
• 2.プラグインWp SiteManagerのダウンロード
• 3.パンくずナビを表示するためにタグを追加
• 4.CSSで横並びにして整える
• 5.トップページラベルの表示を変更する
• 6.パンくずリストの表示のカスタマイズ

1.パンくずリストの名前の由来

最初パンくずリストってふざけた名前で本当の名前なの？と思いましたが、これが正式な名前で英語はbread crumbs,bread crumbs navigationというみたいです。気になって由来を調べてみると童話「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通り道にパンくずを置いていったというのに由来するらしいです。その由来通りユーザーがサイトで迷子にならないためについています。また、検索エンジン対策においてもクローラーに自分のサイトを巡回させるためにも有効だと言われています。

2.プラグインWP SiteManagerのダウンロード

早速「プラグイン」の「新規追加」より「WP Site Manager」と検索し、インストールして有効にします。

WP SiteManagerは企業のホームページなどを作るときに便利な機能が多数はいったプラグインで、以下のようにパンくずリストの他にもページナビ、メタの設定、サイトマップの作成などができます。今回はパンくずリストのみ紹介します。

WP SiteManager機能一覧

• サイトマップの表示
• パンくずナビの表示
• ページナビ（ページング）の表示
• サブナビゲーションの表示
• デバイス設定とテーマ切り替え機能
• メタキーワード、ディスクリプションの設定
• OGP、Twitter Cardsの出力
• ページキャッシュ

3.パンくずナビを表示するためにタグを追加

パンくずリストを追加したいところに以下のタグを追加します。

トップページにパンくずリストは必要ないのでトップページに表示しないために条件分岐タグ!is_front_page()を使い、トップページを除外します。条件分岐タグ前に表示される「!」は否定を意味していて、この場合は「トップページではない」を意味します。そして<div class="bread"> で囲んでいます。

HTMLでは以下のように出力されます。

4.CSSで横並びにして整える

あとは初期状態だと普通のリスト表示になっているのでCSSでデザインを横並びにして間に大なり記号（＞）を入れて整えます。とくに難しい点はないと思うのですが、ひとつ上げるなら疑似要素:afterでリストの右側に大なり記号（＞）を入れてpaddingで隙間を調整しています。さらに一番最後のリストには大なり記号（＞）はいらないのでli:last-child:afterでcontent:'';を空にして、最後だけ消します。

5.トップページラベルの表示を変更する

いま現在の状態だとパンくずリスト一番左は「トップページ」となっているはずです。このトップページの文字を他の文言に変更したい場合もあると思います。このサイトでもトップページではなく英語表記にしたかったので、「HOME」に変更しています。方法としてはWP_SiteManager_bread_crumb::bread_crumb() の()の中に'home_label=HOME'を追加することで実現できます。

6.パンくずリストの表示のカスタマイズ

パンくずリスト用テンプレートタグパラメータ

カスタマイズするためのパンくずナビ用テンプレートタグのパラメータが用意されています。上の項で紹介したhome_label=HOMEのhome_label部分のことですね。パラメータを指定することでテキストを変更したり、出力されるclassを変更できます。

パラメータ	内容	デフォルト
type	「string」を指定すると、リストではなく、文字列として出力。	list
home_label	パンくずなびのホーム部分	トップページ
search_label	検索結果	%sの検索結果（%sが検索文字列）
404_label	404ページ	404 Not Found
category_label	カテゴリー	%s（%sがカテゴリー名）
tag_label	投稿タグ	%s（%sが投稿タグ名）
taxonomy_label	カスタム分類	%s（%sが分類名）
author_label	作成者	%s（%sが作成者名）
attachment_label	添付ファイル	%s（%sが添付ファイル名）
year_label	年	%s（%sが年の数字）
month_label	月	%s（%sが月の数字）
day_label	日	%s（%sが日の数字）
joint_string	typeでstringを指定した場合の結合文字列	＆gt;(>)※表示させるため「＆」を全角にしています。
navi_element	ラッパー要素名。divまたはnavを選択可能	空（要素なし）
elm_class	ラッパー要素のclass。ラッパー要素がなくtypeがリストの場合は、ulのclassとなる。	bread_crumb
elm_id	ラッパー要素のid。ラッパー要素がなくtypeがリストの場合は、ulのidとなる。	空（idなし）
li_class	typeがリストの場合はliに付くclass。	空（なし）
class_prefix	各classに付く接頭辞。	空（なし）
current_class	表示中のページのパンくずナビに付くclass。	current
indent	タブのインデント数	0
echo	出力を行うかどうか。	「true」を出力。「0」または「falese」を指定すると、PHPの値としてreturnする

パラメータを複数指定

パラメータを複数指定するときは''（シングルクォーテーション×2）の中に&（アンド）で区切って指定します。例えばさきほどの例に付け加える場合は以下のようになります。

この場合はトップページを「HOME」に変更してカテゴリーの名前を「%scategory」という表示に変更しました。%sに選択されているカテゴリー名が出力されます。

参考書籍：一歩先にいくWordPressのカスタマイズがわかる本