サイトの階層を「ホーム > カテゴリー > 記事タイトル」のように示してくれるパンくずリスト。読者の迷子を防ぐだけでなく、検索エンジンにサイト構造を正しく伝えるSEO的にも重要なパーツです。
でも、いざ細かく手を入れようとすると「区切り文字を『>』から矢印アイコンに変えたい」「『カテゴリー：』という接頭辞を消したい」「ホームを『トップ』と表示したい」——こうした要望が出てきますよね。
Apuraのパンくずリストは、テンプレートファイルを一切編集せずに、フィルターフックだけでこれらをすべて実現できます。
しかも、Googleが評価する構造化データ（BreadcrumbList）は内部で自動的に維持されるため、見た目をどれだけ変えてもSEO面での安全性は保たれます。この記事では、パンくずリストの表示の仕組みを解説し、functions.php にコピペで使える実例を通してカスタマイズ方法を紹介します。
まずはパンくずリストを表示する
カスタマイズの前に、パンくずリストが表示されていることを確認しましょう。Apuraのパンくずリストはカスタマイザーから設定します。管理画面の「外観 > カスタマイズ」を開き、パンくずリストの項目で表示のオン・オフや表示位置を選べます。
| 設定項目 | 内容 |
|---|---|
| 表示位置 | ヘッダーの下（after_header）／フッターの上（before_footer）から選択 |
| ページ種別ごとの表示 | トップ・アーカイブ・検索・固定ページ・投稿・404で個別にオン/オフ |
ちなみに「この記事だけパンくずを消したい」というときは、コードを書く必要はありません。
投稿・固定ページの編集画面にある設定から、そのページ個別に非表示にできます（内部的には _apura_meta_disable_breadcrumbs というメタ情報で管理されています）。
パンくずリストが出力される仕組み
カスタマイズのポイントを押さえるために、まず出力の流れをざっくり見ておきましょう。Apuraのパンくずは、次の順序でHTMLを組み立てます。
- 設定（args）を読み込む：ホームの表記、区切り文字、各種ラベルなどの初期値を用意する
- ページ種別ごとにクラムを生成する：現在のページ（カテゴリー・タグ・投稿・404など）に応じたクラムHTMLを、種別専用のフィルターを通して組み立てる
- クラム（各項目）の配列をまとめる：ホーム〜現在ページまでの項目を配列にし、追加・削除の余地を残す
- 区切り文字でつないで出力：項目を外枠タグ（初期値
<ol>）と各項目タグ（初期値<li>）で囲んで表示する
この各ステップに、以下のフィルターフックで割り込めます。v1.3.7時点でApuraが提供する主なフックを、用途別に整理しました。
全体設定・構造を変えるフック
| フック名 | できること |
|---|---|
| apura_breadcrumb_args | 区切り文字・ホーム表記・ラベル・日付フォーマットの変更 |
| apura_build_crumbs | 項目の追加・削除・並び替え（配列を直接操作） |
| apura_breadcrumb_crumbs_wrap_tag | 外枠タグの変更（初期値 ol） |
| apura_breadcrumb_item_wrap_tag | 各項目のタグの変更（初期値 li） |
| apura_breadcrumb_item_template | リンクなし（現在ページ）項目のHTMLテンプレート文字列を変更 |
| apura_breadcrumb_link_template | リンクあり項目のHTMLテンプレート文字列を変更（rel属性の追加など） |
| apura_breadcrumb_allowed_html | パンくず出力に許可するHTMLタグ・属性を追加（wp_kses対象） |
| apura_breadcrumb_item_content_parts | 各項目のテキストの前後にコンテンツを追加（種別・URL等のコンテキスト付き） |
ページ種別ごとのクラムを直接変えるフック
ホーム項目や「現在のページ」項目は、ページの種類ごとに専用のフィルターが用意されています。狙った種別だけをピンポイントで書き換えたいときに使います。
| フック名 | 対象ページ |
|---|---|
| apura_breadcrumb_home | 「ホーム」項目 |
| apura_breadcrumb_blog | 投稿ページに設定した固定ページ（is_home） |
| apura_breadcrumb_search | 検索結果ページ |
| apura_breadcrumb_404 | 404ページ |
| apura_breadcrumb_page | 固定ページ（親子階層を含む） |
| apura_breadcrumb_category / _tag / _tax | カテゴリー／タグ／カスタムタクソノミーのアーカイブ |
| apura_breadcrumb_year / _month / _day | 年・月・日アーカイブ |
| apura_breadcrumb_author | 投稿者アーカイブ |
| apura_breadcrumb_post_type / _cpt | 投稿タイプアーカイブ／カスタム投稿タイプの単一記事 |
| apura_breadcrumb_post / _attachment | 通常投稿の単一記事／添付ファイルページ |
区切り文字とラベルを変える（apura_breadcrumb_args）
いちばん出番が多いのが apura_breadcrumb_args フィルターです。パンくずの設定をまとめた配列（args）が渡ってくるので、変えたいキーだけ上書きして返します。まずは初期値を確認しましょう。
| キー | 初期値 | 意味 |
|---|---|---|
| home | Home | 先頭のホーム項目の表記 |
| sep | > | 項目と項目をつなぐ区切り文字 |
| labels['category'] | Category: | カテゴリーアーカイブの接頭辞 |
| labels['tag'] | Tag: | タグアーカイブの接頭辞 |
| labels['search'] | Search Results for | 検索結果ページの接頭辞 |
| labels['404error'] | 404: Page Not Found | 404ページの表記 |
それでは、日本語サイト向けに定番のカスタマイズをしてみましょう。ホームを「トップ」に、区切り文字を「›」に、そして「Category:」などの英語ラベルを日本語に置き換えます。
/**
* パンくずリストのホーム表記・区切り文字・ラベルを変更する。
*
* @param array $args パンくずリストの設定配列。
* @return array 変更後の設定配列。
*/
function my_apura_breadcrumb_args( $args ) {
// ホーム項目の表記。
$args['home'] = 'トップ';
// 区切り文字（前後の半角スペースはお好みで）。
$args['sep'] = ' › ';
// アーカイブなどの接頭辞ラベル。
$args['labels']['category'] = 'カテゴリー：';
$args['labels']['tag'] = 'タグ：';
$args['labels']['search'] = '検索結果：';
$args['labels']['404error'] = 'ページが見つかりません';
return $args;
}
add_filter( 'apura_breadcrumb_args', 'my_apura_breadcrumb_args' );許可するHTMLタグを追加する（apura_breadcrumb_allowed_html）
v1.3.7で追加された apura_breadcrumb_allowed_html フィルターを使うと、上記のSVGアイコンをパンくずリストの出力だけに限定して許可できます。第1引数には span・a・li・ol など、Apuraが標準で許可しているタグと属性の連想配列（wp_kses() 形式）が渡ってきます。
/**
* パンくずリストの出力にSVGアイコンを許可する。
*
* @param array $allowed_tags wp_kses形式の許可タグ配列。
* @param array $args パンくずリストの設定配列。
* @return array 変更後の許可タグ配列。
*/
function my_apura_breadcrumb_allowed_svg( $allowed_tags, $args ) {
$allowed_tags['svg'] = [
'class' => true,
'width' => true,
'height' => true,
'viewbox' => true,
'aria-hidden' => true,
'focusable' => true,
];
$allowed_tags['path'] = [
'fill' => true,
'd' => true,
];
return $allowed_tags;
}
add_filter( 'apura_breadcrumb_allowed_html', 'my_apura_breadcrumb_allowed_svg', 10, 2 );すべての項目に共通の加工をする（apura_breadcrumb_item_content_parts）
apura_breadcrumb_home や種別ごとのフックは「その種別だけ」を対象にしますが、v1.3.7で追加された apura_breadcrumb_item_content_parts フィルターはすべての項目に共通で発火し、テキストの前後にコンテンツを追加できます。
第2引数の $context には、項目の種別（type）・リンクの有無（is_link）・現在ページかどうか（is_current）・URL・投稿タイプ・タクソノミーなどの情報が渡ってくるため、種別ごとに分岐した加工が1つの関数で書けます。
たとえば、カテゴリーとタグの項目にだけ、種別を示す小さなアイコン（絵文字）を先頭に追加する例です。
/**
* カテゴリー・タグの項目にだけ、種別アイコンを前置きする。
*
* @param array $parts before / content / after を持つ配列。
* @param array $context 項目のコンテキスト（type, is_link, is_current, url など）。
* @param array $args パンくずリストの設定配列。
* @return array 変更後の parts 配列。
*/
function my_apura_breadcrumb_item_icon( $parts, $context, $args ) {
$icon_map = [
'category' => '📁 ',
'tag' => '🏷️ ',
];
$type = $context['type'] ?? '';
if ( isset( $icon_map[ $type ] ) ) {
$parts['before'] = $icon_map[ $type ];
}
return $parts;
}
add_filter( 'apura_breadcrumb_item_content_parts', 'my_apura_breadcrumb_item_icon', 10, 3 );ホーム項目にアイコンを付ける
ここでは、トップページ以外ではホームリンクにアイコンとテキストを並べて表示する例です。トップページ自身ではリンクにならないため、リンクの有無で分岐させておくと安全です。
アイコンフォントを使用する場合
テーマでは既にiタグは許可するようにしてあります。fontawesomeなど利用の場合は、以下のように指定することで、homeテキストの前にアイコンを表示させることができます。
/**
* homeの項目にだけ、アイコンを前置きする。
*
* @param array $parts before / content / after を持つ配列。
* @param array $context 項目のコンテキスト（type, is_link, is_current, url など）。
* @return array 変更後の parts 配列。
*/
add_filter(
'apura_breadcrumb_item_content_parts',
function ( $parts, $context ) {
if ( 'home' === $context['type'] ) {
$parts['before'] = '<i class="fa fa-home" aria-hidden="true"></i> ';
}
return $parts;
},
10,
2
);apura_breadcrumb_homeフィルターを利用してHTML全体を変える場合
「ホーム」という文字の代わりに、家のアイコンを表示したいこともありますよね。
apura_breadcrumb_home フィルターは、ホーム項目のHTMLそのものを差し替えられます。第1引数に組み立て済みのホーム項目HTML、第2引数に設定配列（args）が渡ってきます。
/**
* パンくずリストのホーム項目にアイコンを追加する。
*
* @param string $crumb ホーム項目のHTML。
* @param array $args パンくずリストの設定配列。
* @return string 変更後のホーム項目HTML。
*/
function my_apura_breadcrumb_home_icon( $crumb, $args ) {
// アイコン（インラインSVG）。装飾目的なので aria-hidden を付与。
$icon = '<svg class="breadcrumb__home-icon" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 3l9 8h-3v9h-5v-6h-2v6H6v-9H3z"/></svg>';
// リンク（<a>）が含まれる場合はその開始タグ直後にアイコンを差し込む。
if ( false !== strpos( $crumb, '<a ' ) ) {
return preg_replace( '/(<a\b[^>]*>)/', '$1' . $icon, $crumb, 1 );
}
return $crumb;
}
add_filter( 'apura_breadcrumb_home', 'my_apura_breadcrumb_home_icon', 10, 2 );項目を追加・削除する（apura_build_crumbs）
もう一歩踏み込んだカスタマイズが apura_build_crumbs フィルターです。
組み立て済みのクラム（各項目）の配列が渡ってくるので、要素を足したり引いたりして返します。配列の各要素は、そのまま出力される項目のHTML文字列です。
たとえば、特定のカスタム投稿タイプ「news」のアーカイブと単一記事で、ホームの直後に「お知らせ一覧」への項目を差し込む例です。array_splice() を使えば、任意の位置に項目を挿入できます。
/**
* news 投稿タイプのパンくずに「お知らせ一覧」項目を挿入する。
*
* @param array $crumbs パンくず項目（HTML文字列）の配列。
* @param array $args パンくずリストの設定配列。
* @return array 変更後のパンくず項目の配列。
*/
function my_apura_add_news_crumb( $crumbs, $args ) {
// news の単一記事、または news アーカイブのときだけ処理する。
if ( ! is_singular( 'news' ) && ! is_post_type_archive( 'news' ) ) {
return $crumbs;
}
// アーカイブページ自身では二重表示になるため追加しない。
if ( is_post_type_archive( 'news' ) ) {
return $crumbs;
}
$archive_url = get_post_type_archive_link( 'news' );
if ( ! $archive_url ) {
return $crumbs;
}
// 出力を壊さないよう、必ずエスケープしてリンクを組み立てる。
$item = sprintf(
'<li class="breadcrumb__item"><a class="breadcrumb__link" href="%s">%s</a></li>',
esc_url( $archive_url ),
esc_html__( 'お知らせ一覧', 'my-child-theme' )
);
// 先頭（ホーム）の直後、インデックス1に挿入する。
array_splice( $crumbs, 1, 0, $item );
return $crumbs;
}
add_filter( 'apura_build_crumbs', 'my_apura_add_news_crumb', 10, 2 );逆に、末尾の「現在のページ」項目を消してリンクだけにしたい、といった削除も array_pop() や unset() で自由に行えます。ただし項目を削りすぎると、構造化データの階層が実際のページ構造とずれてしまうので注意してください。
構造化データ（SEO）はそのまま維持される
Apuraのパンくずリストは、schema.orgの BreadcrumbList に対応した構造化データ（マイクロデータ）を各項目に自動で埋め込んでいます。itemscope や itemprop="position" といった属性がこれにあたり、Google検索でパンくず形式の表示（リッチリザルト）が出やすくなります。
ここまで紹介した apura_breadcrumb_args・apura_breadcrumb_home・種別ごとのフック・apura_breadcrumb_item_content_parts・apura_breadcrumb_allowed_html によるカスタマイズは、いずれも表示テキストやアイコンを変えるだけなので、構造化データの整合性は保たれます。
安心して見た目を整えてください。一方で、apura_build_crumbs で項目を手作業で追加する場合は、その項目に position の連番が付かないため、構造化データの観点では不完全になります。
SEOを最優先する項目は、可能な限りテーマ標準の仕組み（カテゴリー階層など）に任せるのが安全です。