WordPressプラグインでパンくずリストを作るWP SiteManager
サイトを観覧している時に自分がいまどの階層にいるかを把握するために「パンくずリスト」というものがあります。パンくずリストは一般的にサイトの上あたりについている階層を示すものです。ユーザーの現在位置を知らせ、クローラーを巡回させる役割があります。今回は「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.パンくずナビを表示するためにタグを追加
パンくずリストを追加したいところに以下のタグを追加します。
1 |
<?php if( class_exists( 'WP_SiteManager_bread_crumb' ) ) {WP_SiteManager_bread_crumb::bread_crumb(); } ?> |
トップページにパンくずリストは必要ないのでトップページに表示しないために条件分岐タグ!is_front_page()を使い、トップページを除外します。条件分岐タグ前に表示される「!」は否定を意味していて、この場合は「トップページではない」を意味します。そして<div class="bread"> で囲んでいます。
1 2 3 4 5 6 7 |
<?php if( !is_front_page() ):?> <div class="bread"> <?php if( class_exists( 'WP_SiteManager_bread_crumb' ) ) {WP_SiteManager_bread_crumb::bread_crumb(); } ?> </div> <?php endif; ?> |
HTMLでは以下のように出力されます。
1 2 3 4 5 6 7 |
<div class="bread"> <ul class="bread_crumb"> <li class="level-1 top"><a href="http://design-record.info/">トップページ</a></li> <li class="level-2 sub"><a href="http://design-record.info/archives/category/wordpress">WordPress</a></li> <li class="level-3 sub tail current">WordPressプラグインでパンくずリストを作るWP SiteManager</li> </ul> </div> |
4.CSSで横並びにして整える
あとは初期状態だと普通のリスト表示になっているのでCSSでデザインを横並びにして間に大なり記号(>)を入れて整えます。とくに難しい点はないと思うのですが、ひとつ上げるなら疑似要素:afterでリストの右側に大なり記号(>)を入れてpaddingで隙間を調整しています。さらに一番最後のリストには大なり記号(>)はいらないのでli:last-child:afterでcontent:'';を空にして、最後だけ消します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.bread_crumb{ overflow:hidden; padding:0; font-size:12px; } .bread_crumb li{ list-style:none; margin-right:10px; float:left; } .bread_crumb li:after{ content:'>'; padding-left:10px; } .bread_crumb li:last-child:after{ content:''; } |
5.トップページラベルの表示を変更する
いま現在の状態だとパンくずリスト一番左は「トップページ」となっているはずです。このトップページの文字を他の文言に変更したい場合もあると思います。このサイトでもトップページではなく英語表記にしたかったので、「HOME」に変更しています。方法としてはWP_SiteManager_bread_crumb::bread_crumb() の()の中に'home_label=HOME'を追加することで実現できます。
1 2 3 4 5 6 7 8 9 |
<?php if( !is_front_page() ):?> <div class="bread"> <div class="inner"> <?php if( class_exists( 'WP_SiteManager_bread_crumb' ) ) {WP_SiteManager_bread_crumb::bread_crumb( 'home_label=HOME' ); } ?> </div> </div> <?php endif; ?> |
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)の中に&(アンド)で区切って指定します。例えばさきほどの例に付け加える場合は以下のようになります。
1 2 3 4 |
<?php if( class_exists( 'WP_SiteManager_bread_crumb' ) ) {WP_SiteManager_bread_crumb::bread_crumb( 'home_label=HOME&category_label=%scategory' ); } ?> |
この場合はトップページを「HOME」に変更してカテゴリーの名前を「%scategory」という表示に変更しました。%sに選択されているカテゴリー名が出力されます。