Breadcrumb NavXTプラグインを使ってパンくずリストを設置(WordPressで作成したホームページ)

ホームページにパンくずリストを設置したくてBreadcrumb NavXTプラグインというものにたどり着きました。
Breadcrumb NavXTプラグインは、WordPressで作成したホームページにパンくずリストをページに合わせて表示してくれるものです。
[SYDNEY]というテーマを使ったホームページに設定する方法を例にしています。

[Breadcrumb NavXT]をWordPressにインストール

  • 管理画面のメニューから[プラグイン]->[新規追加]をクリック
  • 検索ボックスに「Breadcrumb NavXT」と入力
  • [今すぐインストール]をクリック

f:id:a1026302:20201015223348j:plain
インストールが完了後は[有効化]ボタンをクリックしてプラグインを有効にします。

[Breadcrumb NavXT]設定

[Breadcrumb NavXT]のインストールが完了すると、[設定]メニューの中に[Breadcrumb NavXT]ができるので、クリックして設定画面を開きます。

[Breadcrumb NavXT]の画面は以下の通りです。
f:id:a1026302:20201015224120j:plain

テーマの編集でコード追加

以下のPHPコードを[外観]->[テーマエディタ]->[header.php]の最後あたりに貼り付けます。

<div class="breadcrumbs" typeof="BreadcrumbList" ">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

[外観]->[テーマエディタ]をクリックします。
([SYDNEY]というテーマを使用しています。)

[テーマの編集]画面が開かれるので、[テーマファイル]から[header.php]をクリックします。
その後、[選択したファイルの内容]の最終行に準備したコードを貼り付け、[ファイルを更新]ボタンをクリックします。
f:id:a1026302:20201016130932j:plain

ホームページからパンくずリスト確認

各ページにパンくずリストが表示される状態になりました。
f:id:a1026302:20201016131803j:plain

Breadcrumb NavXTプラグイン設定

追加で[Breadcrumb NavXT]プラグインの設定を行います。
ダッシュボード画面左側[設定]メニューの[Breadcrumv NavXT]をクリックします。

[Breadcrumv NavXT 設定]画面が開かれます。
f:id:a1026302:20201016132439j:plain

パンくずリスト先頭のタイトルをブログタイトルから変更

先頭にホームページを含む場合、パンくずのタイトルはブログのタイトルになってしまうため[トップページ]という文字列に変更します。
編集個所は以下の通りです。
f:id:a1026302:20201016133446j:plain
変更するコードは以下の通りです。

<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current>
<span property="name">トップページ</span></a><meta property="position" content="%position%"></span>

修正後にブラウザからホームページにアクセスし、パンくずリストの先頭文字列が[トップページ]に切り替わったことを確認します。
f:id:a1026302:20201016133654j:plain