WordPressでパンくずリストを簡単にカスタマイズする方法

2025 11/29

2025/11/29

はじめに

この文書は、WordPressサイトにおけるパンくずリストのカスタマイズ方法をやさしく解説します。パンくずリストは訪問者の現在位置を示し、回遊性や検索エンジンの理解を助けます。本書ではプラグインの利用、基本設定、CSSによる見た目の調整、テーマ別の対応（特にSWELL）、カスタム投稿タイプへの対応方法を順を追って説明します。

目的

パンくずリストを正しく追加・調整し、ユーザビリティとサイト構造の明確化を図ることを目的とします。初級〜中級のカスタマイズが中心です。

対象読者

WordPressの管理画面操作が分かる方を想定しています。コード編集に不安がある方でも取り組めるよう、手順を丁寧に示します。

本書の構成

第2章〜第6章で具体的な実装とカスタマイズ手順を解説します。まずは第2章で基本的な追加方法を確認してください。

前提条件

WordPressの一般的な操作（テーマ編集、プラグイン導入）が可能であることを想定しています。バックアップを取ってから作業してください。

WordPressサイトにパンくずリストを追加する方法

はじめに

パンくずリストは訪問者の現在地を示し、回遊性とSEOに役立ちます。WordPressでは主に3つの方法で追加できます。ここでは手順と具体例をわかりやすく説明します。

方法1：プラグインを使う（最も簡単）

管理画面のプラグイン＞新規追加で検索してインストール、有効化します。例：Breadcrumb NavXT、Flexy Breadcrumb、Breadcrumb。
設定画面で表示形式や区切り文字を決めます。Breadcrumb NavXTは細かい設定が可能です。Flexyは色やアイコンの設定、ショートコードが使えます。
テーマに組み込むにはウィジェット、ショートコード、またはテンプレートタグを使います。例：Breadcrumb NavXTはテンプレート内でを呼び出します。Flexyは[flexy_breadcrumb]のショートコードです。

方法2：テーマの機能を利用する

テーマによっては最初からパンくずを出力する機能があります。テーマ設定やカスタマイザーを確認し、有効化するだけで表示できます。簡単でテーマとの相性も良いです。

方法3：手動で実装する（柔軟性重視）

単純なサイト構造なら独自関数で作成できます。homeリンク→カテゴリ/固定ページ→投稿タイトルの順にHTMLを組み立てます。SEO用にschema.orgのマークアップを付けると検索結果で有利になります。

最後に

まずはプラグインで試し、見た目や位置の調整が必要ならテーマやCSSでカスタマイズすると良いです。テストはスマホとPC両方で行ってください。

パンくずリストの基本的なカスタマイズ設定

概要

Breadcrumb NavXTでは、区切り文字や現在ページの表示、投稿や固定ページの階層表示など細かい設定が可能です。サイトデザインや閲覧者の導線に合わせて調整できます。

区切り文字の変更

管理画面の「設定」→「Breadcrumb NavXT」から区切り文字（Separator）を変更します。例：
– > や >> で階層感を強調
– – や / でシンプルに
見た目に合わせて短めの記号を選ぶと読みやすくなります。

現在ページのリンク設定

「現在のページ」の表示をリンクにするかテキストにするか切り替えられます。通常は現在ページをリンクにしないほうが自然です。アクセシビリティを考えると、現在位置はプレーンテキストにしてaria-current属性を付ける設定が望ましいです。

投稿階層の表示設定

投稿でカテゴリーや親投稿を表示するか、日付やタグ、フォーマットを含めるか選べます。設定例：
– ブログ記事：ホーム > カテゴリー > 記事タイトル
– 固定ページ：ホーム > 親ページ > 子ページ
必要に応じて不要な要素（タグや日付）をオフにしてシンプルにしてください。

設定のコツ

サイトの目的に合わせ、一貫性を保つことが大切です。スマホでは区切りを短くし、階層は2〜3段階に抑えると見やすくなります。実際に表示を確認しながら微調整してください。

CSSを使用した見栄えのカスタマイズ

はじめに

テーマのデフォルトスタイルが合わない場合は、style.css（子テーマ推奨）やカスタマイザーの「追加CSS」にカスタムCSSを追加して調整します。ここでは実用的な例を中心に説明します。

基本的なセレクタ例

パンくずのHTMLはテーマで異なりますが、よく使うクラス例を示します。

nav.breadcrumb ul, nav.breadcrumb li, nav.breadcrumb a

ブラウザの検証ツールで実際のクラス名を確認してください。

具体的なカスタム例

インライン表示と区切り文字:

.breadcrumb li { display:inline; }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; color:#999; }

色とホバー:

.breadcrumb a { color:#0073aa; text-decoration:none; }
.breadcrumb a:hover { color:#005177; }

背景と枠線の例（目立たせたい時）:

.breadcrumb a { background:#f5f5f5; padding:6px 10px; border-radius:4px; border:1px solid #e0e0e0; }

必要なら!importantを最小限に使って上書きしてください。

アイコンや装飾

Font Awesomeなどを読み込めば、疑似要素でアイコンを追加できます。例:

.breadcrumb li::before { font-family: "Font Awesome 5 Free"; content: "\f0da"; margin-right:6px; }

読み込みが不要な場合はSVGやUnicodeの矢印を使うと軽量です。

レスポンシブとアクセシビリティ

小さい画面ではフォントや間隔を縮めます。例:

@media(max-width:600px){ .breadcrumb { font-size:14px; } }

nav要素にaria-label=”パンくずリスト”を付け、リンクテキストは省略しないでください。画像だけに頼らないことも重要です。

反映確認

キャッシュをクリアして表示を確認します。ブラウザの検証ツールでスタイルが適用されているかをチェックしてください。

テーマ別のカスタマイズ方法：SWELLの場合

はじめに

SWELLではパンくずリストが初めから用意されています。管理画面のカスタマイズで表示位置や「ホーム」の文言などを簡単に変更できます。

管理画面での基本設定

手順は「外観 > カスタマイズ（または SWELL 設定）」の中にある「パンくずリスト」項目です。ここで設定できる主な項目:
– 位置：ページ上部か下部を選べます。
– ホーム表示の文言：”Home” を日本語に変更できます。
– 区切り文字や表示する階層の数：必要に応じて調整してください。

色の変更（追加CSS）

カラー変更は「外観 > カスタマイズ > 追加CSS」に記入して行います。以下は代表的な例です。テーマの実際のクラス名はブラウザの検証ツールで確認してください。

/* セレクタは例です。実際のクラス名に置き換えてください */
.breadcrumb { color:#333; }
.breadcrumb a { color:#1e88e5; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb .current { color:#666; }

区切り（> など）の色を変えたい場合は、.breadcrumb .separator のような要素を指定します。

モバイル表示と細かな調整

狭い画面でパンくずが長くなる場合は、折り返しや非表示の設定を追加CSSで行います。例:

@media (max-width:600px){
  .breadcrumb { display:none; }
}

必要に応じて「最上位のみ表示」など、管理画面のオプションと合わせて調整してください。

テンプレートや子テーマでの移動（上級者向け）

表示位置を細かく制御したい場合は子テーマで該当テンプレートを編集します。SWELLはテーマアップデートで上書きされやすいので、必ず子テーマで作業してください。出力関数やテンプレート名はバージョンによって異なるため、編集前に該当箇所を確認してください。

カスタム投稿タイプ対応のパンくずリスト実装

概要

カスタム投稿タイプ（CPT）やカスタムタクソノミーがある場合、通常のパンくずでは階層を正しく表現できません。ここではPHPで簡単な汎用パンくずを作り、必要な関数名やスラッグを置き換えて対応する方法を示します。

サンプルコード

以下は「product」投稿タイプと「product_cat」タクソノミーを例にした実装例です。自分の投稿タイプ名・タクソノミー名に置き換えてください。

function my_breadcrumbs() {
  echo '<nav class="breadcrumb"><a href="'.home_url().'">ホーム</a>';
  if (is_post_type_archive('product')) {
    echo ' > <span>商品一覧</span>';
  } elseif (is_singular('product')) {
    $terms = get_the_terms(get_the_ID(), 'product_cat');
    if ($terms && !is_wp_error($terms)) {
      $term = current($terms);
      echo ' > <a href="'.get_term_link($term).'">'.esc_html($term->name).'</a>';
    }
    echo ' > <span>'.get_the_title().'</span>';
  } elseif (is_tax('product_cat')) {
    $term = get_queried_object();
    echo ' > <span>'.esc_html($term->name).'</span>';
  }
  echo '</nav>';
}

設置場所と調整

single-product.php や archive-product.php、taxonomy-product_cat.php など、該当テンプレートの表示箇所に上記関数を呼び出して配置します。
get_post_type_archive_link、get_the_terms、is_post_type_archive、is_tax の引数を自分の CPT 名やタクソノミー名に修正してください。