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

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

パンくずリストで問題が検出されました

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

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

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

スポンサーリンク
レクタングル(大)広告

カスタマイズの主な手順

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

  1. パンくずリストを表示したい箇所にPHPコードを貼り付ける
  2. 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;
}

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

動作確認

固定ページでの表示はこんな感じになります。

固定ページのパンくずリスト表示

テストテーマはWordPress公式テーマの「Twenty Seventeen」です。

なので、大抵のテーマであれば問題なく動作するとは思います。おそらく。

構造化データ

構造化データテストツールで試すと、「BreadcrumbList」として表示されます。

構造化データテストツールの検出結果

詳細を見ても問題はないようです。

固定ページパンくずリストの構造化データテストチェック結果

まとめ

上記のような方法で、「固定ページ」でもパンくずリストをschema.orgタイプで表示させることができます。

投稿・カテゴリページ用と同様に、コピペで出来るので、作業だけでいえば、そこまで難しいカスタマイズでもないかと思います。

無料WordPressテーマのSimplicity、Cocoonとも最新バージョンではschema.org形式になっているため、カスタマイズの必要はありません。