WordPress「パンくずリスト」をプラグインで設定する方法+自作する方法

2023.04.18
2023.04.18

みなさんこんにちは! エンジニアの高澤です。
今回はWeb制作には欠かせない「パンくずリスト」について解説したいと思います。

パンくずリストはユーザーにとっての使いやすさはもちろん、SEO面でも重要な役割を担う機能だといっても過言ではありません。

多くのメリットがありながら実装することも簡単なので、ぜひ当記事で使い方とカスタマイズするスキルを身につけていただければ幸いです。

パンくずリストとは

パンくずリストとは、 Webサイトの構造を視覚的にわかりやすく表示したナビゲーションのことをいいます。

開いているページから順にサイトのトップページまでの流れでどういうルートをたどってきたのかを表示するものです。

パンくずのテキストにはリンクが設定されるので、ユーザーの回遊率も上がる可能性が高まります

「UIの視点」と「SEOの視点」の2つの視点からみたメリット

「UIの視点」からみたメリット

パンくずリストはシンプルにいえば「サイトのトップページからたどってきた道筋」なので、ユーザーが今閲覧しているページがどの位置なのかが一目でわかります。

また、一般的にパンくずリストはリンクが設定される作りになっているので、直前のページに戻りたい、カテゴリー一覧ページに戻りたい時等にすぐに戻れたりするなど、ユーザーの使いやすさや回遊率に貢献します。

「SEOの視点」からみたメリット

パンくずリストはリンク構造を示したリンクなので、検索エンジンのクローラーが巡回することに役立ちます

クローラーはインターネットに存在するWebサイトを巡回し、ページの情報を収集しています。Googleなど検索エンジンではこの収集した情報を評価して検索結果の順位を決めています

クローラーは手段の1つとしてリンクを読み取りサイトを評価するので、検索エンジンに対して Webサイトの構造を理解しやすくすることに多いに役立ちます

パンくずリストの設置方法

サイト上にパンくずリストを設置する方法は大きく下記の2つがあります。

1、プラグインを使う方法
2、PHP言語をつかって自作する方法

今回の記事では、それぞれ2つの方法を詳細に解説し、この記事を読み終えた頃にはどちらの方法でもパンくずリストを実装することができるようになっているでしょう。

エンジニア視点でみた2つの実装方法のメリット、デメリット

プラグインを使用する方法と、プログラミングで自作する方法の2つのメリット・デメリットをまとめると以下のことが言えるかと思います。

プラグインを使う方法

メリット:
簡単に素早く実装できて工数が少なくすむ。効率よくカスタマイズできる。

デメリット:
プラグイン独自の仕様がある。WordPressが重くなる可能性が少しある。

PHP言語をつかって自作する方法

メリット:
機能やデザインを自由に好きなコードでカスタマイズができる。無駄なプログラムがないためサイトが重くなる可能性が低い。

デメリット:
プログラミングの知識が必要。ですが、当記事では知識がなくても実装できる方法を解説します

上記のようにまとめられますが、筆者が実際にサイト制作する際にはどちらの方法もとっておりますが、割合的にはプラグインを使用する方法の方が多いです。

その理由は、工数が少なくて済みますし、自動で管理画面が用意されその管理画面上で手ごろにカスタマイズすることができるからです。

ただ、工数が少ないだとか、管理画面があればいいとかの話で完結しない場合もあるので、どちらの方法を使うかはケースバイケースだと思います。

当記事では、プラグインを使用する方法と、PHP言語で自作する方法の2パターンをご紹介して行きますので、各々のサイトに適した方を選んで実装していただければと思います。

Breadcrumb NavXTプラグインの使い方

まず、WordPressのプラグイン「Breadcurmb NavXT」の使い方をご説明したいと思います。

Breadcrumb NavXTとは、WordPress上でパンくずリストを簡単に実装するためのプラグインです。

使い方は大変簡単で、インストールした後に有効化し、専用のコードを表示させたい部分にコピペすればすぐにパンくずリストが表示されます。

Breadcrumb NavXTを選んだ理由

Breadcrumb NavXTはパンくずリストのプラグインでは最も多くの人に使われているプラグインであることと、自動で管理画面が生成されカスタマイズの幅も割と自由で使い勝手がいいからです。

先ほど、プラグインのデメリットとしてカスタマイズの幅が狭いと述べましたが、このBreadcrumb NavXTでは気にならないぐらいカスタマイズの自由がきくので、当記事ではご紹介しております。

そもそも良質なプラグインの判断基準とは?

プラグイン全般にいえることなのですが、プラグインの安全性を確認する目安として、

沢山の人に使われている(インストール数が多い)
頻繁に更新されている
ネットや書籍に多数の情報が存在する
評価が高い

上記の4つが主な判断基準といえるかと思います。

その理由は、沢山の人に使われていることによって、仮にバグが見つかった場合はプラグイン製作者に指摘することができ、また、頻繁に更新されていることによって、新機能が追加されることと同時に、製作者が直近のウイルスなど問題対策を施したプログラムに更新してくれるからです。

また違う観点からいえば、ネットや書籍に多数の情報が存在する場合、プラグインの使い方やカスタマイズの方法など幅広く対応することができるため、とても使い勝手の良い優秀なプラグインだといえます。

評価が高いことに関しては、シンプルに製作者のモチベーションが上がるためプラグインの更新や制作などに対して熱意がもててより良質なプラグインになっていきます

上記の理由から、上記4つを基準を良いプラグインを選択していただく際のご参考にしていただければと思います。

プラグインのインストール方法

それでは早速プラグインのインストールをしましょう。
下記の手順にしたがってインストールしてください。

①WordPress管理画面メニューの「プラグイン」をクリック


②「新規追加」をクリック


③「Breadcrumb NavXT」で検索


④「今すぐインストール」をクリック


⑤「有効化」をクリック


上記をまとめると、WordPress管理画面のメニューの「プラグイン」→「新規追加」→「Breadcrumb NavXT」で検索→「今すぐインストール」をクリック→「有効化」をクリック、になります。

この流れで進めていただけると、インストールできるかと思います。インストールが完了したら、下記の方法でパンくずリストを設定しましょう。

実装・設置する方法

Breadcrumb NavXTを無事インストールしましたら、下記のコードをテンプレートファイル内の表示させたい部分にコピペしてください。パンくずリストが表示されます。

↑上記のようにパンくずリストが表示されたかと思います。

カスタマイズする方法

Breadcrumb NavXTでは、割とカスタマイズの自由度が高く設定次第で様々なアレンジができます
下記ではカスタマイズの方法を実際にWebサイトを制作する時によく行う技術を厳選してご紹介します。役に立つ内容となっているのでぜひマスターしてください。

文字間の矢印をカスタマイズする方法

管理画面メニューの「設定」→「Breadcrumb NavXT」→「パンくずの区切り」の入力欄にデフォルトで「>」が設定されるかと思いますが、こちらをお好きなように書き換えていただければそれが矢印として表示されます。



例えば、「<span class="pankuzu_arrow">></span>」のようにspanタグで>を囲んでいただいて、CSSでデザインすればよりお洒落なパンくずが作れます
以下にサンプルコードをご紹介しておきます。


↑完成形はこんなイメージです。

HTML

以下のHTMLコードを、設定画面「一般」の「パンくず区切り」にコピペしてください。

CSS

以下のCSSコードをCSSファイルなどにコピペしてください。

使い方のまとめ
①HTMLのサンプルコードは管理画面メニューの「設定」→「Breadcrumb NavXT」→「パンくずの区切り」にコピペします。

②CSSはご自身で作成されたCSSファイルの任意の場所にコピペします。
CSSは管理画面メニューの「テーマエディター(テーマの編集)」→「テーマの編集画面左側のテーマファイル」→「いずれかのCSSファイルにコピペ」→「ファイルの更新」の手順で完了します。

上記2点が完了しましたらパンくずリストの矢印がデザインされたのが確認できます。
上記の方法を利用して、他にも様々なデザインのパンくずリストを作ってみましょう。

トップページ、特定のページだけ非表示にする方法

こちらに関してはPHP言語を使用して動きを実現します。PHPといっても難しいことは何もありません。結論をいうとコピペすればいいだけです。

プログラムの動きも単純で、if文で「トップページの時は〜」というように指定するだけなので簡単です。下記のように記述します。

「if()」の「()」の中にWordPressの関数である「is_front_page()」に対して論理否定演算子「(!)びっくりマークのこと」を冒頭につけることによって、「トップページでなければ〜」というの意味になりif文で囲まれたコード(パンくずリスト)が動かない(表示されない)ようになります。

is_front_page()とは
WordPressの関数であり、「今開いているページがトップページかどうか」を判断します。
if文と組み合わせることによって「トップページであれば〜」という動きが作れます。

論理否定演算子とは
そもそも演算子とはプログラミングでよく使われる手法です。
「!」を条件式の手前につけることによって、その返り値(結果)が真の場合には偽となり、偽の場合には真となる演算子です。

制作によく頻繁に使われる演算子で、使いどころとしては「〇〇のページは〜」といったようなif文での条件分岐する時に多用されます

上記はエンジニアや Webデザイナーの方にとっては必要な知識になるので、覚えておくとお仕事で役に立ちます。
逆に必要ではない方は覚える必要はありませんので、コピペだけしていただければOKです。

固定ページで作成した親ページを表示させる方法

よくあるお困りごととして、固定ページでのパンくずリストに親子関係を持たせる際にその方法がわからないという方がいらっしゃるのではないでしょうか。

下記の手順にした変えば親子関係を反映したパンくずリストを表示させることができます。

①WordPress管理画面メニューの「固定ページ」をクリック


②「固定ページ一覧」をクリック


③「ページ属性」で親として設定したい固定ページ名をクリック



④親ページがパンくずリストに表示

管理画面メニューの「固定ページ」→「固定ページ一覧」→「ページ属性」の「親」に表示された他の固定ページ名を選択するとその固定ページが親になり、実際にパンくずリストを確認すると、トップページ、親ページ、子ページ(現在開いているページ)の順番で表示されます。

この親子関係を図で表すとこのような構造になります。

同様に、孫ページにしたいページの親ページの指定を子ページに設定すれば、トップページ、親ページ、子ページ、孫ページ、の順番で表示されます。(※他固定ページが数ページある前提です)

CSSでデザインする方法

先ほど矢印のデザインをCSSで実装する方法をご紹介いたしましたが、パンくずリスト全体の余白の幅や文字の色、太さなどをカスタマイズする方法をご紹介したいと思います。

※先ほど解説した「トップページ、特定のページだけ非表示にする方法」のプログラムを一切書き換えていないことを前提での解説ですので、下記のサンプルCSSで変化がない場合はプログラムを元の状態に戻してから試してみてください

要素間の余白を広げる方法

上記のCSSを追加するだけです。
もっと余白の幅を広げたいもしくは狭めたい場合には、「margin-right:12px;」の「12」の数値を上げ下げすれば変わります。

文字の色を変更する方法

文字の色をお好きなように変更するには、「color:#333333;」の「333333」の部分を変更すれば変わります。
#333333とはカラーコードといい16進数で指定します。
カラーコードは検索していただけると沢山情報がでてきますので、ぜひご確認ください。
Photoshopなど制作系ツールをお持ちの方はそちらでもご確認いただけます。

ホームも文字の色のみ変更する方法

文字の色をお好きなように変更するには、「color:#69A4DB;」の「69A4DB」の部分を変更すれば変わります。

文字の大きさを小さくする方法

こちらは先ほど「ーーー要素間の余白を広げる方法」でご紹介したCSSの中に追加する形で「font-size:13px;」を指定してください。そうすると、全体の文字の大きさが小さくなりページのバランスがよくなります。
もっと文字の大きさを小さくしたいもしくは大きくしたい場合には、「font-size:13px;」の「13」の数値を上げ下げすれば変わります。

文字数を途中省略する方法

パンくずリストはページによって文字数が変わり、長文になってしまいレイアウトを崩してしまうケースが多くあります。これは Web制作をする方なら必ず直面する問題ではないでしょうか。それを解消するための方法が文字数を途中で省略する方法です。
上記のCSSをコピペすると文字数が省略されて、省略された部分に「…」が表示されます。
「…」で省略するタイミングはコードの「max-width:110px;」の 「110」の数値を変更すると調節することができます。

パンくずリストの自作方法

自作する方法をご紹介する理由

ここまで記事を読まれたみなさんは、Breadcrumb NavXTプラグインでパンくずリストを比較的自由に実装する方法は十分に身についていると思います。実務でも十分に通用するスキルを持っています。
ですがもっと高度に、機能まで自由に実装したいとお考えの方もいらっしゃるかと思います。

ここからは、主にエンジニア、プログラマーの方、Webデザイナーの方など制作をお仕事としている方向けの内容になっております。
ただ、難しい内容ではありませんので、サイトの都合でプラグインをできるだけ使いたくないな〜とお考えのブロガーの方や Web担当者の方も大変参考になる内容になっておりますので、よろしければご利用ください。

実際にコードで実装してみよう!

まずは下記のコードを表示させたい任意の場所にコピペしましょう。

上記はパンくずリストを実装するためのコードになります。
WordPressの関数とPHPを組み合わせており、それぞれの閲覧した時のページに合わせて機能するようになっています。

プログラムの説明

プログラムの動きとしては、「トップページの時は表示しない」という動きをする「!is_front_page()」から始まって、そのあと「is_〇〇」のWordPress関数で開いた時のページの種類を確認しています。ページの種類を確認した後、ページごとに親ページや表示中のページの情報を取得し、読み込んで表示しているという動きをしています。

簡単にまとめると下記の流れになります。
1、トップページでなければパンくずリストを表示する
2、開いているページの種類を確認し処理を分岐
3、ページの種類ごとの処理を実行
4、パンくずリスト全体表示

また、使われているWordPress関数とページごとのプログラムの仕組みをそれぞれご紹介します。
この内容は実際のWebサイト制作で使われる重要なプログラムであり、WordPressでのサイト制作でいろいろと応用が利くようになるので、エンジニアの方や Webデザイナーの方はぜひマスターしてください。

検索結果ページの場合(search.php)

is_search() 検索結果ページか判定する
the_search_query() 検索にかけたキーワードを表示する

プログラムの内容:
is_search()で検索結果ページか判定し、検索結果ページであれば処理を実行します。
the_search_query()で検索時に入力した検索キーワードを表示します。

タグアーカイブページの場合(tag.php)

is_tag() タグアーカイブページか判定する
single_tag_title() 現在のページのタグタイトルを表示・取得する

プログラムの内容:
is_tag()でタグアーカイブページか判定し、タグアーカイブページであれば処理を実行します。
single_tag_title()で現在のタグアーカイブページの対象とするタグ名を表示します。

日付アーカイブページの場合(date.php)

is_date() 日付に関するアーカイブページか判定する
get_year_link() 特定の年別のアーカイブページのリンクを取得する
get_month_link() 特定の月別のアーカイブページのリンクを取得する
get_day_link() 特定の日別のアーカイブページのリンクを取得する
get_query_var() ページやパーマリンクごとに変化する情報を取得する

プログラムの内容:
まずはis_date()で日付に関するアーカイブページか判定し、さらにis_day()、is_month()、is_year()で日別アーカイブなのか、月別アーカイブなのか、年別アーカイブなのかを判定します。(つまり二重で判定します)

日別アーカイブであれば、get_year_link()とget_query_var()の組み合わせでリンクを生成し、get_query_var(‘year’)で年数を表示します。

2つ目に同じように月別アーカイブのリンク生成と月数の表示、3つ目に現在のページの日別アーカイブの日数を表示します。

月別アーカイブ、年別アーカイブも同じ関数、同じ処理を使います。

カテゴリーページの場合(category.php)

is_category() カテゴリーアーカイブページか判定する
get_queried_object() 開いているページのオブジェクトを取得する
get_ancestors() 引数で指定したオブジェクトの祖先オブジェクトの配列を取得する
array_reverse() 配列の中の要素の順番を逆にする(PHPの関数です)
esc_url(); URLを無害化する
get_category_link() カテゴリーアーカイブページへのリンクを返す
esc_html() HTMLを無害化する
get_cat_name() 引数に指定されたカテゴリーIDのカテゴリー名を取得する
wp_trim_words() 文字数を省略する

プログラムの内容:
is_category()でカテゴリーページかを判定し、カテゴリーページであればまずはじめにget_queried_object()でカテゴリーオブジェクトを取得します。

取得後、if文で親ページが0かどうか判定し、0でなければ(つまり親ページが存在すれば)get_ancestors()で祖先のカテゴリーオブジェクトを配列で取得し、その取得した配列をarray_reverse関数で逆順にします。

逆順にした配列をforeach文でループさせて配列の中身の情報を取り出して$ancestor変数に代入します。あとは、$ancestor変数を利用してget_category_link()でリンクを生成し、get_cat_name()で現在のページのカテゴリー名を表示します。

投稿者アーカイブの場合(author.php)

is_author() 投稿者アーカイブページが表示されているか判定する
the_author_meta() 投稿者(ユーザー)のいくつかのデータを取得する
get_query_var() ページやパーマリンクごとに変化する情報を取得する

プログラムの内容:
is_author()で投稿者アーカイブページかどうかを判定し、投稿者アーカイブページであればthe_author_meta()とget_query_var()の組み合わせで投稿者の名前を取得します。

固定ページの場合(page.php)

array_reverse() 配列の中の要素の順番を逆にする(PHPの関数です)
get_ancestors() 引数で指定したオブジェクトの祖先オブジェクトの配列を取得する
esc_url() URLを無害化する
get_permalink() 投稿または固定ページのリンクを取得する
esc_html() HTMLを無害化する
get_the_title() ページタイトルを取得する
wp_trim_words() 文字数を省略する

プログラムの内容:
is_page()で固定ページかどうかを判定し、固定ページであれば次に親ページがあるかどうかを判定します。

あればget_ancestors()で祖先オブジェクトの配列を取得し、その取得した配列の要素の順番を逆順にし$ancestors変数に代入します。

foreach文で$ancestors変数をループさせて取り出した要素を$ancestor変数に代入し、$ancestor変数を利用してget_parmalink()で固定ページのリンクを生成し、get_the_title()で固定ページのタイトルを表示します。

そのあと、親ページの有無にかかわらず、現在開いている固定ページのタイトルをwp_trim_words()で文字数を制限した上で表示します。

添付ファイルページの場合(attachment.php)

is_attachment() 添付ファイルページか判定する
esc_url() URLを無害化する
get_permalink() 投稿または固定ページのリンクを取得する
esc_html() HTMLを無害化する
get_the_title() ページタイトルを取得する

プログラムの内容:
is_attachment()で添付ファイルページかを判定し、親ページがあればget_permalink()で親ページのリンクを生成、get_the_title()で親ページのタイトルを表示させます。
次に親ページの有無にかかわらず添付ファイルのページタイトルが表示されます。

投稿記事ジの場合(single.php)

is_single() 投稿記事ページかどうかを判定する
get_the_category() カテゴリーオブジェクトの配列を返す。
array_reverse() 配列の中の要素の順番を逆にする(PHPの関数です)
get_ancestors() 引数で指定したオブジェクトの祖先オブジェクトの配列を取得する
esc_url() URLを無害化する
get_category_link() カテゴリーアーカイブページへのリンクを返す
esc_html() HTMLを無害化する
get_cat_name() 引数に指定されたカテゴリーIDのカテゴリー名を取得する
wp_trim_words() 文字数を省略する

プログラムの内容:
is_single()で投稿記事ページかどうかを判定し、投稿記事ページであればはじめの処理としてget_the_category()でカテゴリーオブジェクトを取得し$cateegories変数に代入します。

$ancestors[0]で配列の1番目を取得し$cat変数に代入後、if文で親カテゴリーがあるかを判定する。

親カテゴリーが存在する場合は、get_ancestors()で先祖カテゴリーオブジェクトを配列で取得し、array_reserve()関数で配列の中身を逆順にし$ancestors変数に代入する。

あとは$ancestors変数をforeach文でループさせて取り出した配列の中身の要素を$ancestor変数に代入して利用し、get_category_link()やget_the_name()と組み合わせてカテゴリーアーカイブのリンクやカテゴリー名を生成する。

そのあと親カテゴリーの有無にかかわらず、現在のページのカテゴリーを表示をさせるためにget_category_link()でリンクを生成し、事前に取得していた$cat変数でカテゴリータイトルを表示させます。

最後にwp_trim_words()で投稿記事ページのタイトルを表示させます。

あとはCSSでデザインするだけ!

if文にて条件分岐したあとのそれぞれの機能についてプログラムの内容を解説しました。

プログラムの構成をざっくりいうと、シンプルにulタグとliの形式で構成されており、このulやliタグ、またaタグにCSSをあてればデザインはできてしまうので、CSSが使える方はご自身の思うがままにデザインしていただければと思います。

まとめ

以上がWordPressでパンくずリストを設置する方法になります。
まずパンくずリストを設置することによって、ユーザーの回遊率やサイトの使いやすさを向上させ、またSEOにも貢献することをご紹介させていただきました。
実装方法も実に簡単で、Breadcrumb NavXTプラグインであれば3分ぐらいで設定できてしまいます。

ここまで読んでいただいた方は「プラグインで実装する方法」も、「PHPで自作する方法」も十分にマスターしていることと思うので、ぜひお仕事などに活かしていただければと思います。
最後までご覧いただき、ありがとうございました!

2023.04.18
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ