コピペで使える「WordPress固定ページ」にリッチスニペットを用いたパンくずリストの作り方

こちらのカスタマイズ例は「data-vocabulary.org スキーマ」を利用したものになります。「data-vocabulary.org」は、2020年4月6日をもってGoogleでのサポートが終了します。
今後は「schema.org タイプ」のものが推奨されているので、詳しくはこちらを参照してください。
WordPressでschema.org構造化データに対応したパンくずリストの作り方【固定ページ用】

以前、リッチスニペットを用いた「カテゴリ用のパンくずリストの作り方」は以下に書きました。

[WordPress]SEO的にもちょびーっとだけ有利なリッチスニペットを用いたパンくずリストの作り方

こちらのカスタマイズ例は「data-vocabulary.org スキーマ」を利用したものになります。「data-vocabulary.or...

nelog.jp

2020-01-23 13:58

パンくずリストは、投稿ページのカテゴリなどで使用するのがほとんどだとは思います。しかし、固定ページも「ページ属性」で「親」を設定できるので、階層構造になることもあり、パンくずリストを作成することができます。

今回は、そんな固定ページのパンくずリストを、リッチスニペットを用いて作る方法です。

パンくずリストとは

とその前に、「パンくずリストって？」という方のために説明です。

パンくずリストとは、サイトの階層をユーザーが把握して移動できるようにするための一連のリンク（パンくず）です。

このブログで言えば、ページ上部にあるこんなやつのことです。

これを書くことで読者に現在の位置を把握してもらうことができます。

それとともに、Googleの検索結果に以下のように表示されるので、検索ユーザーにも、ページ内容がさらにわかりやすく伝わります。

ちなみに、パンくずリストが設定されていないページの場合は以下のように、ただのURLで表示されます。

このようなGoogleにも認識してもらいやすいパンくずリストを設定するには、リッチスニペット使って構造化マークアップすることが Googleでも紹介されています。（普通に作成するだけでもGoogleはパンくずリストとして読み取ってくれることもありますが、リッチスニペット使った方が確実です。）

参考リッチスニペット – パンくずリスト – ウェブマスターツールヘルプ

まとめるとこんな感じです。

ユーザーの読んでいるページの位置がわかりやすい
検索結果でもわかりやすい
リッチスニペットを用いれば、よりGoogleに構造を伝えやすい

このような利点から、パンくずリストを作成します。

コピペで使えるパンくずリストの作り方

今回行う主な作業手順は以下です。

テンプレートから手軽に呼び出せるようにbreadcrumbs-page.phpを作成する
パンくずリストのコードを書く（コピペ）
breadcrumbs-page.phpをテンプレートとして呼び出す（コピペ）
style.cssでスタイルを整える（コピペ）

1つファイルを作成して、3回コピペすれば、作成できます。

breadcrumbs-page.phpファイルの作成

テーマディレクトリ内にテンプレートとなるbreadcrumbs-page.phpファイルを作成します。

作成したら、ファイルを開いて、以下をコピペします。

<?php //固定ページ用のパンくずリスト ?>
<div id="breadcrumb" class="breadcrumb-page">
  <?php $count = 0; 
  $per_ids = array_reverse(get_post_ancestors($post->ID)); ?>
  <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="<?php echo home_url(); ?>" itemprop="url"><span itemprop="title">ホーム</span></a><?php echo (count($per_ids) == 0) ? '' : '&nbsp;&gt;&nbsp;' ?></div>
  <?php foreach ( $per_ids as $par_id ){
    $count += 1;?>
    <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="<?php echo get_page_link( $par_id );?>" itemprop="url"><span itemprop="title"><?php echo get_page($par_id)->post_title; ?></span></a><?php echo (count($per_ids) == $count) ? '' : '&nbsp;&gt;&nbsp;' ?></div>
  <?php } ?>
</div><!-- /#breadcrumb -->

基本的にそのままコピペで使えますが、細かい調整は好みに合わせてコードを書き換えてください。

【固定ページのパンくずソース参考】

パンくずリストの追加方法 -WordPressの投稿・固定ページ対応-｜ThePresentNote

WordPressテーマから呼び出す

あとはpage.php等のテンプレート内から、以下のコードを用いてパンくずリスト（breadcrumbs-page.phpファイル）を呼び出します。

<?php get_template_part('breadcrumbs-page'); ?>

スタイルシートの記入

最後にstyle.cssなどに以下のスタイルを書き込んで終了です。

/************************************
** パンくずリスト（Breadcrumb）
************************************/
#breadcrumb{
  margin-bottom: 20px;
  color:#777;
  font-size:13px;
}
 
div#breadcrumb div {
  display: inline;
}
 
#breadcrumb span.sp{
  margin:0 10px;
}
 
#breadcrumb a{
  text-decoration:none;
  color:#777;
}

作成される固定ページのパンくずリスト

例えば以下のような階層の固定ページがあったとします。

HOME > News > Our Staff > Employment Opportunities

これを、先程編集した固定ページのパンくずリストを用いてWordpressに表示させると、以下のようになります。

これのHTMLソースは、以下のようになります。

<div id="breadcrumb" class="breadcrumb-page">
  <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
    <a href="http://127.0.0.1:4001/wordpress" itemprop="url">
      <span itemprop="title">ホーム</span>
    </a>&nbsp;&gt;&nbsp;
  </div>
  <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
    <a href="http://127.0.0.1:4001/wordpress/news/" itemprop="url">
      <span itemprop="title">News</span>
    </a>&nbsp;&gt;&nbsp;
  </div>
  <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
    <a href="http://127.0.0.1:4001/wordpress/news/our-staff/" itemprop="url">
      <span itemprop="title">Our Staff</span>
    </a>
  </div>
</div>
<!-- /#breadcrumb -->