読者です 読者をやめる 読者になる 読者になる

codes / cipher

文章置き場

パンくずリストを表示するプラグイン「Breadcrumb NavXT」が神だった件

 最近更新が滞りがちですが生きてます。大丈夫です。
 いや趣味サイトの方を弄り倒してまして本業が楽しくて忙しいんです☆(キリッ

 まあ前置きはともかく、記事タイトルの通りですが、Breadcrumb NavXTというパンくずリスト表示プラグインを音楽サイトに導入したら超絶便利だったのでご紹介します。

Breadcrumb NavXTの概要

 上記の通り、パンくずリストを表示するプラグインです。使い方は、カスタマイズしないなら、インストールして、テーマファイルの好きな場所に

<?php if(function_exists('bcn_display')){bcn_display();} ?>

と記述するだけ。取得する場合はbcn_display(true);とすればOK
 全投稿タイプ(カスタムポスト含む)やカテゴリーページ、アーカイブページなどにも対応していますので、デザインの都合によりますがheader.phpなど全ページに読み込ませているファイルに記述すると楽チンです。

パンくずリストプラグインって、上手く動いてくれないでしょ?

 私もこのプラグインを導入するまではそう思っていました。特に、カテゴリーを階層化したは良いものの、同階層の複数のカテゴリーに記事を関連付けた場合等の挙動が気になりますよね。
 このプラグインでは、まず上の階層からカテゴリーを調べていって、同階層の複数のカテゴリーに記事が属していた場合は、カテゴリー名順に取得してパンくずリストを生成します。
 という事はカテゴリー名を工夫すれば優先的にパンくずリストに表示されるカテゴリーを指定できます。PHPを弄ればID順とかにも出来るそうですが、IDだと後からそういった工夫がしにくいので、私はカテゴリー名順で満足しています。

Macrodataを埋め込める

 このプラグインでは出力するHTMLをほぼ全部カスタマイズできます。大体、設定画面を見れば解ると思います。
 Googleにサイトの階層構造を表示してもらいたい場合はMacrodataを埋め込みますが、この場合は以下の様にすると良いです。

テンプレートファイル

<div class="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="breadcrumb"> <?php if (function_exists( 'bcn_display' )){bcn_display();} ?> </div>

Breadcrumb NavXTの設定

 下記は一例です。Macrodata以外の所は各テンプレートをお好みで変更してください。

<a href="%link%" itemprop="url"><span itemprop="title">%htitle%</span></a>

<li>タグ等を使いたい!

 デフォルトではパンくずリストに表示する内容の設定欄には一部のHTMLタグしか入力できません。しかしリスト等を使ってデザインしたいという人も沢山居ると思われます。
 この問題を解決するには、function.phpにフィルターを追記します。パンくずリストの使い方 Breadcrumb NavXT – WordPress Snippetに詳しく解説されています。例では<li>タグの使用が出来るようになります。

 いやー、プラグイン使わずにカテゴリーの階層表示もMacrodataもバッチリのパンくずを作るにはどうすればいいのか悩んでいたんですが、これでかなり手間が省けました。

追記:アップデートで設定が飛んじゃったので自分の為にメモ

 Bootstrapをお使いの方は以下のコードをまずテンプレートにコピペします。

<ol class="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="breadcrumb"><? php if(function_exists('bcn_display')){bcn_display();} ?></ol>

 そしてアクティブでないアイテムのHTML(リンクする方)を

<li><a href="%link%" itemprop="url"><span itemprop="title">%htitle%</span></a></li>

アクティブなアイテムのHTML(リンクさせない)を

<li itemprop="title" class="active">%htitle%</li>

とすれば大丈夫だと思います。