【WordPressのサイト】Breadcrumb NavXTでパンくずリストを設定する方法




WordPressのサイトにパンくずリストを設定したい!

どうも、Linです。ミスター、クイックリー。

 

WordPressのサイトを作ると、どうしても、

パンくずリストというものを作りたくなると思います。

詳しくはこちらの神サイトを確認していただきたいのですが、パンくずリストを導入すると、

  1. ユーザーが迷いにくくなる
  2. SEO効果がある(構造化スニペットに対応した場合)

などのメリットがあるみたいです。

 

今日は、ようやくワードプレスにパンくずリストを導入する方法をマスターしたので、忘れないうちにメモしておきます。

執筆にあたり、こちらのサイトを参考にさせていただきました。

 

 

WordPressのサイトにパンくずリストを設定する方法

今回は、初心者でも簡単にパンくずリストを導入できる、

Breadcrumb NavXT

というプラグインを使っていきます。

 

Step1. プラグインインストール

まずは「Breadcrumb NavXT」というプラグインをインストールしましょう。

プラグイン>新規追加と進んで、「Breadcrumb NavXT」と検索し、

 

wordpress パンくずリスト 設定

 

一番上のプラグインをダウンロード。

 

wordpress パンくずリスト 設定

 

ついでに有効化にしちゃってください。

 

Step2. 設定

構造化スニペットに対応するようにBreadcrumb NavXTの設定をしていきます。

設定からBreadcrumb NavXTを選択。

 

wordpress パンくずリスト 設定

 

こちらのサイトを参照にしながら、

  • ホームページテンプレート
  • ホームページテンプレート(リンクなし)
  • 投稿テンプレート
  • 投稿テンプレート(リンクなし)
  • ページテンプレート
  • ページテンプレート(リンクなし)
  • カテゴリーテンプレート
  • カテゴリーテンプレート(リンクなし)

を編集していきます。

 

wordpress パンくずリスト 設定

 

 

Step3. パンくずリスト表示コード挿入

あとは、パンくずリストのコードを挿入するだけです。

たいていのサイトでは、記事タイトルの上にパンくずリストを設置していますね。

ってことで、ぼくもそのような流儀でパンくずリストを設定してみました。

 

header.phpを編集し、サイトのコンテンツの直前に、

<ol class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</ol>

というコードを挿入。

これで無事にパンくずリストが表示されているはずです。

 

 

WordPressのサイトにパンくずリストを設定後にやるべき2つのこと

以上で、パンくずリスト設定は完了しましたが、あとは細々とやっておくべきことが2つほどあります。

 

その1. CSS編集

パンくずリストがありのままだと味気ないので、CSSを編集してカッコよくしましょう。

ぼくは、背景を黒にして、文字を白くして、クールな感じを醸し出してみました。

 

wordpress パンくずリスト 設定

 

コードはこんな感じですね。

 

.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の検索エンジンが正常に、サイトの構造を読み取れるかチェック。

こちらのサイトから、

コードスニペット

を選択。

 

wordpress パンくずリスト 設定

 

パンくずリスト部分のHTMLコードを貼り付けて「テスト実行」してみます。

すると、こんな感じで、パンくずリストが構造化されているかチェックできるのです。

 

wordpress パンくずリスト 設定

 

検索エンジンにサイト構造が認識されると、SEOに有利になります。

設定後には必ずチェックするようにしましょう。

 

もし、

「もっとワードプレスの使い方を深く学んで見たい!」

という方にはTECHACADEMYの「オンラインブートキャンプ WordPressコース」がおすすめ。

WordPressに詳しいメンターの方にわからないことをオンラインで質問しながら勉強できますからね。

よかったら使ってみてください。

 

それでは!

Lin




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

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