プラグインなしでパンくずリスト

  1. 概要・まとめ
  2. パンくずリストのPHPコード
  3. コード解説
    1. 各条件分岐ごとの処理
  4. 条件分岐ごとの出力結果
  5. コードの追加と表示
  6. 注意事項

概要・まとめ

WordPressでプラグインを使わずにパンくずリストを作成するには,PHPコードで独自の関数を用意する必要がある.
次に紹介するコードをベースに色々なパンくずリストを作成でき,プラグインなしのため,軽量で他のプラグインとの競合が少ない.
ただし,コードの変更はサイトの動作自体に影響を与える可能性があるため、必ずバックアップを取ってから行いたい.

パンくずリストのPHPコード

以下に示すPHPコードで、WordPressの各ページに対応したパンくずリストを表示できる.

function custom_breadcrumb() {
    $home = '<li><a href="' .get_bloginfo('url'). '">HOME</a></li>';
    echo '<ul class="breadcrumb">';

    //トップページの場合
    if(is_home() || is_front_page()) {
        //何も表示しない

    } elseif(is_category()) {
        $cat = get_queried_object();
        $cat_id = $cat->parent;
        $cat_list = array();
        while($cat_id != 0) {
            $cat = get_category($cat_id);
            $cat_link = get_category_link($cat_id);
                array_unshift($cat_list, '<li><a href="' .$cat_link. '">' .$cat->name. '</a></li>');
            $cat_id = $cat->parent;
        }
        echo $home;
        foreach($cat_list as $value) {
            echo $value;
        }
        the_title('<li>','</li>');

    } elseif(is_archive()) {
        echo $home;
        the_archive_title('<li>','</li>');

    } elseif(is_single()) {
         echo $home;

        $categories = get_the_category();
        if($categories) {
            echo '<li><a href="' . get_category_link( $categories[0]->term_id ) . '">' . $categories[0]->name . '</a><i class="fa-solid fa-arrow-right"></i></li>';
        }

    } elseif(is_page()) {
        global $post;
        $parent_id = $post->post_parent;
        $parent_title = get_post($parent_id)->post_title;

        if(is_page() && $post->post_parent) {
            echo $home;
            echo '<li><a href="' .get_permalink($parent_id). '">' .$parent_title.'</a></li>';
            echo the_title('<li>', '</li>');
        }else{
            echo $home;
            echo the_title('<li>', '</li>');
        }

    } elseif(is_search()) {
        echo $home;
        echo '<li>「' .get_search_query(). '」の検索結果</li>';

    } elseif(is_404()) {
        echo $home;
        echo '<li>404</li>';
    }

    echo '</ul>';
}

CSSの適用なしの場合,次のように箇条書きのように表示される.

コード解説

各条件分岐ごとの処理

is_home()、is_category()などの関数で,現在のページの種類を判断し,それぞれに応じてパンくずリストを表示するようにする.
条件分岐ごとの処理は次の通り.

  • is_category(): カテゴリーアーカイブの場合、親カテゴリを辿りながらリンクを作成する.
  • is_archive(): アーカイブページの場合、アーカイブタイトルを表示する
  • is_single(): シングルページの場合、カテゴリーと投稿タイトルを表示する
  • is_page(): 固定ページの場合、親ページと現在のページタイトルを表示する
  • is_search(): 検索結果ページの場合、検索キーワードを表示する
  • is_404(): 404ページの場合、「404」と表示する

条件分岐ごとの出力結果

  • トップページ: パンくずリストは表示されない
  • カテゴリーアーカイブ:
<ul class="breadcrumb">
    <li><a href="[サイトURL]">HOME</a></li>
    <li><a href="[サイトURL]/category/parent-category/">親カテゴリー</a></li>
    <li>子カテゴリー</li>
</ul>
  • アーカイブページ:
<ul class="breadcrumb">
    <li><a href="[サイトURL]">HOME</a></li>
    <li>2023年11月</li>
</ul>
  • シングルページ:
<ul class="breadcrumb">
    <li><a href="[サイトURL]">HOME</a></li>
    <li><a href="[サイトURL]/category/category-name/">カテゴリー名</a></li>
    <li>投稿タイトル</li>
</ul>
  • 固定ページ:
<ul class="breadcrumb">
    <li><a href="[サイトURL]">HOME</a></li>
    <li><a href="[サイトURL]/parent-page/">親ページ</a></li>
    <li>子ページ</li>
</ul>
  • 検索結果ページ:
<ul class="breadcrumb">
    <li><a href="[サイトURL]">HOME</a></li>
    <li>「検索キーワード」の検索結果</li>
</ul>
  • 404ページ:
<ul class="breadcrumb">
    <li><a href="[サイトURL]">HOME</a></li>
    <li>404</li>
</ul>

コードの追加と表示

この関数をfunctions.phpファイルに追加し、表示したいテンプレートファイル(例えばsingle.phpなど)に以下のように記述する.

<?php custom_breadcrumb(); ?>

注意事項

上記のコードは一例であり、実際のサイトに適用する際には、テーマの構造やカスタマイズの目的に合わせて適宜修正する必要がある.
コードの変更は、サイトの動作自体に影響を与える可能性があるため、必ずバックアップを取ってから行ってください.