【WordPress】プラグインなしでパンくずリストを設置【構造化データに対応】

schema.orgでの構造化データに対応したパンくずリストです。

まずは下のコードをfunctions.phpにコピペ。

<?php
function breadcrumb() { ?>
	<nav class="breadcrumb" itemscope itemtype="//schema.org/BreadcrumbList"><ul>
		<li itemscope itemprop="itemListElement" itemtype="//schema.org/ListItem">
			<a itemprop="item" href="<?php echo home_url(); ?>" ><i class="fas fa-home"></i><span class="bread-home" itemprop="name">Home</span></a>
			<?php $count = 1; ?>
			<meta itemprop="position" content="<?php echo $count; ?>" />
			<?php $count++; ?>
		</li><?php

		// 投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
		$cats = '';
		$cat_id = '';
		if (is_single()) {
			$cats = get_the_category();
			if(isset($cats[0]->term_id)) $cat_id = $cats[0]->term_id;
		} elseif (is_category()) {
			$cats = get_queried_object();
			$cat_id = $cats->parent;
		}
		$cat_list = array();
		while ($cat_id != 0) {
			$cat = get_category($cat_id);
			$cat_link = get_category_link($cat_id);
			array_unshift($cat_list, '<a itemprop="item" href="'.$cat_link.'"><span itemprop="name">'.$cat->name.'</span></a>');
			$cat_id = $cat->parent;
		}
		foreach ($cat_list as $value): ?>
			<li itemscope itemprop="itemListElement" itemtype="//schema.org/ListItem">
				<?php echo $value; ?>
				<meta itemprop="position" content="<?php echo $count; ?>" />
				<?php $count++; ?>
			</li>
		<?php endforeach;

		// 現在のページ名を表示
		if (is_archive()) the_archive_title('<li class="bread-now">', '</li>');
		elseif (is_search()) echo '<li class="bread-now">検索 : '.get_search_query().'</li>';
		elseif (is_404()) echo '<li class="bread-now">ページが見つかりませんでした</li>'; ?>
	</ul></nav><?php
}

single.phpやarchive.phpなどの、パンくずリストを表示したい部分に以下をコピペ。

<?php breadcrumb(); ?>

デザインのサンプル↓

.breadcrumb {
    font-size: 13px;
    padding: 10px 0;
}

.breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
}

.breadcrumb li {
	margin-right: 20px;
	position: relative;
}

.breadcrumb li:not(.bread-now)::after {
    content: '>';
    position: absolute;
    top: 2px;
    right: -14px;
    font-size: 10px;
}

.breadcrumb a {
    font-weight: bold;
    color: black;
    line-height: 1.2;
}

.bread-home {
	display: none;
}

.bread-now {
    line-height: 1.2;
}

投稿ページ・固定ページでは、現在の投稿名は表示しないようにしています。

注意点としては、Font Awesomeを使用しているので、事前にFont Awesomeの読み込みが必要です。

おわり!