この記事の画面キャプチャは2018/6/24時点のものになります。
本記事はWordPressテーマ「Twenty Seventeen」を使ってる人向けです。
記事を書き始めてからカテゴリが増えてきたことや、SEO対策としてパンくずリストがあった方がいいと聞くので、ページにパンくずリストを表示してみることにします。
パンくずリストは「サイトのココにいますよ」という案内板の役割をしてくれます。
サイトを見る人にとっては便利な機能ですよねー。
便利で簡単！プラグインインストール
いつもの如く、Google先生に何かいい方法ありませんか？と聞いてみたところ、プラグインで簡単にできますよとのこと。
以下サイトを参考にさせていただいて「Breadcrumb NavXT」をインストールしました。
Breadcrumb NavXTプラグインの使い方
引用元：Admin Web
「WordPress管理画面」→「プラグイン」→「新規追加」で「Breadcrumb NavXT」と検索すれば出てくるので、インストールします。
インストール後はプラグインを有効化するのをお忘れなく。
有効化後は「WordPress管理画面」→「設定」→「Breadcrumb NavXT」と設定メニューが追加されていることが確認できます。
パンくずリストを表示させるためのコード
パンくずリスト非表示状態は以下の通り。
まず、肝心なパンくずリスト表示させるためには表示させたい箇所に以下コードを貼り付ければ表示できるようになります。
★ソースコード記載予定★
プラグインをインストールすればおしまい！というわけではありません。
ヘッダ部分に表示させる方法
まず、ヘッダ部分に表示させてみることにします。
「WordPress管理画面」→「外観」→「テーマの編集」→「テーマファイル」→「テーマヘッダー(header.php)」にパンくずリストを表示するコードを貼り付けます。
ブログのトップページを表示してみると、何か表示できているように見えます。
・・・が、プログタイトルが表示されて長く感じます。「ブログタイトル」部分を「HOME」という文言に表示にさせたいところです。
プラグインの設定を見てみると「htitle」という変数にブログタイトル名が入っていると思われるため、「TOP」という文字列に置き換えてみます。
文字を置き換えたらこんな感じになります。
再度、ブログトップページを表示してみると、「TOP」という文字列に変わっていることが確認できます。
ただ、CSSが効いてないことや、上手く表示できていないため、「テーマヘッダー(header.php)」で表示させるのは諦めて、他のところへ表示することにしました。
各記事にの真上に表示させる方法
今度は「WordPress管理画面」→「外観」→「テーマの編集」→「テーマファイル」→「template-parts」→「post」→「content.php」へ挿入してみます。
その後、どんな感じに表示されるか確認してみたところ・・・
また、階層が深いページを表示させると、問題なくパンくずリストが表示できてました。
パンくずリストを表示するときのポイントは
- どこにパンくずリストを表示させるか
- パンくずリストにスタイルシート内容が反映されるか？
- 深い階層でも表示できるか？
ですね。
