WordPressのサイトにパンくずリストを設定したい！
どうも、Linです。ミスター、クイックリー。
WordPressのサイトを作ると、どうしても、
パンくずリストというものを作りたくなると思います。
詳しくはこちらの神サイトを確認していただきたいのですが、パンくずリストを導入すると、
- ユーザーが迷いにくくなる
- SEO効果がある（構造化スニペットに対応した場合）
などのメリットがあるみたいです。
今日は、ようやくワードプレスにパンくずリストを導入する方法をマスターしたので、忘れないうちにメモしておきます。
執筆にあたり、こちらのサイトを参考にさせていただきました。
WordPressのサイトにパンくずリストを設定する方法
今回は、初心者でも簡単にパンくずリストを導入できる、
Breadcrumb NavXT
というプラグインを使っていきます。
Step1. プラグインインストール
まずは「Breadcrumb NavXT」というプラグインをインストールしましょう。
プラグイン＞新規追加と進んで、「Breadcrumb NavXT」と検索し、
一番上のプラグインをダウンロード。
ついでに有効化にしちゃってください。
Step2. 設定
構造化スニペットに対応するようにBreadcrumb NavXTの設定をしていきます。
設定からBreadcrumb NavXTを選択。
こちらのサイトを参照にしながら、
- ホームページテンプレート
- ホームページテンプレート（リンクなし）
- 投稿テンプレート
- 投稿テンプレート（リンクなし）
- ページテンプレート
- ページテンプレート（リンクなし）
- カテゴリーテンプレート
- カテゴリーテンプレート（リンクなし）
を編集していきます。
Step3. パンくずリスト表示コード挿入
あとは、パンくずリストのコードを挿入するだけです。
たいていのサイトでは、記事タイトルの上にパンくずリストを設置していますね。
ってことで、ぼくもそのような流儀でパンくずリストを設定してみました。
header.phpを編集し、サイトのコンテンツの直前に、
|
1 2 3 4 5 6 |
<ol class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </ol> |
というコードを挿入。
これで無事にパンくずリストが表示されているはずです。
WordPressのサイトにパンくずリストを設定後にやるべき2つのこと
以上で、パンくずリスト設定は完了しましたが、あとは細々とやっておくべきことが2つほどあります。
その1. CSS編集
パンくずリストがありのままだと味気ないので、CSSを編集してカッコよくしましょう。
ぼくは、背景を黒にして、文字を白くして、クールな感じを醸し出してみました。
コードはこんな感じですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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
新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いしている
