【WordPress】パンくずリストを作成しよう

Pocket

今回は「パンくずリスト」の作成方法をメモしていきます。

え?「パンくずリスト」って何かって?

そうですよね、私もその呼び方を今日初めて知りました^^;
他の方のブログを巡回していて、現在の記事がサイトの内のどこに位置しているのか教えてくれる案内…っとでもいうのでしょうか?実際に画像で見てもらったほうが分かり易いかもしれません。

パンくずリスト

これがパンくずリストですね。現在の記事がどのカテゴリに属しているのかが一目で分かる案内ですね。
他の方が設置しているのを見て、これは絶対に導入したほうがいいと思い、その方法を探してみました。

ちなみにお使いのWordPressテーマにはこの機能が実装されていたり(私が使用している「ColdBox」というテーマは初めからついてまます)、CSSの編集でも作成することができるようですが、今回は初心者に優しい、いつも頼りになるプラグインで導入してみます。使用するのは「Breadcrumb NavXT」というプラグインです。

Breadcrumb NavXTをインストールする

Breadcrumb NavXTをいつもと同じ方法で、「プラグイン」→「新規追加」→「インストール」→「有効化」

Breadcrumb NavXTの設定

パンくずリスト

Breadcrumb NavXTの設定にうつります。といっても、今回は特に設定変更する箇所はありません。
個人の好みで設定する箇所があるとしたら、画像の赤枠で囲んだ部分でしょうか。

「パンくずの区切り」というのは、「○○○>×××」とリストを作る時の”>”の部分です。
初期設定では「 >」というよく分からない文字が入力されていると思いますが、この文字列が”>”一個に相当しています。つまり”>>”と二つ表記したい場合「 > >」と記入すればOKです。
自分好みに、”>”の数を調整してくださいね。

パンくずリスト

あと設定を確認するとしたら「投稿タイプ」項目の「投稿階層」ですね。パンくずで区切る種類を、カテゴリー、日付、タグ、親投稿の4種類から選択できます。初期設定のカテゴリーで問題ないと思いますが、それ以外の項目で区切りたい場合は、ここで設定をしましょう。

Breadcrumb NavXTの設置

さて、設定が終わったら今度はこのパンくずリストをサイト内に表示しなければなりませんね。
表示する為には下記のコードをCSSを用いて記述しなければなりません。

 

 

このコードを、今回はCSSの”ヘッダー”に貼り付けてみましょう。

パンくずリスト

「外観」→「テーマの編集」→「テーマヘッダー」へ移動。

CSSの一番下に、上記のコードを挿入し、設定を保存します。
以上の方法で、サイト内に「パンくずリスト」が表示されるはずです。

まとめ

「パンくずリスト」は「Breadcrumb NavXT」で簡単に設置することが可能です。パンくずリストはSEO対策としても有効で、見やすいサイト作りに大いに役に立ってくれるはずです。

さてそれでは、今回は「パンくずリスト」の作り方メモでした。ちょっとづつではありますが、サイトの機能が充実してきたような気がします。それではお疲れ様でした!

エッグ

シェアする

コメントを残す

メールアドレスが公開されることはありません。

コメントする