カスタマイズ 2024.12.02 2024.12.05

WordPressでパンくずリストを簡単に実装する方法【プラグイン／コピペ】

この記事を書いた人

土井純也

WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO

1985年北海道生まれ。
200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。

【展開しているサービス一覧】
■WordPress開発サービス「wp.make」
■WordPress保守/運用サービス「wp.support」
■WordPressハッキング/緊急復旧対応サービス「wp.rescue」
■WordPressバージョンアップ代行サービス「wp.versionup」

パンくずリストは、Webページの上部に表示されている階層構造のナビゲーションです。

WordPressは初期状態ではパンくずリストが実装されていないため、プラグインを使用したり、コードを追記することでパンくずリストを実装できます。本記事では、WordPressでパンくずリストを実装する手順を、プラグインを使用する方法と、使用せずにコピペできる方法の2種類に分けて解説します。

パンくずリストとは？

パンくずリスト（Breadcrumbs）とは、いま閲覧しているWebページ位置を、サイトの階層構造で示したものです。童話「ヘンゼルとグレーテル」の中で、道しるべとしてちぎったパンくずを撒いたのが名前の由来と言われています。

パンくずリストはページの上部に表示し、リンクテキストを大なり記号（>）繋げる形式が一般的です。
パンくずリストとは？

また、表示する階層は、以下の3種類に分類できます。

階層ベース：大分類→小分類へと現在の位置を階層構造で表示します。このタイプがもっとも良く見られます。
属性ベース：製品カテゴリなど、現在のページが含まれる属性を表示します。ショッピングサイトなどで見られるタイプです。
パス（履歴）ベースのパンくずリスト：訪問者の履歴に基づき、過去の閲覧ページへ戻れるよう履歴を表示します。アンケートやユーザー登録ページなどで見られるタイプです。

パンくずリストの実装方法【プラグインあり】

WordPressでパンくずリストを導入する方法はいくつかありますが、プラグインを使用すると実装が手軽でカスタマイズもできるので便利です。

プラグイン「Breadcrumb NavXT」を使う

「Breadcrumb NavXT」は、名前からわかるようにパンくずリストに特化したプラグインです。カスタマイズ性が高く、人気があります。

以下の手順で設定します。

WordPress管理画面から「プラグイン」→「新規プラグインを追加」を開き、検索ボックスにプラグイン名（Breadcrumb NavXT）を入力して検索します。該当プラグインが見つかったら、「今すぐインストール」をクリックしてから「有効化」をクリックします。
プラグイン「Breadcrumb NavXT」を使う

プラグインを有効化すると、WordPress管理画面の「設定」内に「Breadcrumb NavXT」というメニューが追加されます。初期設定のままでも問題なく使用できますが、カスタマイズしたい場合は、設定内の項目を変更します。

設定変更方法は、以下のとおりです。

WordPress管理画面から「設定」→「Breadcrumb NavXT」を開きます。必要な項目を変更して、「更新」をクリックして変更内容を保存します。

プラグイン「Breadcrumb NavXT」を使う2

よく使う項目について説明します。

一般の設定項目

項目名	内容
パンくずの区切り	項目間の区切り文字を設定します。初期値は「 > （表示は >）」ですが、「-」や「>>」などに変更可能です。
現在の項目にリンク	現在のページタイトルにリンクを設定するかどうかを設定します。初期値は未チェック（リンクしない）です。
分割ページパンくず	ページが分割される場合、ページ番号のパンくずを最後に配置するかどうか設定します。初期値は未チェック（配置しない）です。
分割ページテンプレート	分割ページパンくず用のテンプレートを記述する欄です。
ホームページパンくず	サイトのタイトルをパンくずリストの最初に表示するかどうかを設定します。初期値はチェック（表示）です。
ホームページテンプレート	表示されるホームページの文字列を変更したい場合に、テンプレートを編集します。
ホームページテンプレート (リンクなし)	上と同じですが、パンくずがリンクになっていない場合だけ使われます。

投稿タイプの設定項目

項目名	内容
投稿テンプレート	投稿パンくず用のテンプレートです。
投稿テンプレート(リンクなし)	上と同じですが、パンくずがリンクになっていない場合だけ使われます。
投稿階層表示	パンくずリストで、設定に基づいて階層化して表示する場合はチェックを入れます。初期値はチェックが入った状態（表示）です。
投稿階層	どの階層でパンくずリストを表示するかを設定します。初期値は「カテゴリー」で、ほかに「親投稿」「日付」「タグ」「フォーマット」が選択可能です。

パンくずリストをWordPressサイトに実装するには、header.phpに以下のコードを追加します。

FTPソフトでテーマ内にあるheader.phpをダウンロードし、開きます。一番最後の部分に以下のコードを追加します。保存してからファイルをアップロードします。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if (function_exists('bcn_display'))
    {
        bcn_display();
    } ?>
</div>

<?php if (function_exists('bcn_display'))

{

bcn_display();

} ?>

</div>

※必ずファイルのバックアップを取得してから作業してください。

Webサイトを確認すると、設定した階層構造でパンくずリストが表示されていることがわかります。

投稿タイプの設定項目

ほかのおすすめパンくずリスト作成プラグイン

「Breadcrumb NavXT」以外にも、パンくずリストを作成できるプラグインは複数あります。

見栄えをカスタマイズしたい人におすすめ「Flexy Breadcrumb」

https://wordpress.org/plugins/flexy-breadcrumb/

パンくずリストのテキストの色やサイズ、アイコンなどを設定可能なパンくずリストプラグインです。プラグイン上で設定を行い、テーマファイルにショートコードを追記して実装します。

「Breadcrumb」

https://ja.wordpress.org/plugins/breadcrumb/

パンくずリスト専用の軽量プラグインです。区切り文字、テキストの色やサイズなどが変更可能で、「Custom CSS」で見栄えを変更できるのが特徴。ショートコードを追加して実装するタイプです。

あまりプラグインを増やしたくない場合に便利な「Yoast SEO」

https://ja.wordpress.org/plugins/wordpress-seo/

SEO対策プラグインとして人気の「Yoast SEO」は、パンくずリスト作成機能を搭載しています。プラグインを有効化してからheader.phpにコードを追記して実装します。

パンくずリストの実装方法【コピペOK・プラグインなし】

パンくずリストは、プラグインを使用しなくても比較的簡単に実装可能です。
手順は以下のとおり。

functions.phpにパンくずリストを表示する関数（breadcrumb()）を追記する
関数を実行する位置に追記する
CSSで見栄えを整える

以下のコードは、パンくずリストを実装する関数 breadcrumb() を追加するものです。パンくずリストは番号なしリスト形式（ul）で出力し、CSSでパンくずリスト形式に整形します。

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


    if ( is_front_page() ) {
        // トップページはパンくずリストを表示しない
        echo "</ul>";
        return;
    } else if ( is_single() ) {
        // 投稿ページの場合
        $categories = get_the_category();
        
        if (!empty($categories)) {
            $current_cat = $categories[0]; // 記事に紐づく最初のカテゴリを取得
            $cat_list = array();


            // 親カテゴリから順に階層を作成
            while ($current_cat->parent != 0) {
                $cat_link = get_category_link($current_cat->term_id);
                array_unshift($cat_list, '<li><a href="'.$cat_link.'">'.$current_cat->name.'</a></li>');
                $current_cat = get_category($current_cat->parent); // 親カテゴリを取得
            }
            // 最上位のカテゴリも追加
            array_unshift($cat_list, '<li><a href="'.get_category_link($current_cat->term_id).'">'.$current_cat->name.'</a></li>');
            
            // カテゴリ階層を出力
            echo implode('', $cat_list);
        }


        // 記事タイトルを出力
        the_title('<li>', '</li>');


    } else if ( is_page() ) {
        // 固定ページの場合
        $parent_id = wp_get_post_parent_id(get_the_ID()); // 親ページのIDを取得
        $page_list = array();


        // 親ページがある場合、親ページの階層を作成
        while ($parent_id != 0) {
            $page = get_post($parent_id);
            $page_link = get_permalink($page->ID);
            array_unshift($page_list, '<li><a href="'.$page_link.'">'.$page->post_title.'</a></li>');
            $parent_id = wp_get_post_parent_id($parent_id); // 上位の親ページを取得
        }


        // 親ページの階層を出力
        echo implode('', $page_list);


        // 現在の固定ページタイトルを出力
        the_title('<li>', '</li>');


    } else if ( is_category() ) {
        // カテゴリーページの場合
        $current_cat = get_queried_object();
        $cat_list = array();


        // 親カテゴリから順に階層を構成し、最上位カテゴリを含めて出力
        while ($current_cat->parent != 0) {
            $cat_link = get_category_link($current_cat->term_id);
            array_unshift($cat_list, '<li><a href="'.$cat_link.'">'.$current_cat->name.'</a></li>');
            $current_cat = get_category($current_cat->parent);
        }
        array_unshift($cat_list, '<li><a href="'.get_category_link($current_cat->term_id).'">'.$current_cat->name.'</a></li>');


        // カテゴリ階層を出力し、最下位カテゴリとして現在のカテゴリ名を表示
        echo implode('', $cat_list);


    } else if ( is_tag() ) {
        // タグアーカイブページの場合
        echo '<li>#'.single_tag_title('', false).'</li>';


    } else if ( is_date() ) {
        // 年別、月別、日別アーカイブページの場合
        if ( is_year() ) {
            echo '<li>'.get_the_date('Y年').'</li>';
        } elseif ( is_month() ) {
            echo '<li><a href="'.get_year_link(get_the_date('Y')).'">'.get_the_date('Y年').'</a></li>';
            echo '<li>'.get_the_date('n月').'</li>';
        } elseif ( is_day() ) {
            echo '<li><a href="'.get_year_link(get_the_date('Y')).'">'.get_the_date('Y年').'</a></li>';
            echo '<li><a href="'.get_month_link(get_the_date('Y'), get_the_date('m')).'">'.get_the_date('n月').'</a></li>';
            echo '<li>'.get_the_date('j日').'</li>';
        }


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


    } else if ( is_archive() ) {
        // その他のアーカイブページ（カスタム投稿タイプのアーカイブページ）
        echo '<li>'.post_type_archive_title('', false).'</li>';
    }


    echo "</ul>";
}

100

101

102

103

104

105

106

107

108

109

110

111

function breadcrumb() {

$home = '<li><a href="'.get_bloginfo('url').'">HOME</a></li>';

echo '<ul>';

echo $home;

if ( is_front_page() ) {

// トップページはパンくずリストを表示しない

echo "</ul>";

return;

} else if ( is_single() ) {

// 投稿ページの場合

$categories = get_the_category();

if (!empty($categories)) {

$current_cat = $categories[0]; // 記事に紐づく最初のカテゴリを取得

$cat_list = array();

// 親カテゴリから順に階層を作成

while ($current_cat->parent != 0) {

$cat_link = get_category_link($current_cat->term_id);

array_unshift($cat_list, '<li><a href="'.$cat_link.'">'.$current_cat->name.'</a></li>');

$current_cat = get_category($current_cat->parent); // 親カテゴリを取得

}

// 最上位のカテゴリも追加

array_unshift($cat_list, '<li><a href="'.get_category_link($current_cat->term_id).'">'.$current_cat->name.'</a></li>');

// カテゴリ階層を出力

echo implode('', $cat_list);

}

// 記事タイトルを出力

the_title('<li>', '</li>');

} else if ( is_page() ) {

// 固定ページの場合

$parent_id = wp_get_post_parent_id(get_the_ID()); // 親ページのIDを取得

$page_list = array();

// 親ページがある場合、親ページの階層を作成

while ($parent_id != 0) {

$page = get_post($parent_id);

$page_link = get_permalink($page->ID);

array_unshift($page_list, '<li><a href="'.$page_link.'">'.$page->post_title.'</a></li>');

$parent_id = wp_get_post_parent_id($parent_id); // 上位の親ページを取得

}

// 親ページの階層を出力

echo implode('', $page_list);

// 現在の固定ページタイトルを出力

the_title('<li>', '</li>');

} else if ( is_category() ) {

// カテゴリーページの場合

$current_cat = get_queried_object();

$cat_list = array();

// 親カテゴリから順に階層を構成し、最上位カテゴリを含めて出力

while ($current_cat->parent != 0) {

$cat_link = get_category_link($current_cat->term_id);

array_unshift($cat_list, '<li><a href="'.$cat_link.'">'.$current_cat->name.'</a></li>');

$current_cat = get_category($current_cat->parent);

}

array_unshift($cat_list, '<li><a href="'.get_category_link($current_cat->term_id).'">'.$current_cat->name.'</a></li>');

// カテゴリ階層を出力し、最下位カテゴリとして現在のカテゴリ名を表示

echo implode('', $cat_list);

} else if ( is_tag() ) {

// タグアーカイブページの場合

echo '<li>#'.single_tag_title('', false).'</li>';

} else if ( is_date() ) {

// 年別、月別、日別アーカイブページの場合

if ( is_year() ) {

echo '<li>'.get_the_date('Y年').'</li>';

} elseif ( is_month() ) {

echo '<li><a href="'.get_year_link(get_the_date('Y')).'">'.get_the_date('Y年').'</a></li>';

echo '<li>'.get_the_date('n月').'</li>';

} elseif ( is_day() ) {

echo '<li><a href="'.get_year_link(get_the_date('Y')).'">'.get_the_date('Y年').'</a></li>';

echo '<li><a href="'.get_month_link(get_the_date('Y'), get_the_date('m')).'">'.get_the_date('n月').'</a></li>';

echo '<li>'.get_the_date('j日').'</li>';

}

} else if ( is_404() ) {

// 404ページの場合

echo '<li>ページが見つかりません</li>';

} else if ( is_archive() ) {

// その他のアーカイブページ（カスタム投稿タイプのアーカイブページ）

echo '<li>'.post_type_archive_title('', false).'</li>';

}

echo "</ul>";

}

パンくずリストを表示したい場所にコードを追記します。header.phpに追記すると、サイト全体に適用されます。

<?php breadcrumb(); ?>

1	<?php breadcrumb(); ?>

上記コードを追記した状態でWebサイトを表示すると、以下のようになります。

パンくずリストの実装方法【コピペOK・プラグインなし】

パンくずリスト用に以下のCSSを追加します。

/* パンくずリストの見栄えを調整するCSS */
ul{
    list-style: none;
  }
  li{
    display: inline;
  }
  li a{
    color: inherit;
    text-decoration: none;
  }
  li + li:before{
    content: ">";
    margin:.5em;
  }

/* パンくずリストの見栄えを調整するCSS */

ul{

list-style: none;

}

li{

display: inline;

}

li a{

color: inherit;

text-decoration: none;

}

li + li:before{

content: ">";

margin:.5em;

}

パンくずリストの実装方法【コピペOK・プラグインなし】2

なお、今回編集を行ったfunctions.phpについては、以下の記事で詳しく解説しています。

→WordPressのfunctions.phpとは？用途や注意事項をやさしく解説

パンくずリストを設置すべき理由

パンくずリストは、どのサイトにも必ず必要なものではありません。1枚仕立てのWebページやページ数が少なくほとんど階層を持っていないWebサイトでは、パンくずリストを設置しても期待する効果は得られない可能性が高いです。

逆に、大規模なWebサイトや階層構造になっているWebサイトでは、パンくずリストを設置することで以下のような効果が期待できます。

ユーザーが「今サイトのどの位置にいるか」がわかる

パンくずリストがあると、ユーザーは現在閲覧しているページの位置、そのページが所属するカテゴリ、階層構造などを簡単に把握できます。さらにそこから現在のページと同じカテゴリの別ページへ移動することや、親階層のページに辿ることが容易にできます。

サイトのナビゲーションを改善することで、ユーザー体験を改善できます。

SEOに有効

パンくずリストは検索エンジンに対しても有益です。Googleなどの検索エンジンは、パンくずリストを使用して情報を分類し、サイトの構造を理解します。今回紹介したサイト上のパンくずリストとともに、構造化データのパンくずリストを実装することで、コンテンツ内容をクローラーが理解しやすくなります。

SEOに有効

さらに、パンくずリストによってサイトの回遊率向上や直帰率の改善に役立てば、結果的にSEO評価の向上にも繋がります。

パンくずリストを備えたテーマを選ぶと効率的

パンくずリストを設置するもっとも簡単な方法は、パンくずリストに対応したWordPressのテーマを選択することです。既に運用中のサイトでは難しいですが、新規にWordPressサイトを構築する場合は、パンくずリストに対応したWordPressのテーマを選択すると無駄がありません。

初心者にも人気がある以下の国産テーマは、パンくずリストにも対応しています。

ほかにもパンくずリストに対応しているテーマは数多くあるので、テーマを選定する際にはパンくずリスト対応をチェックするとよいでしょう。

まとめ

パンくずリスト（Breadcrumbs）は、ウェブサイトのナビゲーションを改善するための重要な要素です。ユーザーにとっても、サイト運営者にとっても役立つ機能として、多くのサイトで採用されています。

自社サイトのユーザー体験を改善したい場合や、SEO対策を強化したい場合には有効な手段です。パンくずリストが設置されると断然使いやすいサイトになるので、ぜひお試しください。

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
WordPressに最適なサーバーの選定や構築から依頼したい…
SEO対策や高速化も考慮したサイト構築を行なってほしい…
制作後の保守・運用についてもサポートしてほしい…
今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら『wp.make』

全案件WordPressのみ！
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的！

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…

こんな事態になる前に、ぜひ一度、ご相談ください！
WordPressサイトを作るなら、一番WordPressに詳しいところへ！

もっと詳しく

WordPressでパンくずリストを簡単に実装する方法【プラグイン／コピペ】

土井 純也

パンくずリストとは？

パンくずリストの実装方法【プラグインあり】

プラグイン「Breadcrumb NavXT」を使う

一般の設定項目

投稿タイプの設定項目

ほかのおすすめパンくずリスト作成プラグイン

見栄えをカスタマイズしたい人におすすめ「Flexy Breadcrumb」

「Breadcrumb」

あまりプラグインを増やしたくない場合に便利な「Yoast SEO」

パンくずリストの実装方法【コピペOK・プラグインなし】

パンくずリストを設置すべき理由

ユーザーが「今サイトのどの位置にいるか」がわかる

SEOに有効

パンくずリストを備えたテーマを選ぶと効率的

まとめ

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPress開発・カスタマイズなら 『wp.make』

土井純也

WordPress開発・カスタマイズなら『wp.make』