breadcrumb2

プラグインBreadcrumb NavXTでDashicons付きパンくずリストを出す

2015/02/11[公開] 2015/12/16[最終更新]

 テーマtwenty fifteenにプラグイン「Breadcrumb NavXT」を使ってパンくずリストを出しました。google先生の推奨通りのパンくずリストを吐き出してくれる超定番プラグインです。私のような素人には利用しないという選択肢はありませんね。さっそくインストールしてデフォルトのまましばらく使ってみましたが、次のようにしてみたいと思い、いろいろググって試行錯誤した記録です。

  • ホームをブログタイトルじゃなく文字通り「ホーム」に変更
  • Dashiconsのアイコンフォントを使いたい
  • 投稿タイトルの真上に出しているのでパンくずリストには投稿タイトルを出さない
  • 全体的にパンくずの文字を小さく表示

プラグインBreadcrumb NavXTをインストールと有効化

 管理画面からプラグイン-新規追加で「Breadcrumb NavXT」で検索してインストールして有効化、いつもの手順です。

子テーマにコピーしたcontent.phpに入れる

 テーマtwenty fifteenの場合、投稿タイトルの真上あたりが入れやすそうですね。プラグインの説明通りに以下の記述をコピペします。

 twentyfifteenのテーマフォルダからcontent.phpファイルを子テーマにコピーして作業します。今回はデフォルトのcontent.phpの19と20行目の間に挿入しています。

ホームをブログタイトルじゃなく文字通り「ホーム」に変更

 管理画面の「設定」-Breadcrumb NavXTの設定を一箇所変更しました。一般タブにある「ホームページ用テンプレート」の記述から「%htitle%」の部分を「ホーム」とカタカナに変更しました。

breadcrumb1

 デフォルトではブログタイトルがホームページの部分に出ていますが、文字通り「ホーム」にしておいたほうがこのあと設定するアイコンフォントの「 」との組み合わせが良さそうです。

 今回、プラグインの設定画面では、上記の一箇所変更だけでその他はすべてデフォルトのままにしました。

アイコンフォントDashiconsをテーマでも使えるようにする

※私の場合は、前回記事にしたプラグインMax Mega Menuをインストールしていたのでこのfunction.phpでの作業は不要でした。

 ほとんどのテーマでは管理画面にログインした状態でしかDashiconsが有効になっていないそうです。今回のtwenty fifteenもそうですが、子テーマのfunctions.phpに追記するだけで、投稿内やテーマ内で利用できるようになります。

 これを忘れると、WordPressにログインしている自分だけはアイコンが見えている裸の王様状態になるので注意ですね。

 ちなみにライセンス的にはGPLv2というのになっているので、テーマ内で使っても問題ないとのこと。

今回使うのは

 アイコンの種類とコードはコチラに行って選びます。

WordPress › Dashicons | WordPress Developer Resources

 下のほうにリストされているアイコンを選んで、、「Copy CSS」や「Copy HTML」をクリックしてコピペして使います。

 今回使うのはホーム用の「 」とカテゴリーとタクソノミー用の「 」です。

子テーマのstyle.cssに追記

 アイコンフォントを先頭につける、投稿タイトル部分を非表示、文字を小さくするのはCSSで指定します。子テーマのstyle.cssに追記していきます。

アイコンフォントをパンくずリストにつける

 プラグインBreadcrumb NavXTが生成したパンくずリストにCSSの疑似要素:beforeというのを使って各リストの先頭にアイコンフォントを出します。

パンくずリスト上の投稿タイトルを非表示に

 記事のタイトルの真上にパンくずリストを出しているので、パンくずリストとタイトル部分がモロ被りです。

  SEO的にはどうなのかわかりませんが、タイトル部分を短く省略する方法をプラグイン作者さんが紹介しているので、いさぎよく全部非表示にしてみました。

2015/11/29追記:

 Breadcrumb NavXT 5.3の仕様変更がありました。プラグインを新規にインストールした場合、パンくずリストのタイトルを非表示にするCSSはコチラで対応できました。(プラグインアップデートの場合は以前のままで大丈夫のようです。)

参考にしたサイト:プラグイン作者さんの記事

Trimming Breadcrumb Title Lengths With CSS

参考にしたサイト:バージョン5.3での変更点

How to Implement Schema.org BreadcrumbList with Breadcrumb NavXT

パンくずリストの文字を小さくする

 他の方のブログを見ていると、パンくずリストが少し本文より小さくしている方が多い気がするので真似します。さらに、記事タイトルとの距離を少し空けています。

最後にひとこと

 以上でパンくずリストを出すことができました。このブログに出ているパンくずリストはこの設定になっています。パンくずリストのないテーマでも、プラグインBreadCrumbs NavXTをインストールするだけで簡単にパンくずリストを設定することができるようになります。【2015/12/13更新】WP4.4にアップデートして、参考サイトのリンクをembed埋め込みタイプに変更しました。

こちらの記事もどうぞ

「プラグインBreadcrumb NavXTでDashicons付きパンくずリストを出す」への2件のフィードバック

コメントを残す

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