Breadcrumb NavXTでパンくずリストを追加する方法【WordPress】

こんにちは！コーダーのゆうしです。

WordPressサイトにパンくずリストを追加したいとき、プラグインを使うのが一番手軽です。今回紹介する Breadcrumb NavXT はカスタマイズの幅が広く、実務でもよく使っているプラグインです。導入方法から表示のカスタマイズまでまとめて解説します。

Breadcrumb NavXTをインストールする

WP管理画面の「プラグイン」→「新規プラグインを追加」で「Breadcrumb NavXT」と検索してインストール・有効化してください。

またはWordPress.orgのプラグインページからZIPファイルをダウンロードして追加することもできます。

パンくずリストを表示する

パンくずリストを表示したい場所に以下のコードを追加します。header.php や各テンプレートファイルに設置してください。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
  <?php if ( function_exists('bcn_display') ) {
    bcn_display();
  } ?>
</div>

function_exists('bcn_display') でプラグインが有効かチェックしてから出力しているので、プラグインを無効化しても画面が崩れません。

カスタマイズ方法

① 投稿詳細ページのカテゴリー表示を消す

デフォルトではパンくずに「カテゴリー」が表示されます。カテゴリーなしでシンプルに表示したい場合は管理画面から変更できます。

管理画面の「設定」→「Breadcrumb NavXT」→「投稿タイプ」タブを開き「投稿階層」を「親投稿」に変更します。親投稿がない場合は TOP > 投稿タイトル のシンプルな表示になります。

② ホームを「TOP」や「HOME」と表示する

デフォルトではサイト名がそのまま表示されます。「TOP」や「HOME」に変えたい場合は管理画面から変更できます。

デフォルトの「%htitle%」となっているとサイトのタイトルが表示が表示されるので、「TOP」や「HOME」などに変更可能です。

③ 区切り文字を画像に変更する

デフォルトの区切り文字を画像矢印に変えたい場合は、まず管理画面の区切り設定を空にして、CSSの疑似要素で画像を追加します。

.breadcrumbs a {
  position: relative;
}

.breadcrumbs a::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 3px;
  width: 6px;
  height: 7px;
  background-image: url(img/arrow.png);
  background-size: cover;
}

画像のサイズやマージンはデザインに合わせて調整してください。

④ ホバー時の「●●へ移動する」を消す

デフォルトでリンクに title="●●へ移動する" が付いているので、ホバー時にツールチップが表示されます。不要な場合は管理画面の各テンプレートから title="%title%へ移動する" を削除してください。最近のサイトではほぼ不要なので、基本的に消してしまっていいと思います。

躓きやすいポイント

パンくずが表示されない

bcn_display() 関数はプラグインが有効化されていないと動作しません。プラグインが有効になっているか管理画面で確認してください。また function_exists('bcn_display') の条件分岐を忘れると、プラグインを無効化したときにエラーが出るので必ず入れておきましょう。

カスタム投稿タイプで正しく表示されない

カスタム投稿タイプのパンくずが意図通りに表示されない場合は「Breadcrumb NavXT」の設定画面で対象の投稿タイプの階層設定を確認してください。カスタム投稿タイプごとに設定できます。

区切り画像が表示されない

疑似要素で画像を追加する場合、画像パスが正しいか確認してください。テーマフォルダからの相対パスで指定する場合はCSSファイルの場所を基準にした相対パスになります。絶対パスで指定するほうが確実です。

まとめ

Breadcrumb NavXTはシンプルなコードでパンくずリストを追加でき、管理画面からのカスタマイズも柔軟にできる便利なプラグインです。ホーム表示の変更・区切り画像の変更・カテゴリー表示の制御など、実務でよく必要になるカスタマイズがひと通り対応できます。WordPressでパンくずを実装するときの定番プラグインとしてぜひ活用してみてください。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。