パンくずリストを作成しようと『 Breadcrumb NavXT 』というプラグインを設置。

調べてみたら、『 WordPress SEO by yoast 』でも、パンくずリストが簡単に設定できるとのことだけど、知らなかったし使っていなかったので、今回は、『 Breadcrumb NavXT 』。

しかしながら、思っていた以上に設定に手間取ってしまったので、以下、覚え書き。

Breadcrumb NavXTとは

ページの上部に表示され、サイトを訪れた人がサイトのどの位置にいるのかを一覧として表示するパンくずリストを作成する WordPress のプラグイン。

パンくずリストの利点と重要性

  • 自分が見ているページが web サイトのどの位置にあるのかをユーザーに伝えることができる。
  • Web サイトの構造が的確に伝わるので検索エンジン（クローラー）がサイト内を巡回しやすくなる。
  • 対策キーワードが内部リンクとなるアンカーテキストになるので内部SEOにも有効。

インストールから有効化

Breadcrumb-NavXTのインストール

  1. 管理画面左側「プラグイン」から「新規追加」で「 Breadcrumb NavXT 」を検索。
  2. 「 Breadcrumb NavXT 」が表示されたら「いますぐインストール」をクリック。
  3. インストールが完了したら「プラグインを有効化」をクリックして有効化。

プラグインを直接ダウンロードして設置する場合は、下記からインストールして有効化。

『 Breadcrumb NavXT 』の公式サイトは ⇒ こちら

設置方法

パンくずリストを設置したい場所（phpファイル）に、下記のコードを記述。

header.php ファイルに記述しようとしたけど上手くいかず、今回は、個別投稿ページの page.php ファイルに記述。

※投稿したブログにもパンくずリストを表示させる場合は、個別投稿ページの single.php ファイルにも記述。

Breadcrumb-NavXT設定

1. 管理画面左側「外観」の「テーマの編集」から「個別投稿ページ」をクリック。

Breadcrumb-NavXT設定

2.「個別投稿ページ」が表示されたら設置場所を決めて上記のコードを記述して「ファイルを更新」をクリック。

初期設定をカスタマイズ

『 Breadcrumb NavXT 』は、初期設定では下記のようになっている。

  1. パンくずリストの先頭部分の表示が「サイトタイトル」。
  2. リストのリンクの上にカーソルを重ねるとサイトタイトルが「吹き出し」で表示。
  3. トップページにパンくずリストが表示される。

Breadcrumb-NavXT初期設定

「 Breadcrumb NavXT 」設定画面の「一般」タブから設定を変更。

Breadcrumb-NavXTカスタマイズ

  1. パンくずリストの先頭部分の表示を「サイトタイトル」から「トップページ」に変更するので、ホームページテンプレートの「 %htitle% 」を「トップページ」に修正。
  2. 吹き出しを表示させている記述は「 title 属性 」なので、「吹き出し」を表示しないように、ホームページテンプレートの「 title = ” %title へ移動 ” 」を削除。
  3. トップページにはパンくずリストを表示しないようにするので、ホームページテンプレート（リンクなし）の「 %htitle% 」を削除。

これで、概ね完了かと思っていたら…。

構造化データにマークアップ

『 Breadcrumb NavXT 』の設置が完了したけど、パンくずリストが構造化データになっていなければSEO効果が無いので、『 構造化データテストツール 』で確認。

正しく認識されていなかった。

どうやらデフォルトでは『 Breadcrumb NavXT 』は、パンくずリストに構造化データを設置するためのマークアップが出来ないようだ。

なので記述するコードに、マークアップするための「 typeof=”BreadcrumbList” vocab=”http://schema.org/” 」を追加。

「個別投稿ページ」を表示。

Breadcrumb-NavXT構造化データマークアップ

再度、記述してあったコードを削除して、同じ場所に上記のコードを記述して「ファイルを更新」をクリック。

これで、パンくずリストを構造化データ化する設定が完了。

もう一度、『 構造化データテストツール 』で確認したら、今度は、正しく認識されたので、今度こそ設定完了かと思ったら…。

モバイルの表示設定

レスポンシブデザインのサイトなので、モバイル表示を確認したら長いパンくずリストが普通に表示されていてレイアウトが崩れていた。

なので、モバイルではパンくずリストが表示されないように、PCとモバイルで表示する項目を変更できる下記のPHPの条件分岐タグを追加。

「 < ?php wp_is_mobile(); ?> 」

※このタグは、タブレットもモバイルだと判定するので、タブレットに表示したい場合は使用不可。

スマホとPCで異なるものを表示したい場合

< ?php if (wp_is_mobile()) :? >
ここにスマホに表示したいものを書く。
< ?php else: ? >
ここにPCに表示したいものを書く。
< ?php endif; ? >

PCのみ表示したい場合

< ?php if (!wp_is_mobile()) :? >
ここにPCに表示したいものを書く。
< ?php endif; ? >

今回は、PCにだけにパンくずリストを表示したいので、どちらも使えるけど、「 < ?php if (wp_is_mobile()) :?>< ?php else: ?> ～ < ?php endif; ?> 」をコードにさらに追加。

「個別投稿ページ」を表示。

モバイル表示Breadcrumb-NavXT設定

もう一度、記述してあったコードを削除して、同じ場所に上記のコードを記述して「ファイルを更新」をクリック。

これで、パンくずリストがPCでは表示されるけどモバイルでは表示されなくなった。

段取りが悪くて思っていた以上に手間が掛かってしまったけど、今度こそ『 Breadcrumb NavXT 』設置完了。

かと思いきや、パンくずリストのデザインが、まだ、これからだった…。