パンくずリストを簡単に表示させるプラグイン

パンくずリストはSEO的にも、ユーザー的にも、設置しておいた方がよい、サイト内ナビゲーションではありますが、自分でコーディングするのは結構大変。既存のテーマを使ってSEO対策をしつつブログ運用をしたいならば、そもそもパンくずリストが設置されたテーマを使うべし！

しかし今回はオリジナルテーマを使ったWordPressでパンくずリストの設置が必要だったので、サクッと設置できる、プラグインを利用しました。その名も「Breadcrumb NavXT」。

プラグインを入れて、ちょこっと記述するだけ！

使い方はとっても簡単でした。

プラグイン＞新規追加　から「Breadcrumb NavXT」を有効化します。

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

あとは、パンくずリストを表示したい場所に、上記コードを記述するだけ。

これだけで基本的な設置は完了。スタイルはCSSで普段通りに書いてあげればOKです。

ちなみに何も設定をしないと、パンくずリストの先頭のタイトルは、WordPressのブログタイトルとなります。なのでちょっと一工夫で、設定＞Breadcrumb NavXTの設定　から、「ホームページパンくず」項目に書いてある記述のところを変更します。

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

%htitle%　となっている場所がホームのリスト項目になるので、そこにFontAwsomeなどのアイコンフォントと「HOME」というような具合に変更すれば、

こんな感じに表示できたりします。記述変更後は↓↓↓こんな感じです。

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name"><i class="fas fa-home"></i>HOME</span></a><meta property="position" content="%position%"></span>

自分のための備忘録なので、雑なまとめですが、そのうち振り返ってちゃんとまとめてみたいと思います。