WordPressプラグインでパンくずリストを作るWP SiteManager

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

CONTENTS

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:aftercontent:'';を空にして、最後だけ消します。

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

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

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

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

カスタマイズするためのパンくずナビ用テンプレートタグのパラメータが用意されています。上の項で紹介したhome_label=HOMEhome_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のカスタマイズがわかる本

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Posts

WordPressの記事編集に便利なプラグインAddQuicktagの使い方

WordPress同じサーバー内の別ディレクトリに引越し〜テスト環境から本番環境へURL変更〜

WordPress簡単インストール 〜ロリポップ編〜 サブディレクトリをつけない