パンくずリストの追加方法 -WordPressの投稿・固定ページ対応-

  • このエントリーをはてなブックマークに追加
  • 0
WordPress

WordPress にパンくずリストを追加しました。その方法をまとめておきたいと思います。

そもそもパンくずリストとは?

パンくずリストとは、ウェブサイトのページの階層を分かりやすく示すリストのことです。このブログの投稿でも、カテゴリーがパンくずリストとして表示されるようにしました。

パンくずリスト

投稿の場合は、カテゴリーをリスト表示させるのが一般的です。一方固定ページの場合は、親ページと子ページという関係性がある場合にパンくずリストを使って階層表示させることができます。

パンくずリストは SEO 的にも実装した方がよいようです。SEO で大事なことの 1 つは、検索エンジンクローラーができる限りページを巡回してくれることです。その巡回頻度を増やすためにパンくずリストが有効なわけです。

パンくずリストを出力してくれるタグ

投稿カテゴリーのパンくずリスト

カテゴリーをリスト表示させるには以下を追記します。

どこに追加すればいいのかは後ほど・・・。

固定ページのパンくずリスト

企業のコーポレートサイトなどは、固定ページのパンくずリストを追加したいと思うでしょう。その場合は以下を追記します。

どこに追加すればいいのかはこの次で・・・。

パンくずリストの追記場所

Twenty Thirteen の場合を例に説明していきたいと思います。パンくずリストは基本的にページのヘッダーの下辺りに配置されます。なので、【 header.php 】のナビゲーションメニューの下に追記したいと思います。

基本的には上記のタグを記載していくのですが、それぞれ表示場所が異なるので、その使い分けを指定します。具体的には、トップページでは非表示。投稿ページではカテゴリーのパンくずリスト。固定ページでは階層のパンくずリストが表示されるようにします。条件分岐タグを利用します。

Twenty Thirteen の場合は CSS でパンくずリストをきれいに整える

Twenty Thirteen の場合、ただ header.php に追記しただけでは端の方に表示されます。ブラウザの左端です。そこで、コンテンツの幅に合うようにレイアウトを整えたいと思います。

Twenty Thirteen の場合は横幅の指定が必要です。デフォルト通りであれば、最大 1040px にしましょう。これでレスポンシブデザインにも対応できます。

参考にさせて頂いたサイト

ありがとうございました。

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメントをどうぞ

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