【PHP】WordPressのパンくずリストを自作する方法｜プラグインなしで実装するコード例

/**
 * 自作パンくずリスト生成関数
 */
function my_breadcrumb() {
    // ホームのテキスト
    $home = 'ホーム';

    // 最上位の階層（ホーム）へのリンク
    echo '<ol class="breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">';
    echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
    echo '<a href="' . esc_url(home_url()) . '" itemprop="item"><span itemprop="name">' . $home . '</span></a>';
    echo '<meta itemprop="position" content="1" />';
    echo '</li>';

    if (is_category()) {
        // カテゴリページの場合
        $cat = get_queried_object();
        if ($cat->parent != 0) {
            $ancestors = array_reverse(get_ancestors($cat->cat_ID, 'category'));
            $pos = 2;
            foreach ($ancestors as $ancestor) {
                echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
                echo '<a href="' . get_category_link($ancestor) . '" itemprop="item"><span itemprop="name">' . get_cat_name($ancestor) . '</span></a>';
                echo '<meta itemprop="position" content="' . $pos . '" />';
                echo '</li>';
                $pos++;
            }
        }
        echo '<li>' . $cat->name . '</li>';

    } elseif (is_single()) {
        // 投稿ページの場合
        $cat = get_the_category();
        if (isset($cat[0])) {
            $cat = $cat[0];
            $ancestors = array_reverse(get_ancestors($cat->cat_ID, 'category'));
            $pos = 2;
            foreach ($ancestors as $ancestor) {
                echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
                echo '<a href="' . get_category_link($ancestor) . '" itemprop="item"><span itemprop="name">' . get_cat_name($ancestor) . '</span></a>';
                echo '<meta itemprop="position" content="' . $pos . '" />';
                echo '</li>';
                $pos++;
            }
            echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
            echo '<a href="' . get_category_link($cat->term_id) . '" itemprop="item"><span itemprop="name">' . $cat->cat_name . '</span></a>';
            echo '<meta itemprop="position" content="' . $pos . '" />';
            echo '</li>';
        }
        echo '<li>' . get_the_title() . '</li>';

    } elseif (is_page()) {
        // 固定ページの場合
        global $post;
        if ($post->post_parent != 0) {
            $ancestors = array_reverse(get_post_ancestors($post->ID));
            $pos = 2;
            foreach ($ancestors as $ancestor) {
                echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
                echo '<a href="' . get_permalink($ancestor) . '" itemprop="item"><span itemprop="name">' . get_the_title($ancestor) . '</span></a>';
                echo '<meta itemprop="position" content="' . $pos . '" />';
                echo '</li>';
                $pos++;
            }
        }
        echo '<li>' . get_the_title() . '</li>';

    } elseif (is_tag()) {
        // タグページの場合
        echo '<li>タグ: ' . single_tag_title('', false) . '</li>';

    } elseif (is_search()) {
        // 検索結果ページの場合
        echo '<li>検索結果: ' . get_search_query() . '</li>';

    } elseif (is_404()) {
        // 404ページの場合
        echo '<li>ページが見つかりません</li>';
    }

    echo '</ol>';
}

<div class="breadcrumb-container">
    <?php
    if (function_exists('my_breadcrumb')) {
        my_breadcrumb();
    }
    ?>
</div>

<!-- カテゴリ「ニュース」に属する記事の場合の出力例 -->
<ol class="breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="https://example.com/" itemprop="item"><span itemprop="name">ホーム</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="https://example.com/category/news/" itemprop="item"><span itemprop="name">ニュース</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li>最新記事のタイトル</li>
</ol>

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    font-size: 14px;
}

.breadcrumb-list li {
    display: flex;
    align-items: center;
}

/* 区切り文字の指定 */
.breadcrumb-list li:not(:last-child)::after {
    content: ">";
    margin: 0 10px;
    color: #999;
}

.breadcrumb-list li a {
    color: #0073aa;
    text-decoration: none;
}

.breadcrumb-list li a:hover {
    text-decoration: underline;
}

.breadcrumb-list li:last-child {
    color: #333;
    font-weight: bold;
}