MENU

wordpressでパンくずリストを自作する具体的な方法とコツ

大規模情報サイト運営
wordpress パンくずリスト 自作
2025/11/29
目次

はじめに

本書の目的

この文書は、WordPressサイトでプラグインを使わずに自作でパンくずリスト（Breadcrumb）を実装する手順を分かりやすく解説します。コードの読み書きに慣れている方を主な対象としますが、初めてでも理解できるよう具体例を交えて説明します。

誰に向けた内容か

  • テーマに直接機能を組み込みたい方
  • プラグイン依存を避けて軽量化したい方
  • SEOやユーザビリティを自分で最適化したい方

本書で学べること

  • パンくずリストの基本とメリット
  • 自作での具体的な実装手順（テンプレート・条件分岐・リンク生成など）
  • プラグイン利用との比較ポイント
  • 構造化データ（JSON-LD）に対応する方法
  • 階層的なパンくずリスト作成のコツ
  • ブログ記事作成時の注意点

読み進め方のヒント

各章は順を追って学べるように構成しています。まず第2章で概念を押さえ、第4章で実装の流れを実際に試してください。途中でサンプルコードを用意しているので、コピーして動作確認すると理解が深まります。

パンくずリストとは

定義

パンくずリストは、Webサイト内で現在のページがどの位置にあるかを示すナビゲーション要素です。通常は「ホーム > カテゴリー > 記事タイトル」のように階層を矢印や記号でつなぎ、訪問者が今いる場所を一目で把握できます。

具体例

  • ホーム > レシピ > 洋食 > オムレツの作り方
  • Home > Blog > WordPress > パンくずリストの使い方
    これにより上位ページに戻る操作が簡単になります。

表示の要素

主にリンク（上位ページへの移動）と現在のページ名（リンクにしない）で構成します。区切りには「>」「/」「▷」などが使われます。視認性を高めるために余白や色を工夫します。

アクセシビリティの配慮

スクリーンリーダー向けにnav要素やaria-labelを付け、現在地はaria-current=”page”で示すと親切です。キーボードでも操作しやすい設計を心がけてください。

実装のヒント（入門）

静的サイトなら手動で記載し、動的サイトならテンプレートで自動生成します。まずは簡潔で分かりやすい階層を考えることから始めるとよいでしょう。

パンくずリストのメリット

概要

パンくずリストは、ページの上部などに表示する「現在地表示」です。例：ホーム > カテゴリ > 記事。訪問者が今どこにいるか一目で分かり、サイト内の移動を助けます。

ユーザー体験の向上

  • 現在地が分かりやすくなり、迷いにくくなります。特に階層の深いサイトで効果的です。
  • 戻る操作や関連ページへの移動が楽になり、滞在時間や回遊率が上がります。

検索エンジン（SEO）への利点

  • クローラーがサイト構造を理解しやすくなり、インデックスの精度が向上します。
  • スキーマ（構造化データ）を付けると、検索結果で見え方が良くなる場合があります。

サイト運営上のメリット

  • 内部リンクを増やし、重要なページへ誘導できます。
  • ユーザー行動が追いやすくなり、どこで離脱が起きているかが分かります。

実例と注意点

  • ショッピングサイトやカテゴリ分けされたブログで特に有効です。
  • 表示が長くなりすぎると逆に煩わしくなるため、階層は簡潔に保ちます。

パンくずリストは小さな要素ですが、使い方次第でユーザー満足度と検索での見え方を同時に改善できます。

自作で実装する方法

概要

プラグインを使わず自作する基本手順は3つです。1) テーマのfunctions.phpにパンくず生成関数を作る、2) 表示したいテンプレートで関数を呼ぶ、3) CSSで見た目を整える。

functions.phpの例

短い例を示します（要カスタマイズ）。

function my_breadcrumb(){
  echo '<nav class="breadcrumb" aria-label="パンくず">';
  if(is_front_page()){ echo '<span>ホーム</span>'; }
  else{ echo '<a href="'.home_url().'">ホーム</a> » ';
    if(is_category()){ echo single_cat_title(); }
    elseif(is_single()){ the_category(', '); echo ' » '; the_title(); }
    elseif(is_page()){ echo the_title(); }
  }
  echo '</nav>';
}

テンプレートで呼び出す

表示したい場所（例：header.php、single.php）の適切な位置で呼び出します。

if(function_exists('my_breadcrumb')) my_breadcrumb();

見た目の調整（例）

.breadcrumb{font-size:14px;margin:10px 0}
.breadcrumb a{color:#0066cc;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span, .breadcrumb a{display:inline}
.breadcrumb a + *:before{content:” / “;margin:0 6px}

カスタム投稿・タクソノミー対応

get_post_type()やget_the_terms()で分岐し、ラベルやリンクを作ります。カスタム構造がある場合は階層を明示的に組み立てる必要があります。

テストと注意点

ナビゲーション要素（nav）とaria-labelでアクセシビリティを確保してください。生成結果は複数ページで確認し、不要なHTMLが出ていないか確かめます。

プラグインで実装する方法との比較

概要

パンくずリストはプラグインでも簡単に導入できます。代表的なものにBreadcrumb NavXT、Flexy Breadcrumb、Breadcrumbなどがあり、自動生成や表示のカスタマイズ機能を備えます。

プラグインのメリット

  • 導入が早い：インストールして有効化、設定するだけで表示できます。
  • 自動生成：投稿や固定ページ、カテゴリに応じて自動で階層を作ります。
  • 設定項目が豊富：表示テキスト、区切り記号、構造化データ対応などをGUIで調整できます。

デメリット（自作との比較）

  • 軽量性：余分な機能が増えるとサイトが重くなることがあります。
  • カスタマイズ上の制約：細かなHTMLやマークアップを厳密に制御したい場合、設定だけでは足りないことがあります。
  • 互換性と更新：テーマや他プラグインと競合する場合があり、定期的な更新が必要です。

選び方と設定のポイント

  1. 更新頻度と評価を確認する。
  2. 必要な機能（JSON-LD出力やウィジェット対応）があるかを見る。
  3. 軽量性を重視するなら、不要機能を切るか自作を検討する。

具体的な導入手順（例）

  1. プラグインを検索してインストール。
  2. 有効化して設定画面で表示形式を選択。
  3. ウィジェットやテンプレートタグで表示位置を指定。

どちらを選ぶべきか

手軽さと設定の柔軟さを重視するならプラグインが便利です。パフォーマンスや細かなマークアップ制御が優先なら自作を検討してください。

JSON-LD（構造化データ）への対応

なぜJSON-LDが重要か

検索エンジンはページの構造を理解すると表示を改善します。パンくずをJSON-LDで出力すると、検索結果にパンくずが反映されやすくなります。視覚的にも利点があります。

基本的な形式（例）

以下は3階層の簡単な例です。実際はページのURLと名称を絶対パスで入れてください。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "ホーム", "item": "https://example.com/"},
    {"@type": "ListItem", "position": 2, "name": "カテゴリ", "item": "https://example.com/category/"},
    {"@type": "ListItem", "position": 3, "name": "記事名", "item": "https://example.com/category/post"}
  ]
}
</script>

設置場所と注意点

headでもbodyでも構いませんが、ページ読み込み時に最新の情報が出るようにレンダリング後に生成する場合はbody内が確実です。URLは必ず絶対URLにします。重複やズレがあると検索エンジンが無視することがあります。

検証と運用のコツ

Googleのリッチリザルトテストや構造化データテストで確認してください。CMSで自動生成する場合は階層変更に合わせてJSON-LDも更新します。パンくずの表示と構造化データが一致するように心がけると良いです。

階層的なパンくずリストの作成

説明

サブカテゴリーを含む階層的なパンくずは、親から子へ全階層を取得して順に表示します。WordPressでは get_category_parents() や get_ancestors() を使って階層を出せます。ここでは分かりやすく手順とコード例を示します。

基本的な手順

  1. 表示対象のカテゴリ（投稿なら投稿のカテゴリ）を取得する
  2. 親カテゴリから子カテゴリまでの全階層を取得する
  3. ホーム→カテゴリ階層→（投稿タイトル）の順で出力する

コード例（カテゴリ／投稿）

// 投稿ページでの例
if (is_single()) {
  $cats = get_the_category();
  if (!empty($cats)) {
    $cat = $cats[0]; // 一つ目を優先
    echo '<a href="'.esc_url(home_url()).'">ホーム</a> &gt; ';
    echo get_category_parents($cat->term_id, true, ' &gt; ');
    the_title();
  }
}
// カテゴリページの例
if (is_category()) {
  echo '<a href="'.esc_url(home_url()).'">ホーム</a> &gt; ';
  echo single_cat_title('', false);
}

カスタム分類や細かい制御

get_category_parents() が都合悪い場合は get_ancestors() を使って配列で親を取得し、自分でリンクを組み立てます。出力時は esc_html() / esc_url() で必ずエスケープしてください。

注意点

  • 複数カテゴリの投稿は優先ルールを決める
  • トップレベルの扱いを統一する（ホームの有無など）
  • SEO のために構造化データ(JSON-LD)と合わせて出力すると親切です

ブログ記事作成時のポイント

はじめに

読者が初めて読むことを想定して、やさしく説明します。コードの意図や結果を先に示すと理解が早まります。

丁寧なコード説明

・目的を明確に書く（例：パンくずを表示するためのHTMLとCSS）
・各行や関数の役割を短い文で補足
・何が変わるか（入出力の例）を示す

実装例を複数示す

・簡単なHTMLのみの例
・WordPressやCMS向けの設定例
・JavaScriptで動的に生成する例
それぞれに実行結果のスクリーンショットや期待値を添えてください。

トラブルシューティング

よくある問題と対処法を箇条書きで。例：リンクが正しくない→パス確認、構造化データが反映されない→検証ツールでエラー箇所を確認。

SEO対策の重要性

パンくずは内部リンク強化とユーザー行動の改善に寄与します。JSON-LDで構造化データを追加し、アンカーテキストを説明的にすると効果的です。

サイト設計に応じたカスタマイズ例

・ECサイト：カテゴリ→サブカテゴリ→商品
・ブログ：カテゴリ→タグベースの補助パンくず
・多言語：言語切替を考慮した表示

執筆上の注意点

専門用語は最小限にし、図やスクリーンショットを多用してください。読者の想定スキルを明記すると親切です。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
wordpress パンくずリスト 自作
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次