こんにちは、まちゃりさです。
今回は、Cocoonでパンくずリストを表示するやり方について解説していきます。
「パンくずリスト」は、記事の階層を表示するリンクのことです。
私は、このように投稿記事の上に表示させています。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/0_パンくずリストサンプル.png?resize=1024%2C267&ssl=1)
この記事を見れば、Cocoonでパンくずリストを設定する方法を知ることができます。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/02/cropped-531FC8D9-D009-4B97-8075-62A58746041F.png?resize=150%2C150&ssl=1)
設定は1分ほどで終わります!
それでは、どうぞ!
パンくずリストとは?
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/monogatari_hansel_gretel.png?resize=500%2C369&ssl=1)
ブログサイトの「パンくずリスト」とは、閲覧ユーザー(読者)がWebサイトの中でどの位置(階層)にいるのかを表示するリンクです。
「パンくずリスト」があることで、道に迷うことなく、閲覧中の記事がサイト内のどのカテゴリー階層に位置しているか視覚的にわかります。
実は、「パンくずリスト」の名前の由来は、童話「ヘンゼルとグレーテル」のエピソードに由来します。
主人公は、森の中で迷子になることがないよう、通り道にパンくずを置いていきますよね!
パンくずリストを設定した方がいい理由3つ
パンくずリストを設定するといい理由は次の3つ!
- サイト使用性の向上
- SEO評価の向上
- サイト運営者が管理しやすい
カテゴリリンクを押すだけで、飛びたい場所にすぐに移動できるので、ブログ読者に親切です。
Googleのクローラー(※)が、効率良くサイトをチェックすることができます。
また、「パンくずリスト」はGoogleも推奨しています。
「パンくずリスト」を使用する
パンくずリストとは、ページの上部または下部に表示される内部リンクの行です。訪問者は、パンくずリストを使って、前のセクションやルートページにすばやく戻ることができます。ほとんどのパンくずリストでは、最初の左端のリンクとして最も一般的なページ(通常はルートページ)を置き、右側に向けてより具体的なセクションを並べています。
SEO スターター ガイド: 基本 | Google 検索セントラル | Google Developers
サイトのSEO評価が良くなるので、パンくずリストは設定しておくとよいです。
パンくずリストは、サイト運営者がカテゴリを整理する(見直す)ときにも、役立ちます。
Cocoonのパンくずリスト設定のやり方
Cocoonテーマでは、パンくずリスト機能が標準で搭載されています。
しかし、初期設定ではページの一番下にあり、あまり存在感がありません・・( ;∀;)
上部に移動するのがおすすめです。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/02/cropped-531FC8D9-D009-4B97-8075-62A58746041F.png?resize=150%2C150&ssl=1)
設定は1分あれば変更できます!
Cocoonのパンくずリスト配置のパターンは次の4種類です
- ①メインカラム手前
- ②メインカラムトップ
- ③メインカラムボトム(デフォルト)
- ④フッター手前
見え方は、下の画像をご参考にしてください。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/パンくずリスト配置の4パターン-1.png?resize=750%2C422&ssl=1)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/パンくずリスト配置の4パターン-2.png?resize=750%2C422&ssl=1)
①②と③④、それぞれにそれほど違いはありません。
お好みで設定してよいですが、おすすめは、目立つ場所の①メインカラム手前、または②メインカラムトップです!
ここからは、投稿ページ、固定ページのそれぞれで「パンくずリスト」を設定するやり方をご紹介していきます↓
「投稿ページ」のパンくずリストを設定
まずは、投稿ページでパンくずリストを設定するやり方です。
1.WordPress管理画面(ダッシュボード)で[Cocoon設定]をクリックします。
2.上部タブメニューの[投稿]をクリック。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/1-1_Cocoon設定-1.png?resize=1024%2C504&ssl=1)
3.下の方にスクロールすると「パンくずリスト設定」があります。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/1-2_パンくずリスト設定.png?resize=1024%2C467&ssl=1)
パンくずリスト設定項目は、次の2つです。
- (1)パンくずリストの配置
- (2)記事タイトル
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/1-3_パンくずリスト設定.png?resize=1024%2C439&ssl=1)
(1)配置は、先ほどご紹介した4種類から選びます。(①メインカラム手前か②メインカラムトップがおすすめ)
(2)パンくずリストに「記事タイトルを表示するor表示しない」を選択できます。(初期設定は「表示しない」になっています)
記事タイトルを表示する、しない状態のパンくずリストの見え方は、次のような感じです。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/記事タイトル表示、非表示.png?resize=750%2C422&ssl=1)
[記事タイトルを含める]場合は、「パンくずリストに記事タイトルを含める」にチェックを入れます。
[記事タイトルを含めない]方が、特にスマホでの見た目はスッキリしますが、お好みでOKです。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/記事タイトル表示、非表示_2.png?resize=472%2C385&ssl=1)
最後に、[変更をまとめて保存]をクリックするのを忘れずに。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/1-4_パンくずリスト設定.png?resize=1024%2C439&ssl=1)
「固定ページ」のパンくずリストを設定
続いて、固定ページでパンくずリストを設定するやり方です。
1.WordPress管理画面(ダッシュボード)で[Cocoon設定]をクリックします。
2.上部タブメニューの[固定ページ]をクリック。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/2-1_固定ページ_Cocoon設定.png?resize=1024%2C513&ssl=1)
3.下の方にスクロールするとパンくずリスト設定があります。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/2-2_パンくずリスト設定.png?resize=1024%2C485&ssl=1)
投稿ページと同様、表示したいイメージにあわせて設定します。
最後に、[変更をまとめて保存]をクリックするのをお忘れなく!
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/2-3_変更をまとめて保存.png?resize=708%2C134&ssl=1)
まとめ:パンくずリストでサイトの使用性を向上!
今回は、WordPressのCocoonテーマで、パンくずリストを表示する手順をご紹介しました。
カテゴリー階層がひと目でわかるので、サイトの使用性を向上できます。
ユーザー、管理者ともにメリットしかない機能です。
ブログサイトを開設した後は、すぐに設定するのをおすすめします。
回遊率アップも期待でき、SEO評価も上がるはず!
それでは、今回はこの辺で。
最後までお読みいただき、ありがとうございました!
おわり。
コメント
ありがとうございます。やり方がわかって助かりました!
wtnbkn63さん
コメントありがとうございます!
役にたったようで、嬉しいです。