WordPressのサイトにパンくずリストを設定したい！
どうも、Linです。ミスター、クイックリー。
WordPressのサイトを作ると、どうしても、
パンくずリストというものを作りたくなると思います。
詳しくはこちらの神サイトを確認していただきたいのですが、パンくずリストを導入すると、
- ユーザーが迷いにくくなる
- SEO効果がある（構造化スニペットに対応した場合）
などのメリットがあるみたいです。
今日は、ようやくワードプレスにパンくずリストを導入する方法をマスターしたので、忘れないうちにメモしておきます。
執筆にあたり、こちらのサイトを参考にさせていただきました。
WordPressのサイトにパンくずリストを設定する方法
今回は、初心者でも簡単にパンくずリストを導入できる、
Breadcrumb NavXT
というプラグインを使っていきます。
Step1. プラグインインストール
まずは「Breadcrumb NavXT」というプラグインをインストールしましょう。
プラグイン＞新規追加と進んで、「Breadcrumb NavXT」と検索し、
一番上のプラグインをダウンロード。
ついでに有効化にしちゃってください。
Step2. 設定
構造化スニペットに対応するようにBreadcrumb NavXTの設定をしていきます。
設定からBreadcrumb NavXTを選択。
こちらのサイトを参照にしながら、
- ホームページテンプレート
- ホームページテンプレート（リンクなし）
- 投稿テンプレート
- 投稿テンプレート（リンクなし）
- ページテンプレート
- ページテンプレート（リンクなし）
- カテゴリーテンプレート
- カテゴリーテンプレート（リンクなし）
を編集していきます。
Step3. パンくずリスト表示コード挿入
あとは、パンくずリストのコードを挿入するだけです。
たいていのサイトでは、記事タイトルの上にパンくずリストを設置していますね。
ってことで、ぼくもそのような流儀でパンくずリストを設定してみました。
header.phpを編集し、サイトのコンテンツの直前に、
<ol class="breadcrumbs">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</ol>
というコードを挿入。
これで無事にパンくずリストが表示されているはずです。
WordPressのサイトにパンくずリストを設定後にやるべき2つのこと
以上で、パンくずリスト設定は完了しましたが、あとは細々とやっておくべきことが2つほどあります。
その1. CSS編集
パンくずリストがありのままだと味気ないので、CSSを編集してカッコよくしましょう。
ぼくは、背景を黒にして、文字を白くして、クールな感じを醸し出してみました。
コードはこんな感じですね。
.breadcrumbs{
margin-left: 0;
padding-left: 0;
background: #161616;/*背景色*/
color:#fff;
}
.breadcrumbs a{
display: inline-block;
padding: 0 3px 0 7px;
height: 28px;
line-height: 28px;
text-decoration: none;
color:#fff;
font-size: 13px;
}
その2. 構造化できてるかチェック
あとは、Googleの検索エンジンが正常に、サイトの構造を読み取れるかチェック。
こちらのサイトから、
コードスニペット
を選択。
パンくずリスト部分のHTMLコードを貼り付けて「テスト実行」してみます。
すると、こんな感じで、パンくずリストが構造化されているかチェックできるのです。
検索エンジンにサイト構造が認識されると、SEOに有利になります。
設定後には必ずチェックするようにしましょう。
もし、
「もっとワードプレスの使い方を深く学んで見たい！」
という方にはTECHACADEMYの「オンラインブートキャンプ WordPressコース
」がおすすめ。
WordPressに詳しいメンターの方にわからないことをオンラインで質問しながら勉強できますからね。
よかったら使ってみてください。
それでは！
Lin
おそらく、ブロガー。
今年でフリーランス 6年目。
