記事内に商品プロモーションを含む場合があります

Blog WordPress

【コピペOK】WordPressでパンくずリストをプラグインなしで簡単に作成する方法

【コピペOK】WordPressでパンくずリストをプラグインなしで簡単に作成する方法

「WordPressでパンくずリストを作成したい…そもそもパンくずリストって必要なの？…コピペで実装できたら最高なんだけどな…」

こういった疑問に答えます。

本記事の内容

  • パンくずリストを設置するメリットがわかる【SEO対策として効果的】
  • WordPressでプラグインを使わずパンくずリストを作成できる
  • コピペで簡単に実装できる

この記事を書いている僕は、完全未経験（前職は美容師）から独学でWebデザイナーに転職し、現在はWebデザイナーとして5年目になります。

この記事では、現場の実務で実際によくあるご要望としてWordPressのパンくずリストを実装する方法をご紹介していきます。

コピペで簡単に実装できるようにソースコードも公開していますので参考にしていただければと思います。

パンくずリストとは

パンくずリストとは？

パンくずリストとは、Webサイトに訪れたユーザーが「現在どこのページにアクセスしているか」を知るための「道しるべ」です。

下記の赤枠部分が、パンくずリストと呼ばれています。

パンくずリスト

パンくずリストの名前の由来

パンくずリストの名前の由来は、グリム童話の「ヘンゼルとグレーテル」

なぜ「パンくずリスト」と呼ばれるのか？疑問に思う方も多いかと思います。

パンくずリストの名前の由来は、グリム童話の「ヘンゼルとグレーテル」からと言われています。

物語には、ヘンゼルとグレーテルが家から森へ行く途中、帰り道を見失わないように、パンくずを少しずつ落としていったエピソードが由来となっています。

Webサイトでも同じように、ユーザーが現在どこのページにいるかを知るための役割を担っていることから「パンくずリスト」と呼ばれるようになりました。

パンくずリストを設置する３つのメリット

パンくずリストを設置する３つのメリット

Webサイトにパンくずリストを設置するメリットが下記の３つあります。

  • メリット1：Googleのクロールをサポート
  • メリット2：ユーザビリティの向上
  • メリット3：検索順位に好影響

各項目ごとに解説していきます。

メリット1：Googleのクロールをサポート

メリット1つ目として、検索エンジン最適化（SEO対策）において効果的ということです。

パンくずリストは、Webページの内部リンクや階層的な構造を示すことができるため、「クローラー」がWebサイト内を回遊（クロール）しやすくなります。

クロールするロボットのことを「クローラー」と呼びます。

クローラーがWebサイトのページ内容をより正確に情報収集できるようになり、ユーザーが求めている情報に対して最適なWebページを掲示できるようになります。

その結果、Webサイトの検索順位に好影響を与えます。

クローラーの役割など詳しくは、【初心者必見！】XMLサイトマップについて初心者でも簡単にできる作成方法からSEO効果まで解説！で解説しているので参考にしてください。

メリット2：ユーザビリティの向上

メリット2つ目として、パンくずリストを設置することで、ユーザーは現在閲覧しているページがどの位置にあるのかを把握しやすくなります。

この効果によって、ユーザは目的のページに素早くアクセスしやすくなります。

パンくずリストを設置することによって、ユーザビリティが向上するだけでなく、SEOにも効果があります。

パンくずリストを使用することで、Webサイトの内部リンクが強化され、検索エンジンによるクロールが効率的に行われるため、Webサイトの検索順位を上げることができ、より多くのユーザーに自社の価値あるコンテンツを提供することが可能です。

メリット3：検索順位に好影響

メリット3つ目として、パンくずリストは内部リンクとみなされ、内部リンクはSEO効果をもたらします。

内部リンクとは、サイト内のページ同士をリンクを繋ぐことを指します。

外部からのリンク（外部リンク）はSEO効果を高める上で重要な要素の１つとされていますが、内部リンクも同様の効果があるとされています。

パンくずリストは検索結果にも表示されるので、ユーザーのクリック率が高まり、ミスマッチを事前に防ぐことで、検索エンジンに「質の良いサイト」だと評価され検索順位が上がりやすくなります。

Googleの「検索エンジン最適化（SEO）スターター ガイド」でも、パンくずリストの設置が推奨されています。

わかりやすい URL を使用する

URL の各部分はパンくずリストとして検索結果に表示できるので、ユーザーも URL から結果が役に立つかどうかを把握できます。

検索エンジン最適化（SEO）スターター ガイド

パンくずリストの仕様

パンくずリストの仕様

今回作成するパンくずリストの仕様は下記になります。

ページパンくずリスト
トップページ表示しない
固定ページHOME＞ページタイトル
投稿ページHOME＞カテゴリー名＞ページタイトル
カテゴリーページHOME＞カテゴリー名
アーカイブページHOME＞日時
タグページHOME＞タグ名
404ページHOME＞お探しのページは見つかりません

上記の仕様で条件分岐させて表示させていきます。

パンくずリストのソースコード【WordPress】

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

下記コードを、該当するファイルにコピペすることでパンくずリストを作成することができます。

function.php

// パンくずリスト関数
function breadcrumb() {
    // ホームページへのリンクを定義
    $home = '<li><a href="' . get_bloginfo('url') . '">HOME</a></li>';
    
    // パンくずリストの開始タグ
    echo '<ul>';
    
    // トップページの場合はパンくずリストを表示しないため、処理を終了
    if (is_front_page()) {
        return;
    }
    
    // ホームページへのリンクを表示
    echo $home;

    // パンくずリストの項目を出力するヘルパー関数
    function display_breadcrumb_item($text, $url = null) {
        if ($url) {
            // URLがある場合はリンク付きで表示
            echo '<li><a href="' . $url . '">' . $text . '</a></li>';
        } else {
            // URLがない場合は通常のテキストとして表示
            echo '<li>' . $text . '</li>';
        }
    }

    // カテゴリと投稿に関する処理を行うヘルパー関数
    function display_category_breadcrumb($cat_id) {
        // カテゴリリストを格納する配列
        $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;
        }
        // カテゴリリストをパンくずリストに出力
        foreach ($cat_list as $value) {
            echo $value;
        }
    }

    // ページタイプに応じてパンくずリストを表示する
    if (is_category()) {
        // カテゴリページの場合
        $cat = get_queried_object();
        display_category_breadcrumb($cat->parent);
        // 現在のカテゴリタイトルを表示
        display_breadcrumb_item(single_cat_title('', false));
    } elseif (is_archive()) {
        // アーカイブページの場合
        display_breadcrumb_item(the_archive_title('', false));
    } elseif (is_single()) {
        // 投稿ページの場合
        $categories = get_the_category();
        // 投稿のカテゴリ情報がある場合は、そのカテゴリのパンくずリストを表示
        if (isset($categories[0]->cat_ID)) {
            display_category_breadcrumb($categories[0]->cat_ID);
        }
        // 現在の投稿タイトルを表示
        display_breadcrumb_item(the_title('', false));
    } elseif (is_page()) {
        // 固定ページの場合
        display_breadcrumb_item(the_title('', false));
    } elseif (is_404()) {
        // 404ページの場合
        display_breadcrumb_item('ページが見つかりません');
    }

    // パンくずリストの終了タグ
    echo '</ul>';
}

// アーカイブタイトルのフォーマットを変更するフィルタ
add_filter('get_the_archive_title', function ($title) {
    if (is_category()) {
        // カテゴリページの場合はプレフィックスなしで表示
        return single_cat_title('', false);
    } elseif (is_tag()) {
        // タグページの場合もプレフィックスなしで表示
        return single_tag_title('', false);
    } elseif (is_month()) {
        // 月別アーカイブページの場合もプレフィックスなしで表示
        return single_month_title('', false);
    }
    // それ以外はタイトルをそのまま返す
    return $title;
});

style.css

/* パンくずリスト */
ul{
    list-style: none;
  }
  li{
    display: inline;
  }
  li a{
    color: inherit;
    text-decoration: none;
  }
  li + li:before{
    content: ">";
    margin:.5em;
  }

テンプレートを設置

<?php breadcrumb(); ?>

テンプレートを設置するファイルは、「header.php」もしくは、「footer.php」のどちらかに設置することをオススメします。

理由としては、WordPressのヘッダーは共通になっているので、一か所に設置してしまえばページの内容にあわせて反映されるので管理がしやすいためです。

ページごとにパンくずリストを設置したい場合は、各ページに設置してみてください。

おまけ：ソースコードの解説

パンくずリストのソースコードを解説

このソースコードは、WordPressのウェブサイトにおいてパンくずリスト（Breadcrumb）を表示する関数breadcrumb()を定義しています。

ソースコードでは、異なる種類のページ（ホームページ、カテゴリページ、アーカイブページ、投稿ページ、固定ページ、404ページ）に応じて、適切なパンくずリストを生成するようになっています。

ソースコードの内容を詳しく解説していきます。

関数：breadcrumb()について

breadcrumb()は、パンくずリストを生成して表示するための関数です。

ホームページへのリンク
$homeという変数に、ホームページ（トップページ）へのリンクを含むリストアイテム (<li><a href="URL">HOME</a></li>) を格納します。

パンくずリストの開始
echo '<ul>';は、パンくずリストの開始タグ<ul>を表示します。これはリストの始まりを示します。

トップページの場合
is_front_page()は現在のページがトップページかどうかを確認します。トップページの場合は何も表示しないので、関数を終了して次の処理に進みません。

ホームページリンクの表示
ホームページへのリンクを表示します。

パンくずリストのアイテムを表示するヘルパー関数
display_breadcrumb_item()は、パンくずリストの各アイテムを表示するための関数です。
urlがある場合はリンク付きで、表示しない場合はテキストだけを表示します。

カテゴリ関連の処理を行うヘルパー関数
display_category_breadcrumb()は、現在のカテゴリやその親カテゴリの情報をリストにして表示します。
親カテゴリがある限り、カテゴリリンクを取得して配列に追加し、リストに表示します。

ページタイプごとの処理
それぞれのページタイプ（カテゴリページ、アーカイブページ、投稿ページ、固定ページ、404ページ）ごとに異なる処理を行い、パンくずリストのアイテムを表示します。
例えば、カテゴリページの場合は現在のカテゴリや親カテゴリのリンクとタイトルを表示します。
投稿ページの場合は投稿のカテゴリやタイトルを表示します。
固定ページの場合は現在のページタイトルを表示します。
404ページの場合は「ページが見つかりません」と表示します。

パンくずリストの終了
echo '</ul>';は、パンくずリストの終了タグ</ul>を表示します。これはリストの終わりを示します。

アーカイブタイトルのフォーマット変更

add_filter()はWordPressのフックを使って、アーカイブタイトルの表示方法を変更します。

カテゴリ、タグ、月別アーカイブページなどで、プレフィックスなしでタイトルを表示するようにします。

区切り文字

パンくずリストの区切り文字（＞）は、スタイルシートの擬似要素を使って表示させています。

li + li:before{
	content: ">";
	margin:.5em;
  }

まとめ：パンくずリストでSEO対策

まとめ：パンくずリストでSEO対策

今回は、WordPressでパンくずリストをプラグインなしで実装する方法をご紹介していきました。

パンくずリストは、Webサイトに訪れたユーザーが「現在どこのページにアクセスしているか」を知るための「道しるべ」になるだけでなく、SEOの側面でもメリットがあります。

わかりやすく、使いやすいパンくずリストを作成するためには、Webサイトの設計段階でどのようなカテゴリーやページが必要なのかを決めておくことが重要です。

現場でもサイト制作のほとんどがWordPressをカスタマイズして制作されているので、HTML・CSSの知識がある程度ついてきたらWordPressの勉強はオススメです。

WordPress入門にオススメの本

Kindle Unlimited対象作品

Kindle Unlimitedであれば30日間無料トライアルがあるので、無料期間中に学びきってしまいましょう。

以上、「【コピペOK】WordPressでパンくずリストをプラグインなしで簡単に作成する方法」でした。

  • この記事を書いた人
rdotblog_profile

dot

関西出身の29歳　R.BLOG（アールドットブログ）では、完全未経験から独学でWebデザイナーへ転職し、現役Webデザイナーとして日々学んだ（Webデザイン・プログラミング・Webマーケティング・SEOなど）タメになる情報を発信していきます。

-Blog, WordPress