パンくずリストの作り方【コピペでOK】【ワードプレス】

パンくずリスト作成解説ページのアイキャッチ

このページではワードプレスでのパンくずリストの作り方について解説します。

パンくずリストって?
まずパンくずリストがどんなものかについて解説するね

まずパンくずリストとはこのページの最上部にも表示されているコレです。

パンくずリストの表示例

基本的にウェブサイトは下の図のように、ツリー構造として各カテゴリが構成されており、

ウェブサイトのカテゴリの構成

パンくずリストは、現在表示中のページが属するカテゴリおよびその親カテゴリを示す情報&それらのカテゴリへのリンクになります。

カテゴリをたどって作成されるパンくずリスト

これによりページ訪問者に対して、ウェブサイトのどの位置のページを読んでいるかを示すことができます。

またカテゴリへのリンクを貼ることで、そのページが属するカテゴリページに移動しやすくなり、利便性が上がります。

さらにパンくずリストは検索結果にも表示されるので、検索結果からそのウェブサイトがどんなサイトなのかな情報を伝えることもできます。

あー、これね!確かに便利だよね!

僕も他のページを見たい時は良くクリックするよ

他のページに誘導する効果もあるよね!

ここからはこの「パンくずリスト」の作り方について解説していくよ!

パンくずリストの作り方

それではパンくずリストの作り方について解説していきます。

パンくずリストは大きく分けると下記の2つの処理によって作成することができます。

  • パンくずリストに表示するカテゴリ名とリンクの情報を集める
  • 集めたカテゴリ名とリンクを「パンくずリスト構造」に合わせて出力する

一つ一つ見ていきましょう!

パンくずリストに表示するカテゴリ名とリンクの情報を集める

まずはパンくずリストに表示するカテゴリ名とリンクの情報を集める処理を行います。

これは表示中のページが属するカテゴリから順に、上位方向にカテゴリを辿りながら「カテゴリ名」と「カテゴリへのリンク」を取得することで行うことができます。

例えば下図のようなカテゴリ構成で「みかんの投稿記事2」を表示している場合、

表示に必要な情報を集める処理1

まず表示中のページが属するカテゴリのカテゴリ名とリンクを取得して配列に格納します。

表示に必要な情報を集める処理2

ちなみにカテゴリ名は get_cat_name 関数、リンクは get_category_link 関数により取得することが可能です。

カテゴリ名とリンクの取得
/* $category_id : カテゴリ名 */
/* カテゴリ名とリンクを取得して配列の末尾に格納 */
$name_array[] = get_cat_name( $category_id );
$link_array[] = get_category_link( $category_id );

続いてそのカテゴリの親カテゴリ(一つ上の階層のカテゴリ)のカテゴリ名とリンクを取得して配列の末尾に格納します。

表示に必要な情報を集める処理3

親カテゴリの ID は get_category 関数から返却されるオブジェクトの parent メンバにより得られます。

親カテゴリの辿り方
/* 親カテゴリのIDを新たなカテゴリIDとして上位を辿る */
$category    = get_category( $category_id );

/* $category->parent : $category の親カテゴリの ID */
$category_id = $category->parent;

この $category_id を用いて前述のように get_cat_name 関数と get_category_link 関数を使用すれば、親カテゴリのカテゴリ名とリンクが取得できます。

こんな感じで最上位のカテゴリまで親カテゴリを辿りながら表示したい情報を配列に詰めていきます。

最後にトップページを表すカテゴリ名として「ホーム」とトップページへのリンクを配列の末尾に格納します。

表示に必要な情報を集める処理3

これによりパンくずリストを表示するために必要な情報が集まります。

必要な情報が集まれば、あとは配列の後ろ側から順にリンク付きのカテゴリ名を表示することで、パンくずリストを作成することができます。

パンくずリストの生成

集めたカテゴリ名とリンクを「パンくずリスト構造」に合わせて出力する

ただし、パンくずリストは自分の好きなように表示しても Google には認識されません。

パンくずリストとして認識させるためには、Google がパンくずリストとして認識できるような構造の HTML として出力してやる必要があります(今後この構造を「パンくずリスト構造」と呼びます)。

この「パンくずリスト構造」に合わせた書き方は Google の公式ページで紹介されています。

https://developers.google.com/search/docs/data-types/breadcrumb

より詳細に知りたい方は下記の schema.org のページから参照することができます。

https://schema.org/BreadcrumbList

ただこれらのページの内容は難しいので、誰でもこの「パンくずリスト構造」に合わせてパンくずリストを作成できるように解説していきたいと思います。

「パンくずリスト構造」となる書き方はいくつかありますが、ここでは「microdata」による書き方について解説します。

microdata では下記のように HTML を出力することでパンくず構造リストに合わせたパンくずリストを作成します。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

引用元:BreadcrumbList

長くて難しいように感じるかもしれませんが、ほぼコピペでオーケーです。変更が必要なのは背景に色をつけた下記の3箇所のみです。

  • 黄色背景部分:カテゴリへのリンク
  • 赤背景部分:カテゴリ名
  • 緑背景部分:ポジション番号

この3箇所のみを変更しながら <li> 〜 </li> の部分を表示したいカテゴリ数分繰り返して出力します。

リンクとカテゴリ名においてはパンくずリストに表示するカテゴリ名とリンクを集めるで配列に格納したリンクとカテゴリ名をそれぞれ取得して出力すれば良いです。

ポジション番号は、出力しようとしている <li> 〜 </li> が何個目かを出力すれば良いです。

ループの中で <li> 〜 </li> を出力するのであれば、ループ番号の変数の初期値を “1” としてループのたびにインクリメントしてやれば良いです。

/* ポジション番号をカウント */
$level = 1;

/* カテゴリ名とリンクを配列の末尾から順に出力 */
for ( $i = $list_count - 1; $i >= 0; $i-- ) {

	/* 〜略〜 */
	echo '<meta itemprop="position" content="' . $level . '" />' . "\n";
	/* 〜略〜 */

	/* ループ番号をインクリメント */
	$level++;
}

こんな感じで変更必要な箇所のみに注目し、変更不要な部分はコピペしてやれば簡単に「パンくずリスト構造」をしたパンくずリストを作成することができます。

出力した HTML がきちんと Google にパンくずリストとして認識されるかどうかは下記の Google のページから確認可能です。

参考 構造化データテストツールGoogle

「コードスニペット」タブを選択し、パンくずリストとして出力した HTML をコピペして「テストを実行」をクリックすれば結果が確認できます。

パンくずリスト構造の問題を確認

結果画面にエラーが出ていなければ成功で、コピペした HTML が Google にパンくずリストとして認識されていることが確認できます。

パンくずリスト構造確認結果

a タグの href に指定する URL が非公開のページだったりするとエラーが発生することがあるので注意してください(http://localhost:8888 だとダメだった)。

パンくずリスト作成のサンプルプログラム

最後にパンくずリストを作成するサンプルプログラムを紹介します。

パンくずリスト HTML 生成のサンプル

下記のソースコードを functions.php に追記し、

functions.php
/**
 * 検索結果ページ表示時のメインクエリを変更
 *
 * @param in $query : クエリ.
 */
function change_main_query( $query ) {
	if ( ! is_search() ) {
		return;
	}
	$query->set( 'posts_per_page', '15' );
}

add_action( 'pre_get_posts', 'change_main_query' );

/**
 * パンくずリストを表示する関数
 */
function the_breadcrumbs() {

	/* カテゴリIDを取得する */
	if ( is_single() ) {
		/* 投稿記事の場合 */

		/* その投稿記事が属するカテゴリを取得 */
		$categories = get_the_category();

		/* そのカテゴリのカテゴリIDを取得 */
		$category_id = $categories[0]->cat_ID;
	} elseif ( is_category() ) {
		/* カテゴリページの場合 */

		/* そのカテゴリのカテゴリIDを取得 */
		$category_id = get_query_var( 'cat' );
	} else {
		/* それ以外のページの場合はカテゴリIDをnullとして処理 */
		$category_id = null;
	}

	/* カテゴリ名とリンクを格納するための配列を作成 */
	$name_array = array();
	$link_array = array();

	/* カテゴリIDがnullになるまで下記をループ */
	while ( $category_id ) {

		/* カテゴリ名とリンクを取得して配列の末尾に格納 */
		$name_array[] = get_cat_name( $category_id );
		$link_array[] = get_category_link( $category_id );

		/* 親カテゴリのIDを新たなカテゴリIDとして上位を辿る */
		$category    = get_category( $category_id );
		$category_id = $category->parent;
	}

	/* 最後にトップページを表すホームとそのリンクを配列の末尾に格納 */
	$name_array[] = 'ホーム';
	$link_array[] = home_url();

	/* 表示するカテゴリの数(ホーム含む)を取得 */
	$list_count = count( $name_array );

	/* ループ番号をカウント */
	$level = 1;

	/* ここからパンくずリストをHTML出力 */

	/* microdata構造に合わせてHTML出力 */
	echo '<ol class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">' . "\n";

	/* カテゴリ名とリンクを配列の末尾から順に出力 */
	for ( $i = $list_count - 1; $i >= 0; $i-- ) {

		/* リンクとカテゴリ名を配列から取得しながら出力 */
		echo '	<li itemprop="itemListElement" itemscope' . "\n";
		echo '		itemtype="http://schema.org/ListItem">' . "\n";
		echo '		<a itemprop="item" href="' . $link_array[ $i ] . '">' . "\n";
		echo '			<span itemprop="name">' . $name_array[ $i ] . '</span>' . "\n";
		echo '		</a>' . "\n";
		echo '		<meta itemprop="position" content="' . $level . '" />' . "\n";
		echo '	</li>' . "\n";

		/* ループ番号をインクリメント */
		$level++;
	}
	echo '</ol>' . "\n";
}

さらに the_breadcrumbs 関数をテンプレートファイル(single.php や category.php など)のパンくずリストを表示したい位置で呼び出します。

下記は the_breadcrumbs 関数の呼び出し例です。

single.php
<?php
get_header();

the_breadcrumbs();

while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}
get_sidebar();
get_footer();
?>

これによりパンくずリストを表示する HTML が出力されるようになります。

パンくずリストのHTML
<ol class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope
		itemtype="http://schema.org/ListItem">
		<a itemprop="item" href="http://daeudaeu.site">
			<span itemprop="name">ホーム</span>
		</a>
		<meta itemprop="position" content="1" />
	</li>
	<li itemprop="itemListElement" itemscope
		itemtype="http://schema.org/ListItem">
		<a itemprop="item" href="http://daeudaeu.site/category/web-sight/">
			<span itemprop="name">ウェブサイト作成</span>
		</a>
		<meta itemprop="position" content="2" />
	</li>
	<li itemprop="itemListElement" itemscope
		itemtype="http://schema.org/ListItem">
		<a itemprop="item" href="http://daeudaeu.site/category/web-sight/wordpress/">
			<span itemprop="name">ワードプレス</span>
		</a>
		<meta itemprop="position" content="3" />
	</li>
	<li itemprop="itemListElement" itemscope
		itemtype="http://schema.org/ListItem">
		<a itemprop="item" href="http://daeudaeu.site/category/web-sight/wordpress/theme/">
			<span itemprop="name">テーマの作り方</span>
		</a>
		<meta itemprop="position" content="4" />
	</li>
	<li itemprop="itemListElement" itemscope
		itemtype="http://schema.org/ListItem">
		<a itemprop="item" href="http://daeudaeu.site/category/web-sight/wordpress/theme/template/">
			<span itemprop="name">テンプレートファイル</span>
		</a>
		<meta itemprop="position" content="5" />
	</li>
</ol>

またページには下記のように表示されます

パンくずリスト表示結果(CSSなし)

見た目的にはパンくずリストっぽくないですが、パンくずリスト構造に合わせて HTML を生成しているので Google にはしっかりパンくずリストとして認識されます。

パンくずリストスタイル設定のサンプル

次はもっとパンくずリストっぽく見えるように style.css でスタイル設定を行いましょう!

例えば下記のようなスタイル設定を styce.css に追記すれば、

style.css
/* パンくず全体のスタイル設定 */
.breadcrumbs  {
	background-color: #fdfddd;
	margin: 0;
	padding: 5px;
	list-style: none;
}
  
/* リストの各項目のスタイル設定 */
.breadcrumbs li {
	display: inline; /* 横に並ばせる */
	list-style: none; /* 項目先頭の "・" を消す */
	font-weight: bold;
}
  
/* リストの各項目の後ろのスタイル設定 */
.breadcrumbs li:after {
	content: ' > '; /* 項目の後ろに ' > 'を表示 */
	padding: 0 0.2em;
	color: silver;
}
  
/* リストの最後の項目のスタイル設定 */
.breadcrumbs li:last-child:after {
	content: ''; /* 最後の項目の後ろには何も表示しない */
}
  
/* リストの先頭の項目のスタイル設定 */
.breadcrumbs li:first-child a:before {
	content: '◼️'; /* 先頭にのみ '◼️' を表示 */
	font-weight: normal;
	font-size: 1.1em;
	color: #f3948f;
}

/* リンクに対するスタイル設定 */
.breadcrumbs li a {
	text-decoration: none;
	color: #888;
}
  
.breadcrumbs li a:hover {
	text-decoration: underline;
}

見た目が下記のように変化します(すぐにスタイル設定が反映されない場合はスーパーリロードしてください)。

パンくずリスト表示結果(CSSあり)

ちょっとパンくずリストっぽくなりましたね!

パンくずリストのスタイル設定に関しては下記のサルワカさんのページが詳しくて分かりやすいと思います!私もこのページを参考にして style.css を記述しました。

参考 パンくずリストとは?作り方とCSSデザインサンプル12選サルワカ

スポンサーリンク

まとめ

このページではワードプレスでパンくずリストを自作する方法について解説しました。

パンくずリストは大きく分けると下記の2つの処理により作成することが可能です。

  • パンくずリストに表示するカテゴリ名とリンクの情報を集める
  • 集めたカテゴリ名とリンクを「パンくずリスト構造」に合わせて出力する

カテゴリに対する処理などの勉強にもなりますので、ぜひこのページを参考にしていろんなパンくずリストを作ってみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.157 秒です