仕事で使える！WordPressでパンくずリストを実装する方法（自作＋プラグイン）

WordPress

投稿日：2024年04月10日(水) 更新日：2024年05月13日(月)

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressでパンくずリストを実装する方法について解説していきたいと思います。

パンくずリストはメディアサイトやブログサイト、コーポレートサイトなどのサイトにとって重要な要素といっても過言ではありません。

なぜならば、パンくずリストには様々な役割があり、SEO対策にもなりユーザビリティの向上にもなるからです。

当記事では、このパンくずリストについて自作する方法と、プラグインを使ってカスタマイズする方法について解説し、お仕事で使えるよな構成で執筆いたしました。

よろしければご活用いただけましたら幸いです。

1 パンくずリストとは
2 パンくずリストのメリット
3 自作で実装する方法
4 プラグインで実装する方法
5 まとめ

パンくずリストとは

パンくずリストとは、ウェブサイト上でユーザーに現在のページの位置を示すナビゲーションリンクのリストのことをいいます。

このリストは、通常、ユーザーがサイト内でどのページにいるかを把握しやすくするために使用されます。

パンくずリストは、階層構造のある小規模サイトサイトから大規模なウェブサイトまで有効です。

例えば、ユーザーが「ホーム」ページから特定のカテゴリーに移動し、さらにそのカテゴリー内の個々の記事ページに進んだ場合「パンくずリストは「ホームページ → カテゴリーページ → 記事ページ」のように表示されます。

これにより、ユーザーは現在のページの位置を把握しやすくなり、サイト内のナビゲーションが容易になります。

パンくずリストのメリット

それでは次はパンくずリストのメリットについて解説していきたいと思います。

考えられるパンくずリストのメリットは以下になります。

ナビゲーションが改善する
検索エンジンの理解を促進
ユーザビリティの向上
閲覧履歴としての機能を提供
クリック率の向上

それぞれ解説していきます。

ナビゲーションが改善する

パンくずリストは、ウェブサイトのユーザービリティを向上させ、ユーザーがサイト内をより簡単に移動できるようにします。

ユーザーは自分がどのページにいるかを把握しやすくなります。

検索エンジンの理解を促進

パンくずリストは検索エンジンにとっても役立ちます。

検索エンジンは、サイト内のページの階層構造を理解しやすくなり、サイトの検索結果でパンくずリストを表示することがあります。

これにより、ユーザーは検索結果からサイトの構造を理解しやすくなります。

ユーザビリティの向上

パンくずリストは、ユーザーがサイト内をよりスムーズに移動できるようにします。

特に大規模なサイトや複数の階層を持つサイトでは、ユーザーが迷子になることを防ぐのに役立ちます。

閲覧履歴としての機能を提供

パンくずリストは、ユーザーに過去のページへのパスを提供するため、サイト内の閲覧履歴を表示します。

これにより、ユーザーは過去のナビゲーションを追跡しやすくなります。

クリック率の向上

パンくずリストが正しく設定されている場合、ユーザーは目的のページに素早くアクセスできるため、クリック率が向上する可能性があります。

自作で実装する方法

それでは早速、パンくずリストの実装方法について解説していきたいと思います。

自作でパンくずリストを実装する手順としては、当記事では以下の内容で解説いたします。

パンくずリストの関数を定義
定義した関数を表示したい箇所にコピー＆ペースト
CSSで見た目を整える
サイトに適した形でPHPのカスタマイズ

それではそれぞれ解説していきます。

パンくずリストの関数を定義

以下のコードをfunctions.phpにコピー＆ペーストしてください。

function custom_breadcrumbs() {
    // ホームページのリンクを追加
    $breadcrumbs = '<a class="home" href="' . home_url() . '">' . 'HOME' . '</a>';

    // ページがカスタム投稿タイプの場合
    if (is_singular('custom_post_type')) {
        // カスタム投稿タイプのアーカイブページへのリンクを追加
        $breadcrumbs .= ' <span class="arrow"></span> <a href="' . get_post_type_archive_link('custom_post_type') . '">' . 'カスタム投稿タイプアーカイブ' . '</a>';

        // カスタム投稿タイプのタームがあれば表示
        $post_terms = get_the_terms(get_the_ID(), 'custom_taxonomy');
        if ($post_terms) {
            $post_term = array_pop($post_terms);
            $breadcrumbs .= ' <span class="arrow"></span> <a href="' . get_term_link($post_term) . '">' . $post_term->name . '</a>';
        }

        // 投稿のタイトルを追加
        $breadcrumbs .= ' <span class="arrow"></span> ' . get_the_title();
    }

    // カスタム投稿タイプのアーカイブページの場合
    elseif (is_post_type_archive('custom_post_type')) {
        // カスタム投稿タイプの名前を表示
        $post_type = get_post_type_object(get_post_type());
        $breadcrumbs .= ' <span class="arrow"></span> ' . $post_type->labels->singular_name;
    }

    // ページがカスタムタクソノミーのアーカイブページの場合
    elseif (is_tax('custom_taxonomy')) {
        // タームの情報を取得して追加
        $term = get_queried_object();
        $breadcrumbs .= ' <span class="arrow"></span> ' . $term->name;
    }

    // ページが通常の投稿ページの場合
    elseif (is_single()) {
        // カテゴリー情報を取得して追加
        $category = get_the_category();
        if ($category) {
            $breadcrumbs .= ' <span class="arrow"></span> <a href="' . get_category_link($category[0]->term_id) . '">' . $category[0]->cat_name . '</a>';
        }

        // 投稿のタイトルを追加
        $breadcrumbs .= ' <span class="arrow"></span> ' . get_the_title();
    }

    // 固定ページの場合
    elseif (is_page()) {
        // 親ページがあれば追加
        if ($post->post_parent) {
            $parent_id = $post->post_parent;
            $breadcrumbs .= ' <span class="arrow"></span> <a href="' . get_permalink($parent_id) . '">' . get_the_title($parent_id) . '</a>';
        }

        // 固定ページのタイトルを追加
        $breadcrumbs .= ' <span class="arrow"></span> ' . get_the_title();
    }

    // ページがカテゴリーページの場合
    elseif (is_category()) {
        $category = get_the_category();
        if ($category) {
            $breadcrumbs .= ' <span class="arrow"></span> ' . $category[0]->cat_name;
        }
    }

    // ページがアーカイブページの場合
    elseif (is_archive()) {
        // タイトルを表示
        $breadcrumbs .= ' <span class="arrow"></span> ' . get_the_archive_title();
    }

    // ページが検索結果ページの場合
    elseif (is_search()) {
        if(get_search_query()){
          $breadcrumbs .= ' <span class="arrow"></span> ' . get_search_query();
        } else {
          $breadcrumbs .= ' <span class="arrow"></span> ' . 'キーワードなし';
        }
    }

    // 404エラーページの場合
    elseif (is_404()) {
        // 404ページのタイトルを表示
        $breadcrumbs .= ' <span class="arrow"></span> ' . '404 Not Found';
    }

    // パンくずリストを返す
    return '<div class="breadcrumbsWrap"><div class="breadcrumbs">' . $breadcrumbs . '</div></div>';
}

上記コードは、WordPressの自作のパンくずリストを生成するための独自の関数です。

この関数は、ページごとに特定の条件に一致する場合に異なる階層構造でそのページに対応したパンくずリストを自動生成してくれます。

定義した関数を表示したい箇所にコピー＆ペースト

実際に出力する際は、以下のコードをheader.phpなど任意のPHPテンプレートファイルの箇所にコピー＆ペーストしてください。

<?php echo custom_breadcrumbs(); ?>

このcustom_breadcrumbs()関数を使用することで、WordPressのページに動的なパンくずリストを追加できます。

実際にご確認いただきましたら、以下のようにパンくずリストが実装されているのが確認できるかと思います。

これにより、ユーザーがサイト内をページ遷移するのがより簡単になり、検索エンジンもサイトの階層構造を理解しやすくなります。

CSSで見た目を整える

次は、PHPで実装したパンくずリストをCSSで調整していきます。

以下のCSSコードをCSSファイル等にコピー＆ペーストしてください。

.breadcrumbsWrap{
  width: 1000px;
  margin: auto;
  font-size: 11px;
  color: #777;
  margin-top: 10px;
  white-space: nowrap;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.breadcrumbs{
  display: flex;
  align-items: center;
}
.breadcrumbs .home{
    color: #2a627e;
}
.breadcrumbs .arrow{
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 1.5px #aaa;
  border-right: solid 1.5px #aaa;
  margin-right: 10px;
  margin-left: 10px;
  transform: rotate(45deg);
}

ペーストして保存していただき、表示を確認したら多少差があるかもしれませんが下図のように見た目が整っているかと思います。

もし崩れておりましたら、ご自身でご調整いただけましたら幸いです。

サイトに適した形でPHPのカスタマイズ

最後に先ほどのパンくずリストを実装するPHPコードをご自身のサイトに適したPHPのカスタマイズが必要になります。

先ほどのPHPサンプルコードの以下の部分をご確認ください。

<?php
    // ページがカスタム投稿タイプの場合
    if (is_singular('custom_post_type')) {
        // カスタム投稿タイプのアーカイブページへのリンクを追加
        $breadcrumbs .= ' <span class="arrow"></span> <a href="' . get_post_type_archive_link('custom_post_type') . '">' . 'カスタム投稿タイプアーカイブ' . '</a>';

        // カスタム投稿タイプのタームがあれば表示
        $post_terms = get_the_terms(get_the_ID(), 'custom_taxonomy');
        if ($post_terms) {
            $post_term = array_pop($post_terms);
            $breadcrumbs .= ' <span class="arrow"></span> <a href="' . get_term_link($post_term) . '">' . $post_term->name . '</a>';
        }

        // 投稿のタイトルを追加
        $breadcrumbs .= ' <span class="arrow"></span> ' . get_the_title();
    }

    // カスタム投稿タイプのアーカイブページの場合
    elseif (is_post_type_archive('custom_post_type')) {
        // カスタム投稿タイプの名前を表示
        $post_type = get_post_type_object(get_post_type());
        $breadcrumbs .= ' <span class="arrow"></span> ' . $post_type->labels->singular_name;
    }

    // ページがカスタムタクソノミーのアーカイブページの場合
    elseif (is_tax('custom_taxonomy')) {
        // タームの情報を取得して追加
        $term = get_queried_object();
        $breadcrumbs .= ' <span class="arrow"></span> ' . $term->name;
    }

上記コードはがカスタム投稿タイプ「custom_post_type」の記事詳細ページの場合、カスタム投稿タイプ「custom_post_type」のアーカイブページの場合、カスタムタクソノミー「custom_taxonomy」の場合と3つのコードがあります。

いずれのコードはサンプル状態なので、ご自身で作成されたカスタム投稿タイプやカスタムタクソノミー用に修正していただければと思います。

変更すべき箇所は以下になります。

get_post_type_archive_link(‘【カスタム投稿タイプ名】’)
$post_terms = get_the_terms(get_the_ID(), ‘【カスタムタクソノミー名】’)
is_post_type_archive(‘【カスタム投稿タイプ名】’)
is_tax(‘【カスタムタクソノミー名】’)

上記コードの部分の【カスタム投稿タイプ名】と【カスタムタクソノミー名】を修正していただければと思います。

また、他にもご自身のサイトのページに必要な足りない実装があるかもしれないので、そこに関してはサンプルコードを参考にして実装してみてください。

これでパンくずリストを自作する方法の解説は以上になります。

お疲れ様でした！

プラグインで実装する方法

次は、プラグインでパンくずリストを実装する方法について解説したいと思います。

当記事でおすすめするプラグインは「Breadcrumb NavXT」です。

Breadcrumb NavXTとは、パンくずリストを自動で生成してくれるプラグインのことをいいます。

インストール後に少しのコードを記述するだけでパンくずリストを実装することができます。

それでは、このBreadcrumb NavXTを利用してパンくずリストを実装していきましょう。

プラグインをインストール

それではまずは管理画面からプラグインをインストールしましょう。

管理画面左メニューの「プラグイン」→「新規プラグイン追加」でプラグインの新規追加ページを表示します。

次は画面右上にある検索ボックスに「Breadcrumb NavXT」と入力してください。

入力していただくと、検索結果にBreadcrumb NavXTが表示されます。

検索結果に表示されたら、「今すぐインストール」ボタンをクリックし、「有効化」をクリックします。

有効化が完了するとプラグインのインストールが完了し、管理画面左メニュー「設定」にBreadcrumb NavXTプラグインの設定ページが追加されていることが確認できるかと思います。

一旦デフォルトの設定のままで大丈夫ですが、もし変更が必要になりましたらこの設定ページから内容を変更します。

テーマファイルにプラグイン専用の関数を追加

次は、パンくずリストを表示するための実装をおこないます。

パンくずリストを表示するにはプラグイン専用の関数を使用します。

表示したい箇所に以下のコードをheader.phpなどのPHPテンプレートファイルにコピー＆ペーストしてください。

<div class="breadcrumbsWrap">
  <div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
      bcn_display();
    }?>
  </div>
</div>

ペーストして保存していただくと、下図のようにプラグインにより自動生成されたパンくずリストが表示されます。

まだCSSでレイアウトを調整しておらず、崩れた表示になってしまっておりますのでご自身のサイトに適した見た目になるようにCSSで調整していただけますと幸いです。

CSSでレイアウトを調整

ここでは仕事ですぐに構築できるように、CSSコードをご紹介させていただきます。

以下のCSSコードをCSSファイル等にコピー＆ペーストしてください。

.breadcrumbsWrap{
  width: 1000px;
  margin: auto;
  font-size: 11px;
  color: #777;
  margin-top: 10px;
  white-space: nowrap;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.breadcrumbs{
  display: flex;
  align-items: center;
}
.breadcrumbs{
  display: flex;
  align-items: center;
}
.breadcrumbs span{
  margin:0 3px;
}
.breadcrumbs span:first-child{
  margin-left:0;
}
.breadcrumbs span:first-child a{
  color:#2a627e;
}
.breadcrumbs a{
  margin:0 3px;
}

ペーストして保存していただくと、多少違いがあるかもしれませんが下図のようにレイアウトが整うかと思います。

これでBreadcrumb NavXTプラグインを使ってパンくずリストを実装する解説は以上になります。

お疲れ様でした！

まとめ

WordPressでパンくずリストを実装する方法についての解説は以上になります。

パンくずリストはウェブサイトにとって重要な要素といっても過言ではありません。

その理由は、パンくずリストには様々な役割があり、SEO対策にもなりユーザビリティの向上にもなるためです。

当記事では、このパンくずリストについて自作する方法と、プラグインを使ってカスタマイズする方法について解説しいたしましたので、お仕事でお使いいただけるかと思います。

よろしければ繰り返しご活用いただけましたら幸いです。

執筆者

UMENOKI編集部高澤翔汰

歴5年目（2024年8月以降から5年目です）のエンジニアです！
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ（iPhoneアプリ）やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です！

詳しく見る

お気軽に皆さんのご要望をお聞かせください！

どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！

例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など