【ワードプレスにパンくずリストを設定しよう「作り方」】

ワードプレスにパンくずリストを設定しよう「作り方」。「パンくずリスト」を設定するには、プラグインを用います。今回は、ワードプレスにパンくずリストを設定しよう「作り方」について書いていきます。

 

「パンくずリスト」とは、ブログに於いて、階層を表示するデザインのことを言います。特に階層が深いブログに重宝されています。直接リンクをクリックして、上の階層へ移動することもできるので便利です。

 

結論を先に話ししておきます
例えばですが「ホーム▶ワードプレス▶【ワードプレスにパンくずリストを設定しよう「作り方」】」のような表示を見かけたことがあるのではないでしょうか。それがパンくずリストと呼ばれているものです。

 

「パンくずリスト」は、ブログに訪れてきたユーザーに対し、ブログ内のどこにいるのかを分かりやすく指し示す為のものです。またグーグル」「ヤフー」「ビング」などの検索エンジンからもその構造が分かりやすくなります。

 

つまり「パンくずリスト」は、ブログ内のページ階層をリスト化したナビゲーションの役割を担っている訳です。「パンくずリスト」は、通常であればページの左上部に表示されます。それでは早速見ていきましょう。

 

以前投稿した下記の記事にも目を通して貰えると幸いです。

 

【パンくずリストとは(動画付き)】

パンくずリストとは(動画付き)

 

「パンくずリスト」を簡単に言ってしまえば、現在地を表すもので、具体的には、ページの左上部にある以下のようなものを指します。「パンくずリスト」は、SEOにも大きく影響しているようです。

 

恐らくですが、Webサイトやブログをちゃんとした形で運営されている場合「パンくずリスト」を設置している媒体は多いことでしょう。まずは下記の図解を参考に確認してみて下さい。

 

  • 下記の図解は、当記事を参考にしてみたものです。「緑色枠」で囲まれている箇所が「パンくずリスト」と言われているものです。

 

「パンくずリスト」は「大カテゴリー」から始まって「中カテゴリー」「小カテゴリー」と小さくなっていき、細分化されていくような階層構造となっており、ユーザーが今どこにいるのかが分かりやすくなっています。

 

ブログが大きくなればなるほど階層構造は複雑になり、ユーザーは、自分の現在地を把握しづらくなってきます。そんな時、ユーザーに視覚的且つ直観的に現在地を伝える役割を担っているのが「パンくずリスト」な訳です。

 

ではここで動画を視聴してみて下さい。題して「パンくずリストについて」です。

 

パンくずリストの役割とは

パンくずリストの役割とは

 

冒頭にも記載してますが「パンくずリスト」と言う言葉の意味を違う観点から言うと、ユーザーがブログ内のどこにいるのかを視覚的に分かりやすくした誘導表示であり、ナビゲーションの役割を果たしています。

 

「パンくずリスト」の表示は「ホーム>アフィリエイト>アフィリエイトのやり方」と言った流れが一般的です。階層構造のナビゲーションを表示しておくことで、ユーザーが、直ぐに他のカテゴリーへ移動できようになります。

 

現在、閲覧しているページの階層構造が一目で理解することができ、ユーザーの利便性が向上すると言われています。

 

パンくずリストの由来とは(動画付き)

パンくずリストの由来とは(動画付き)

 

そもそも「パンくずリスト」と言う名前の由来はどこから来ているのでしょうか。調べてみると、グリム童話の「ヘンゼルとグレーテル」に関係があるようです。ヘンゼルは男の子」「グレーテルは女の子です。

 

また、二人は兄妹で、歩いてきた道を見失わないように持っていたパンをちぎって道しるべにしていたようです。このことから、どこを経由し、どの場所にいるのかを知らせる為にパンくずリストと名付けられたそうです。

 

ではここで動画を視聴してみて下さい。題して「ヘンゼルとグレーテル - 子供向け童話 | 漫画 | アニメーション」です。

 

【パンくずリストを設置するメリット】

パンくずリストを設置するメリット

 

ここまで「パンくずリスト」の「役割」と「由来」についてそれぞれ解説してきました。では実際に「パンくずリスト」を設置する場合のメリットには、どのような利点があるのでしょうか。またその内容は。

 

内容はユーザーに対する利便性の向上SEO対策としての効果です。この章では「パンくずリスト」を設置するメリットについて、それぞれ解説していきます。それでは早速見ていきましょう。

 

ユーザーに対する利便性の向上

ユーザーに対する利便性の向上

 

まずは、ユーザーに対する利便性の向上についてです。この場合、常日頃から、ユーザーに対し「パンくずリスト」を使い、ブログ内の現在地を指し示すことは、ブログ自体の便利さ快適さに繋がります。

 

また「パンくずリスト」があれば、下層のページに直接アクセスすることもでき、他のカテゴリーに戻ることもできます。更に言えば「パンくずリスト」を使うと、ユーザーが他のページを閲覧する可能性だってあります。

 

SEO対策としての効果

SEO対策としての効果

 

「パンくずリスト」を設置すると、SEO的にも効果があると言われており、クローラーの巡回を促します。クローラーとは、グーグルなどのロボット型検索エンジンが情報収集の為に利用している自動巡回ロボットです。

 

そのクローラーが、インターネット上から自動的にブログなどの情報を収集し、データベースにインデックス(登録)され、インデックスされたデータは、検索エンジンのインデックスサーバーに定期的に送られます。

 

こうして検索された結果に対し、ブログの情報がインターネット上に反映されるのです。「パンくずリスト」を作成し、クローラーの巡回を促した結果、SEO対策として2つの効果を得ることが可能となる訳です。

 

  • 自身のブログが正当に評価して貰える。この理由として、クローラーは、ブログ上にあるリンクを読み取ります。つまり「パンくずリスト」を作成していると、階層構造を正しくクローラーに伝えることができる訳です。
  • 新規記事がインデックスされやすくなります。「パンくずリスト」を設置することにより、カテゴリーページへのリンクが増える為、新規記事がカテゴリーを通して、クローラーに認識して貰いやすくなります。

 

【プラグインの「Breadcrumb NavXTを使用する】

プラグインの「Breadcrumb NavXT」を使用する

 

この章では、プラグインのBreadcrumb NavXTを用いて解説していきたいと思います。「Breadcrumb NavXT」は、ワードプレスのプラグインであり「パンくずリスト」を作成するものです。

 

ワードプレスには、扱っているテーマによって「パンくずリスト」が自動生成されないものもあります。そんな時便利なプラグインが「Breadcrumb NavXT」な訳です。この機会に作成してみて下さいね。

 

「ワードプレスから❝Breadcrumb NavXT❞のプラグインを予め、インストールし、有効化」しておいて下さい。もしくは「ダウンロード版からインストールしたい場合、コチラからダウンロード」できます。

 

  • 冒頭にも載せてましたが、下記の図解は、当記事を参考にしてみたものです。「緑色枠」で囲まれている箇所が「パンくずリスト」と言われているものです。

 

  • プラグインの有効化が終わった後「赤色枠」で囲まれている「外観」を選択するとプルダウンが開き、その中にある「黄色枠」で囲まれている「テーマファイルエディター」を開いて下さい。

 

  • テーマファイルエディターを開いたら「緑色枠」で囲まれているボックス内のプルダウンから「親テーマ」を選択して下さい。選択後は「紫色枠」で囲まれている「選択」を押しましょう。

 

当ブログ(miブログ)では「DIVER」と言うワードプレステーマを使っているので、親テーマは「diver」を選択しています。

 

  • 親テーマを選択すると「桃色枠」で囲まれているように「テーマヘッダー」があるので開いてみましょう。

 

  • 次に「紫色枠」で囲まれている文字が「●●テーマヘッダー(header.php)」となっていることを確認したら、一番下までスクロールし「オレンジ色枠」で囲まれている箇所に「下記のタグ」を入力して下さい。

 

当ブログ(miブログ)では、コピーできないようになっている為、見ながら間違えないように入力して下さい。終わったら「水色枠」で囲まれている「ファイルを更新」を押しましょう。

 

  • 以上で最低限必要な作業は完了となります。一度ページを表示して「パンくずリスト」がどのように表示されるのか確認してみましょう。「赤色枠」で囲まれている「パンくずリスト」ですが。

 

これは、デフォルトのものなので関係ないですが「黄色枠」で囲まれている箇所に表示されているものがプラグインで設定した「パンくずリスト」です。

 

パンくずリストが表示される位置の調整

パンくずリストが表示される位置の調整

 

親テーマの「●●テーマヘッダー(header.php)」内に「パンくずリスト」を表示させるタグを入力しただけでも良いのですが、それだと左側に寄りすぎている為、見た目のバランスが悪く、調整していきましょう。

 

但し、必要であればですが、CSSに追加の記述をおこなうことで「パンくずリスト」が表示される位置などを調整することができます。やり方はとても簡単なので真似してみて下さい。それでは見ていきましょう。

 

  • 初めに「黄色枠」で囲まれている「外観」を開くとプルダウンが開き、その中の「オレンジ色枠」で囲まれている「カスタマイズ」を開きます。

 

  • カスタマイズを開いたら、一番下の「緑色枠」で囲まれている「追加CSS」を開いてみて下さい。

 

  • 次に「水色枠」で囲まれているように「追加CSS」となっているか確認して下さい。確認することができたら、下記のタグを一番下の「桃色枠」で囲まれている辺りに入力して下さい。

 

当ブログ(miブログ)では、コピーできないようになっている為、見ながら間違えないように入力して下さい。入力が終わったら「紫色枠」で囲まれている「公開」を押しましょう。

 

  • 「黄色枠」で囲まれている「パンくずリスト」の場合、最初に確認した表示より、少し右側へ移動されたのが分かるかと思います。

 

ページに表示された「パンくずリスト」の位置調整はwidth:」の数字を高くするか低くするかで文字が微調整されます。

 

今回は以上となります。ワードプレスにパンくずリストを設定しよう「作り方」については理解して頂けたでしょうか。通常であれば、プラグインを入れなくても「パンくずリスト」は作成されます。

 

以前投稿した下記の記事にも目を通して貰えると幸いです。

 

 

トップページへ戻る

おススメの記事 - Recommended articles -