ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

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

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

WordPress WordPress-パンくずリスト WordPress-プラグイン ホームページ-ブログ

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

パンくずリストについて

パンくずリストとは

パンくずリストとは、Webサイトを訪れたユーザが今どこにいるかを視覚的にわかりやすくした誘導表示のことを言います。

名前の由来

パンくずリストという語源は、童話「ヘンゼルとグレーテル」の話の中に主人公の兄弟が森に入るときに、迷子にならないように自分たちが通ってきた道にパンくずを置いていったエピソードが由来となっているそうです。

種類

位置型パンくずリスト

位置型パンくずリストとは自身が閲覧しているページが階層構造内のどこに位置しているかを示すものです。ユーザ自身の現在位置を把握しやすいメリットがあり、階層構造に広がりのあるサイトに効果的です。

属性型パンくずリスト

属性型パンくずリストは、ユーザの操作によって変化します。サイト内構成の現在の位置を示すのではなく、閲覧しているページがWebサイト上のどのカテゴリー（属性）に分類されているのかを示します。検索フィルタのような働きをし、ユーザが複数の選択肢を経て表示されるようなサイトに用いられます。

パス型パンくずリスト

現在閲覧しているページにどのようにしてたどり着いたのかを示すものです。ブラウザの「戻る」ボタンや履歴機能と同じ役割であることから「履歴型のパンくずリスト」とも呼ばれています。

メリット

ユーザビリティが高くなる

ページ数の多いサイトになると構造が複雑になり、ユーザ自身が今サイト内のどこにいるか分かりにくくなることがあります。
パンくずリストを設置することで「自分が今サイト内のどこにいるのか」や「サイトの構造」を認識しやすくなり、結果として使いやすさを高めることができます。

検索エンジンが効率的にクローリングできる

Google検索などの検索エンジンにヒットさせるには、まずはクローラーと呼ばれる情報収集ロボットに自身のサイトの情報を収集（クローリング）してもらう必要があります。
パンくずリストを設置することは、そのサイトが体系的に整理されることとなります。するとクローラーもパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができます。

パンくずリストの作り方

[Breadcrumb NavXT]をWordPressにインストールします。

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

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

[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]プラグインの設定を行います。
ダッシュボード画面左側[設定]メニューの[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:20201203154853j:plain