【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法

Cocoonパンくずリスト設置方法 Cocoon

本記事ではWordPressテーマCocoonを使っている方向けにパンくずリストの設置方法を丁寧に解説していきます。

▼パンくずリストの例▼
パンくずリストの例

ブログを始めたばかりの方はパンくずリストの名前すら知らなかったという人も多いと思います。

1項目ずつ丁寧に画像を使って説明していきますし、Cocoon設定をちょいっといじるだけで設置完了しますので、簡単確実に設置ができます。

  • 投稿ページへのパンくずリストの設置方法
  • カテゴリーページへのパンくずリストの設置方法
  • 固定ページへのパンくずリストの設置方法

それぞれ確認しますので、見たい項目をチェックしましょう!

投稿ページにパンくずリストを設置する

まずは基本の投稿ページにパンくずリストを設置する方法です。これができれば後のカテゴリーページも固定ページも一瞬で理解できます。

  • Cocoon設定→投稿を選択
  • 一番下の項目「パンくずリスト」を確認
  • 配置したい場所を選択し、変更をまとめて保存を押す

なんとたったの3ステップです。画像で見ていきましょう

Cocoon設定→投稿を選択

▼WordPressの編集画面からCocoon設定投稿タブを選択▼
Cocoon設定→投稿

一番下の項目「パンくずリスト」を確認

▼一番下までスクロールし「パンくずリスト設定」までいく▼
パンくずリスト設定

配置したい場所を選択

パンくずリストの配置は次の5種類があります。

  1. 表示しない
  2. メインカラム手前
  3. メインカラムトップ
  4. メインカラムボトム
  5. フッター手前

表示しないを選択するとパンくずリストは設置されません。その他の位置を選択すると実際どこら辺に設置されるか画像で確認しましょう。

▼メインカラム手前にパンくずリストを設置▼
ページの上の方です
メインカラム手前
▼メインカラムトップにパンくずリストを設置▼
これもページの上部です
メインカラムトップ
▼メインカラムボトムにパンくずリストを設置▼
ページの一番下の方です
メインカラムボトム
▼フッター手前にパンくずリストを設置▼
こちらもページの一番下の方です
フッター手前

僕のおすすめの位置はメインカラム手前メインカラムトップの位置ですね。上の方にあった方が訪問者に親切かなと思います。

パンくずリストに記事タイトルを含めるにチェックすると下の画像のようになります。あなたのお好みに合わせて設定してください。

記事タイトルを含める

パンくずリストを設置したい場所を選択したら、忘れずに変更をまとめて保存ボタンを押しましょう。これで投稿ページにパンくずリストが設置されました。

▼変更をまとめて保存▼
変更をまとめて保存

カテゴリーページにパンくずリストを設置する

続いてカテゴリーページにパンくずリストを設置する方法です。これは、投稿ページにパンくずリストを設置するのと同じやり方で設置できます。

ん?どういうこと

以前は難しい設定をしなければパンくずリストをカテゴリーページに設置できませんでしたが、

Cocoonのバージョンアップによりカテゴリーページも普通にパンくずリストが表示されるようになりました。

ですので、先ほどの項目「投稿ページにパンくずリストを設置する」をやっていただければそのままカテゴリーページにも反映されます。

▼Cocoon設定→投稿で設定すればカテゴリーページにもパンくずリストが表示される▼
カテゴリーにパンくずリスト
  • Cocoon設定→投稿を選択
  • 一番下の項目「パンくずリスト」を確認
  • 配置したい場所を選択し、変更をまとめて保存を押す

投稿ページにパンくずリストを設置するようにこの3ステップをやればOKです。詳しくは前の項目をチェックください。

固定ページにパンくずリストを設置する

本項目では、固定ページにパンくずリストを設置していく方法を確認します。

  • Cocoon設定→固定ページ選択
  • 一番下の項目「パンくずリスト」を確認
  • 配置したい場所を選択し、変更をまとめて保存を押す

なんとこちらもたったの3ステップ!しかも投稿ページに設置するときと違うのはCocoon設定→投稿からCocoon設定→固定ページになっただけ

▼Cocoon設定→固定ページ▼
Cocoon設定→固定ページ
▼パンくずリストの配置を決める▼
パンくずリスト設定(固定ページ)
▼パンくずリスト各配置の表示例▼
表示しないパンくずリストなし
メインカラム手前
メインカラムトップ
メインカラムボトム
フッター手前
▼変更をまとめて保存▼
変更をまとめて保存

これで固定ページにもパンくずリストの設置が完了です

パンくずリストとは?

パンくずリストの知識もっておくといいかと思います。

パンくずリストは、ウェブサイト内でのウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。

ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。

「パンくずリスト」という名は童話「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通り道にパンくずを置いていったというエピソードに由来する

Wikipediaより

ブログを訪問してくれた人が今どこにいるのかわかりやすくするためのリンクってことですね。

SEO的にも効果があるので、ブログには設置しておくことが望ましいです。

ブログの構造がカテゴリーでしっかり管理できているとパンくずリストも威力を発揮するのでいいですね。

僕も本記事を書きながらカテゴリー構造を見直しました

パンくずリストを設置してよりわかりやすいブログにしよう

本記事では【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法

ということでWordPressテーマCocoonを使っている方に向けてパンくずリストの設置方法を画像付きで説明してきました。

設置できたでしょうか?

人にも機械にもわかりやすいブログであるためにパンくずリストは必要です。きちんと設置しておくことをおすすめいたします。

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント