ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

WordPressでパンくずリストをカスタマイズする方法 + リッチリザルト対応

WordPressでパンくずリストをカスタマイズする方法 + リッチリザルト対応

「パンくずリストについて知りたい」
「WordPressでリッチリザルトに対応したパンくずリストを表示させたい」

悩み

こういった悩みにお答えします。

目次
  1. パンくずリスト とは
  2. WordPressでパンくずリストをカスタマイズする方法
    1. コード
    2. 表示
  3. まとめ

パンくずリスト とは

パンくずリストは、現在見ているWebページが、そのWebページが属するWebサイトのトップページからどの位置にあるかを階層順に表示するリストです。
Webサイトのサイト構造がわかりやすくなり、検索ロボットも回遊しやすくなるのでSEOの効果も高くなります。

リッチリザルトに対応することで、Google検索結果でパンくずリストが表示されるようになります。

リッチリザルトについては、こちらの記事で紹介しています。

【SEO】リッチリザルト・構造化データの使い方

SEO対策に重要なリッチリザルト・構造化データについて知りたいですか?この記事では、ローカルビジネスで使えるリッチリザルト・構造化データ、テストツール、用語について紹介しています。ぜひご覧ください。

余談ですが、パンくずというのは、グリム童話『ヘンゼルとグレーテル』で道に迷わないようにパンを置いていったという話が由来です。
パンくずリストはWebサイトで迷子にならないようにトップページへ戻る順番を示しています。

POINT
パンくずリストはユーザビリティだけでなくSEOでも重要!

WordPressでパンくずリストをカスタマイズする方法

コード

functions.phpに以下のコードを記述します。

ページ構成によっては追加が必要です。

if( !function_exists('breadcrumb') ){
	function breadcrumb(){
		global $post;

		$post_type = get_post_type( $post );

		//取得用
		$breadcrumb = array();

		if( !is_front_page() || !is_home() ){
			$breadcrumb[] = array("item" => home_url(), "name" => "TOP");

			if( is_page() ){
				$page = get_post( get_the_ID() );
				$title = $page->post_title;

				if( $post->post_parent ){
					$breadcrumb[] = array("item" => get_page_link($post->post_parent), "name" => get_the_title($post->post_parent));
					$breadcrumb[] = array("item" => "", "name" => $title);

				}else{
					$breadcrumb[] = array("item" => "", "name" => $title);

				}

			}elseif( is_post_type_archive() ){
				$title = get_post_type_object($post_type)->labels->name;
				$slug = get_query_var("post_type");

			if(is_date()){
				$year = get_query_var('year');
				$month = get_query_var('monthnum');

			if( is_year() ){
				$date = $year . "年";

			}elseif( is_month() ){
				$date = $year . "年" .$month. "月";
			}

			$breadcrumb[] = array("item" => home_url($slug), "name" => $title);
			$breadcrumb[] = array("item" => "", "name" => $date);

			}else{
				$breadcrumb[] = array("item" => "", "name" => $title);

			}

			}elseif( is_tax() ){
				$title = get_post_type_object($post_type)->labels->name;
				$slug = get_post_type_object($post_type)->name;

				$taxonomy = (get_query_var('taxonomy'));
				$term = get_query_var('term');
				$term_name = get_term_by( 'slug', $term, $taxonomy)->name;

				$breadcrumb[] = array("item" => home_url($slug), "name" => $title);
				$breadcrumb[] = array("item" => "", "name" => $term_name);

			}elseif( is_singular() ){
				$title = get_post_type_object($post_type)->labels->name;
				$slug = get_post_type_object($post_type)->name;

				$breadcrumb[] = array("item" => home_url($slug), "name" => $title);

				$title = get_the_title();
				$breadcrumb[] = array("item" => "", "name" => $title);

			}elseif( is_search() ){
				$title = $_GET["s"];

				$breadcrumb[] = array("item" => "", "name" => "検索結果:" . $title);

			}
		}

		//表示用
		$bc = "";
		$bc .= '<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">'."\n";

		$content = 0;
		foreach ($breadcrumb as $val)	{
			$content++;

			$bc .= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">' . "\n";

			if( $val["item"] ){
				$bc .= '<a href="'.$val["item"].'" itemprop="item">' . "\n";
			}
				$bc .= '<span itemprop="name">'.$val["name"].'</span>' . "\n";
				$bc .= '<meta itemprop="position" content="'. $content .'">' . "\n";

			if( $val["item"] ){
				$bc .= '</a>' . "\n";
			}

			$bc .= '</li>' . "\n";
		}

		$bc .= '</ol>' . "\n";

		return $bc;
	}
}

各ページの情報取得用に$breadcrumbという配列にURLと表示名を格納していきます。

$breadcrumbの情報を、出力用に$bcにHTMLタグを格納します。

表示

表示させたい場所(header.php、footer.php)に以下をコピペします。

<?php
	echo breadcrumb();
?>

デザインの都合で、header.phpやfooter.phpにコピペするとうまくデザインを再現できない場合は、page.phpやsingle.phpなどにコピペします。
この場合、ページを表示するテンプレートファイルすべてにコピペしないといけないので忘れないように注意が必要です。

まとめ

WordPressでパンくずリストをカスタマイズする方法を紹介しました。

パンくずリストが無いデザインがときどきありますが、SEOやユーザビリティを考慮するのであれば、Webサイト、ブログには必ず設置するようにしてください。