ワードプレスのパンくずリストをdata-vocabulary.orgからschema.orgの書き方に換える

グーグルからまた警告メールが来ました。

「パンくずリスト」の問題が新たに検出されました」という内容で警告文は以下のもの。

data-vocabulary.org schema deprecated

こんだけなんだけど、何を言ってるかというと

パンくずリストのスクリプトでdata-vocabulary.orgを使った構造化データのマークアップをしているが、それはもう古くなったんで対応しないよ。新しいものに替えなさい。

ていう事なんですって。
こんなメールね。

具体的にどんな問題なのかというと「google検索結果ページにパンくずリストが表示されないよ」って事なんです。

検索結果の記事タイトルの上に小さくパンくずリストが表示されているんですが、これが出なくなるっていう問題ですね。

これは出て欲しい！

そういう事で今回はワードプレスのパンくずリストのスクリプトをdata-vocabulary.orgからschema.orgの書き方に換える方法を調べました。

（注：PHPやワードプレスについて知識のある方向けの記事です。基礎的な説明はありません。）

目次（見たい所へGO！）

作業工程
パンくずリストの該当ファイルを探す。
スクリプト中から該当場所を見つける
data-vocabulary.orgからschema.orgの書き方に換える
構造化データのテスト
参考資料

作業工程

パンくずリストの該当ファイルを探す
スクリプト中から該当場所を抜きだす
data-vocabulary.orgからschema.orgの書き方に換える
構造化テストツールでテストする

パンくずリストの該当ファイルを探す。

うちの場合、ワードプレスを使っているのでテーマファイルを書き直す事になるわけです。

って事でテーマを見ていきます。

まずはパンくずリストを生成している箇所を探さなくちゃいけないので、ヘッダーページ、固定ページ、個別投稿ページなどテンプレートを見ていってパンくずリストのスクリプトが書かれているファイルを探します。

まずは個別投稿 (single.php)で見つかりました。

あと、
固定ページ(page.php)
アーカイブ (archive.php)にもありました。

うちのサイトで使っているテーマだとこの３ファイルのようです。

スクリプト中から該当場所を見つける

パンくずリストに該当する部分のphpスクリプトを見つけて、

それを元に出力されたHTMLの該当場所も見つける。

両方を比べて確認する。

個別投稿 (single.php)でみてみます。

●パンくずリストに該当するPHPスクリプト

<div id="breadcrumb">
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo home_url(); ?>" itemprop="url">
			<span itemprop="title">ホーム</span>
		</a> > 
	</div><!--/  -->
	<?php $postcat = get_the_category(); ?>
	<?php $catid = $postcat[0]->cat_ID; ?>
	<?php $allcats = array($catid); ?>
	<?php 
	while(!$catid==0) {
		$mycat = get_category($catid);
		$catid = $mycat->parent;
		array_push($allcats, $catid);
	}
	array_pop($allcats);
	$allcats = array_reverse($allcats);
	?>
<?php foreach($allcats as $catid): ?>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
	<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
	</a> > 
	</div>
<?php endforeach; ?>
</div><!--/ #breadcrumb -->

●出力されたパンくずリストのHTML

<div id="breadcrumb">
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="https://stray-light.info/wp/" itemprop="url">
		<span itemprop="title">ホーム</span> 
	</a> > 
</div>
	<!--Loopスタート --> 	
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> 
	<a href="https://stray-light.info/wp/category/php/" itemprop="url">
		<span itemprop="title">PHP</span>
	</a> > 
</div>
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> 
	<a href="https://stray-light.info/wp/category/php/wordpress" itemprop="url">
		<span itemprop="title">WordPress</span>
	</a> > 
	</div>	<!--Loopエンド --> 
</div><!--/ #breadcrumb -->

PHPスクリプトから出力されるdata-vocabulary.org方式で書かれたパンくずリストのHTMLが確認出来ました。

data-vocabulary.orgからschema.orgの書き方に換える

さあ、それでは構造化データのマークアップをdata-vocabulary.orgからschema.orgの書き方に換えてみますよ。

schema.orgにするとこれらの属性の記述が変化します。

・itemscope
・itemtype
・itemprop

そしてパンくずリスト階層のブロックごとに
<meta itemprop=”position” content=”1″>
これが新たに付いて「content」の数値が順次増加していきます。

<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
		<a href="https://stray-light.info/wp/" itemprop="item">
			<span itemprop="name">ホーム</span>
		</a> > 
		<meta itemprop="position" content="1">
</div><!--/  -->
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
		<a href="https://stray-light.info/wp/category/php/" itemprop="item">
			<span itemprop="name">PHP</span>
		</a> > 
		<meta itemprop="position" content="2">
</div>
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
		<a href="https://stray-light.info/wp/category/php/wordpress/“ itemprop="item">
			<span itemprop="name">WordPress</span>
		</a> > 
		<meta itemprop="position" content="3">
</div>

こんなHTMLになればいいわけです。

次はこのように変更されたHTMLを出力出来るようにPHPスクリプトを書きます。

<div id="breadcrumb"><?php $count = 0;/*順次増加していく<meta>のcontentの数値用*/ ?>
	<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a href="<?php echo home_url(); ?>" itemprop="item">
			<span itemprop="name">ホーム</span>
		</a>&gt; 
		<meta itemprop="position" content="1" />
	</div><!--/  -->
	<?php $postcat = get_the_category(); ?>
	<?php $catid = $postcat[0]->cat_ID; ?>
	<?php $allcats = array($catid); ?>
	<?php 
	while(!$catid==0) {
		$mycat = get_category($catid);
		$catid = $mycat->parent;
		array_push($allcats, $catid);
	}
	array_pop($allcats);
	$allcats = array_reverse($allcats);
	?>
	<?php foreach($allcats as $catid): ?><?php $count += 1; ?>
	<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a href="<?php echo get_category_link($catid); ?>" itemprop="item">
			<span itemprop="name"><?php echo get_cat_name($catid); ?></span>
		</a> > 
		<meta itemprop="position" content="<?php echo $count + 1; ?>" />
	</div>
	<?php endforeach; ?>
</div>

こんな感じですね。

「content」の数値が順次増加していくように
変数「$count」を作りました。