a-little-log

WordPressでは「パンくずリスト」を簡単に表示できるプラグインもありますが、柔軟にカスタマイズしたい場合や構造化データ（JSON-LD形式）まで出力したい場合は、自作するのがおすすめです。

今回は出力構造に焦点を当てたため、細かい分岐には対応していません。基本形としてのパンくずリストの作り方を紹介します。

ここでは、PHPの配列を使ってパンくずリストを管理し、構造化データまで生成する方法を紹介します。

パンくずリストを配列で作るメリット

パンくずリストを配列で作ると、次のような利点があります。

• 各階層の情報をまとめて管理できる
• 後から項目の追加・削除がしやすい
• 構造化データ用に簡単にループ処理できる

完成形コード

まずは完成形のコードをご覧ください。

テーマ内に /module/module-breadcrumb.php のようにモジュールとして管理し、get_template_part('module/module-breadcrumb') で呼び出すと便利です。

global $post;

$items = [
    ['title' => 'ホーム', 'url' => home_url('/')],
];


if (is_page() && $post->post_parent) {
    $ancestors = array_reverse(get_post_ancestors($post->ID));
    foreach ($ancestors as $ancestor_id) {
        $items[] = ['title' => get_the_title($ancestor_id), 'url' => get_permalink($ancestor_id)];
    }
}

$items[] = ['title' => get_the_title(), 'url' => get_permalink()];

echo '<nav class="breadcrumb">';
$last_index = count($items) - 1;
foreach ($items as $i => $item) {
    echo '<a href="' . esc_url($item['url']) . '">' . esc_html($item['title']) . '</a>';
    if ($i !== $last_index) {
        echo ' &gt; ';
    }
}
echo '</nav>';

$data = [
    "@context" => "https://schema.org",
    "@type" => "BreadcrumbList",
    "itemListElement" => [],
];
foreach ($items as $i => $item) {
    $data['itemListElement'][] = [
        "@type" => "ListItem",
        "position" => $i + 1,
        "name" => $item['title'],
        "item" => $item['url'],
    ];
}
echo '<script type="application/ld+json">' . wp_json_encode($data, JSON_UNESCAPED_UNICODE) . '</script>';

配列でパンくず階層を作成

トップページを配列に追加して、パンくずの基礎を作ります。

'title' に表示名、'url' にリンクURLを格納し、この配列をもとにHTMLとJSON-LDを生成します。

$items = [
    ['title' => 'ホーム', 'url' => home_url('/')],
];

固定ページの場合は親ページを追加

親ページのIDを配列で取得して上位階層から順に並べます。ループで $items 配列に追加します。

if (is_page() && $post->post_parent) {
    $ancestors = array_reverse(get_post_ancestors($post->ID));
    foreach ($ancestors as $ancestor_id) {
        $items[] = ['title' => get_the_title($ancestor_id), 'url' => get_permalink($ancestor_id)];
    }
}

現在のページを追加

配列の最後に現在のページを追加します。

$items[] = ['title' => get_the_title(), 'url' => get_permalink()];

HTMLの出力

配列をループして <a> タグを生成を生成し、ページナビとして表示する用のHTMLを出力します。

echo '<nav class="breadcrumb">';
$last_index = count($items) - 1;
foreach ($items as $i => $item) {
    echo '<a href="' . esc_url($item['url']) . '">' . esc_html($item['title']) . '</a>';
    if ($i !== $last_index) {
        echo ' &gt; ';
    }
}
echo '</nav>';

JSON-LD構造化データの出力

"BreadcrumbList" と "ListItem" を使い、Googleにパンくず情報を正しく認識させます。

wp_json_encode() は配列やオブジェクトを JSON 形式に変換するWordPress標準関数です。デフォルトでは日本語が Unicode エスケープされますが、JSON_UNESCAPED_UNICODE を指定するとそのまま出力されます。

$data = [
    "@context" => "https://schema.org",
    "@type" => "BreadcrumbList",
    "itemListElement" => [],
];
foreach ($items as $i => $item) {
    $data['itemListElement'][] = [
        "@type" => "ListItem",
        "position" => $i + 1,
        "name" => $item['title'],
        "item" => $item['url'],
    ];
}
echo '<script type="application/ld+json">' . wp_json_encode($data, JSON_UNESCAPED_UNICODE) . '</script>';

まとめ

今回紹介したパンくずリストのモジュールは、配列で階層情報を管理し、読み込むだけでHTMLとJSON-LDの両方を出力できるシンプルな仕組みです。

• テーマ内で管理がしやすく、子テーマでのカスタマイズも容易
• 配列で階層をまとめてモジュール化することで保守性と拡張性が高い
• SEOにも効果的なパンくずリストを簡単に実装できる

今回は出力構造に焦点を当てたため、細かい分岐には対応していませんが、ぜひ自分のサイトに合わせてカスタマイズしてみてください。