WordPressでschema.org構造化データに対応したパンくずリストを書く方法【固定ページ用】

先日（2020年1月22日未明）、以下のようなメールがGoogle Search Consoleから届きました。

詳細は以下を参照してください。

WordPressでschema.org構造化データに対応したパンくずリストの作り方【投稿・カテゴリー用】

先日（2020年1月22日未明）、以下のようなメールがGoogle Search Consoleから届きました。パンくず...

nelog.jp

2020-01-27 21:57

以下では、「Google Search Consoleで警告やエラーの出ない固定ページ用のパンくずリスト」についてのカスタマイズ方法です。

カスタマイズの主な手順

カスタマイズの主な手順はこちら。

パンくずリストを表示したい箇所にPHPコードを貼り付ける
CSSでスタイリングする

基本コピペのみで行えるカスタマイズになるかと思います。

パンくずリストを表示したい箇所にPHPコードを貼り付ける

まずは、WordPressのパンくずリスト表示したい箇所に以下のコードを貼り付けます。

<?php //カテゴリ用のパンくずリスト
/**
 * 固定ページ用のパンくずリスト
 * @author: わいひら
 * @link: https://nelog.jp/schema-org-breadcrumblist-for-page
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */

//パンくずリストを表示するとき
if ( !is_front_page() ): //個別ページでパンくずリストを表示する場合
$root_text = 'ホーム';
?>
<div id="breadcrumb" class="breadcrumb breadcrumb-page" itemscope itemtype="https://schema.org/BreadcrumbList">
  <?php $count = 0;
  $per_ids = array_reverse(get_post_ancestors($post->ID));
    ?><span class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="<?php echo esc_url(get_home_url()); ?>" itemprop="item"><span itemprop="name"><?php echo esc_html($root_text); ?></span></a><meta itemprop="position" content="1" /><?php echo (count($per_ids) == 0) ? '' : '<span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span>' ?></span>
  <?php foreach ( $per_ids as $par_id ){
    $count += 1;
    $page = get_post($par_id);
    $post_title = $page->post_title;
    ?><span class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-file-o fa-fw" aria-hidden="true"></span><a href="<?php echo esc_url(get_page_link( $par_id ));?>" itemprop="item"><span itemprop="name"><?php echo esc_html($post_title); ?></span></a><meta itemprop="position" content="<?php echo $count + 1; ?>" /><?php echo (count($per_ids) == $count) ? '' : '<span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span>' ?></span>
  <?php } ?>
</div><!-- /#breadcrumb -->
<?php endif; ?>

HTMLタグを直書きしている部分に改行を入れると余計な余白が入るので、改行を取り除いてあります。

上記は、Font Awesome4を利用することを前提としています。Font Awesome4を利用する場合は、以下のタグをheadタグ内で呼び出す必要があります。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

アイコンフォントを使用しない場合は、アイコンフォントタグ部分を「>」等のテキストに書き換えるかしてください。

Font Awesome5を使用する場合は、書式を変更してください。

CSSでスタイリングする

次に以下のCSSをテーマ（子テーマ）のstyle.cssに追記します。

/************************************
** パンくずリスト（Breadcrumb）
************************************/
.breadcrumb{
  margin-bottom: 20px;
  color: #777;
  font-size:13px;
}

.breadcrumb .sp{
  margin:0 10px;
}

.breadcrumb a{
  text-decoration:none;
	color:#777;
	margin-left: 2px;
}

色や余白等は、好みで調整してください。