浅賀理生(あさかまさお)はじめに
昨今、パンくずリストが備わっているテーマもありますが、予め備わっていないテーマや独自テーマなどでは、新たにパンくずリストを設置する必要があります。
「WordPressのサイトにパンくずリストってどうやったら設置できる？」
「パンくずリストを設置すると得れるメリットって何？」
「パンくずリストがSEOに効果的ってホント？」
「そもそもパンくずリストって何？」
今回はそんな疑問にお答えするべく、プログラミングができないWordPress初心者の方にも分かりやすいように、図やイラストを用いてWordPressのサイトにパンくずリストを設置する方法をご紹介します。
本記事で紹介する手順を参考にしていただければ5分程度の作業でパンくずリストを実装できるようになりますので、ぜひこの記事をマニュアルだと思って見ながら、WordPressの管理画面を操作してみてください！
そもそもパンくずリストとは？
結論から言うと
- サイトのナビゲーション
です。
「そもそもパンくずリストって何なの？」と言う疑問に対し、下記で解説していきますね。
下記のように記事の階層を示しているものをパンくずリストと言います。
ほとんどのWebサイトやブログにこのパンくずリストは設置されており、見たことがある、実際にクリックしてページを飛んでみた経験がある方も多いと思います。
パンくずリストの基本構造は以下の図の通りです。
このように基本的には「HOME・カテゴリー・記事のタイトル」の3つで構成されています。
パンくずリストを設置するメリット
パンくずリストを設置すると下記のような2つのメリットがあります。
- ユーザーがどのページにいるか把握できる（ユーザビリティの向上）
- Googleのクローラーがサイトを巡回しやすい（SEO上欠かせない）
1. ユーザーがどのページにいるか把握できる（ユーザビリティの向上）について
ユーザーがどのページにいるか把握できるメリットに関しては、
「HOME＞WordPressプラグイン＞ContactForm７の使い方」
このようなパンくずリストがあったとしたら、ユーザはこの記事はWordPressのプラグインについて書かれているなと判断することがきます。
また、他の「WordPressプラグイン」の記事も見てみたいとなれば、パンくずリストをクリックすれば記事一覧に飛ぶことができるので、ユーザビリティの高いサイトを提供することができます。
2. Googleのクローラーがサイトを巡回しやすい（SEO上欠かせない）
ふたつ目の「Googleのクローラーがサイトを巡回しやすい」メリットに関しては、Googleの検索順位というのは、ロボットがあなたのサイトを訪れて評価することによって決まります。
その際にロボットが見るポイントとしては
- サイトのユーザビリティの高さ（2クリック以内で全ての記事にたどり着ける）
- 正しいカテゴリー分けがされているか
- 記事の重要度
このようなポイントがあり（他にもGoogleのアルゴリズムはありますが）、パンくずリストを設置することでGoogleのロボットがサイトを巡回しやすい環境を作るため、結果的にサイトの評価をしてもらいやすくなります。
つまり、SEOで検索上位を狙うサイトやブログの場合はパンくずリストは必須だと言えます。
Breadcrumb NavXTの使い方
それでは具体的にWordPressのサイトにパンくずリストを設置する方法を解説していきます。
本記事ではプログラミングの知識がないWordPress初心者の方を対象としたパンくずリストの設置について、私が一番おすすめする方法「Breadcrumb NavXT」と言うプラグインを用いたやり方を解説していきます。
冒頭でもお伝えしたように、画像を用いて解説していきますので、その通りに進めていただければ幸いです。
Breadcrumb NavXTプラグインを使ってパンくずリストを設置する手順
- Breadcrumb NavXTプラグインをインストール
- Breadcrumb NavXTを設定する
- パンくずリストを表示させたい場所にコードを貼り付ける
- パンくずリストが記事に表示される
わずか4ステップ！時間にして5分もかからずできるので、実際に手を動かして実装してみましょう！
1. Breadcrumb NavXTプラグインをインストール
まずは、プラグインの追加画面に移動して検索窓に「Breadcrumb NavXT」と入力します。
すると、このようなインストール画面が表示されるので、赤枠で囲っているプラグインをインストールします。
インストールしたら「有効化」するのも忘れずにしましょう！
次に、「設定→Breadcrumb NavXT」このように、プラグインが設定できるようになっているので、このようになっていればプラグインのインストールは完了です。
次に、ここの設定画面からBreadcrumb NavXTの設定をしてパンくずリストを作っていきます。
2. Breadcrumb NavXTを設定する
Breadcrumb NavXTの設定をして、自分好みにパンくずリストをカスタマイズしていきます。
設定画面を開くと、見たことがないコードが沢山あると思いますが安心してください。（履いてますよ！）←ちょっと古かったですねスミマセン・・）
全て設定する必要はなく、今回は必要な項目のみを解説します。
基本的に設定するのは「一般」と「投稿」のみでOKです。
基本的には全てデフォルトのままで問題はないですが、少しカスタマイズしたい方の為に解説していきます。
まず、パンくずの区切りに関しては、デフォルトでは「>」となっていますが、これは特殊文字でサイト上では「＞」と表示されるようになります。
現在の項目にリンクと、分割ページパンくずにはチェックは不要です。
次に、ホームページパンくずにはチェックを付けるようにしましょう。
また、下にテンプレートが用意されていますが、「%htitle%」のままではサイトの名前が表示されてしまうので、「HOME」や「ホーム」のように変更するといいでしょう。
これより以下はマルチサイトの場合のみの設定なので、割愛します。
次に投稿の設定に移ります。「投稿タイプ」のタブをクリックすると上記のような画面が表示されます。
まずは投稿テンプレートはデフォルトのままでOKで、「%htitle%」になっていることを確認しましょう。こうすることで、記事のタイトルがパンくずリストに表示されるようになります。
投稿階層表示の項目にチェックをいれましょう。
投稿階層に関しては「カテゴリー」「日付」「タグ」の3つから選択できます。
- カテゴリーの場合：【HOME＞カテゴリー名＞投稿名】
- 日付の場合：【HOME＞2019年＞11月＞投稿名】
- タグの場合：【HOME＞タグ１＞タグ２＞投稿名】
このように分類されておりますが、特別理由がなければカテゴリーを選択するようにしましょう。
これで、Breadcrumb NavXTの設定は終わりです！ひとまずおめでとうございます！
3. パンくずリストを表示させたい場所にコードを貼り付ける
Breadcrumb NavXTの設定が完了したら、次にパンくずリストを表示させるためのコードを記述します。
今回はプログラミングの知識がない方でもできるように、コピペOKのコードを準備しましたので、そのまま使っていただいて結構です。
以下のコードをheader.phpの最後にコピペしてください。
<?php if( !(is_home() || is_front_page() )): ?>
<div class="breadcrumb-area">
<?php
if ( function_exists( 'bcn_display' ) ) {
bcn_display();
}
?>
</div>
<?php endif; ?>このコードの意味を簡単に解説すると、トップページ以外のページである時は、Breadcrumb NavXTで設定したパンくずリストを表示するという意味のコードです。
このコードは親テーマのheader.phpに記述するのではなく、子テーマのheader.phpに記述するようにしてください。
外観→テーマエディタに移動し、テーマ名＋childと書かれているファイルを選択します。
これが子テーマファイルになるので、header.phpを開いて、ファイルの最後に上記のコードを貼り付けてください。
貼り付けた後は、「ファイル更新」ボタンを押すことをお忘れなく！
4. パンくずリストが記事に表示される
記事を開くと、記事の上の方にこのようにパンくずリストが表示されていると思います。
「ホーム＞カテゴリー＞投稿名」で正しく表示されているか確認しましょう。
WordPresサイトにパンくずリストを設置する方法は以上で終わりです！
おめでとうございます！
まとめ
いかがでしたでしょうかか！
5分程度の時間で簡単にパンくずリストを設置できたのでは？と思います。
冒頭でもお伝えしたように、パンくずリストはユーザービリティの向上や、SEOの最適化において重要なものですので、設置するようにしましょう。最後までご覧いただきありがとうございました！