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

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

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

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

/**
 * 検索結果ページ表示時のメインクエリを変更
 *
 * @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";
}

<?php
get_header();

the_breadcrumbs();

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

<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>

/* パンくず全体のスタイル設定 */
.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;
}