先日、ブログのテーマを新しく作り直し、パンくずリストを追加したところ、エラーが出てきました。

エラー内容は「data-vocabulary.orgスキーマのサポートは終了します」とのこと。

なので、Schema.orgタイプのパンくずリストを生成してくれるコードを探しましたが、求めているものが見つかりませんでした。そこで調べ方を変えて、英語で検索すると良いコードがあったのでシェアしようと思います。

そのコードを入れれば、以下のページでパンくずリストを表示することができます。

パンくずリストを検索すると一部ページにしか適応してないものが多いのですが、こちらを使えば、ブロガーさんが使いそうなページはだいたい網羅できるかと思います。

ぜひ使ってみてください。

※自分が試した範囲でしか、このコードのことは分からないので、トラブル等の対応はできませんので、使う前に必ずバックアップ等を行なっておくようにしてください。

生成されるHTML

コードを導入すると、このようなHTMLが生成されるようになります。

html
<div id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
	<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a class="breadcrumbs__link" href="https://boxkristen.com/" itemprop="item">
			<span itemprop="name">HOME</span>
		</a>
		
	<meta itemprop="position" content="1" /></span>
	<span class="breadcrumbs__separator"> ＞ </span>
	
	<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a class="breadcrumbs__link" href="https://boxkristen.com/category/test-cat/" itemprop="item">
		<span itemprop="name">テストカテゴリー</span>
	</a>
	<meta itemprop="position" content="2" /></span>
	<span class="breadcrumbs__separator"> ＞ </span>
	
	<span class="breadcrumbs__current">テストページタイトルテストページタイトルテストページタイトル</span>
</div><!-- .breadcrumbs -->

コード

まず、こちらのコード配布元サイトを開いてください。開いてスクロールすると「WordPress breadcrumbs function」という見出しを見つけることができると思います。そこに今回必要なコードが記載してあります。

パンくずリストを入れたいところに下記コードをコピペ

パンくずリストを入れたいところに<?php dimox_breadcrumbs(); ?>をコピーペーストしてください。

single.phpのほか、archive.phpなど、色々入れられるところがあると思います。

functions.phpにコードをコピペ

元のサイトの目次「WordPress breadcrumbs function」のところにあるGitHubのコードを、functions.phpにコピーペーストしてください。

画像の文字小さくてすみません！！！！

CSS

上記のコードを入れると、こんなふうに表示がされると思います。

私なりに、見た目を最低限整えたCSSをこちら（↓）においておきます。好きに変えたり、そのまま使ったりなんでもしてください。

css
#breadcrumbs {
	font-size: 14px;
	color: #909090;
	}

#breadcrumbs a {
	text-decoration: none;
	color: #909090;
}

解説（私が修正をしたところのみ）

※真似する場合は、必ずバックアップをとってから作業をしてください。

こちらでは、私が自分のブログに適応させるにあたり、コードをいじった部分の内容、解説を書いています。php自体の解説ではなく、見た目とか、文言とかを変更するためだけなので、ご了承ください。

修正1：各ページのパンくずリストの英語表記の文言を削除

コードを貼り付けて、自分が持っているページをいろいろ飛んでみると、いくつか「必要ないかな？日本語に修正したい人はしたほうがいいかな？」というものがあります。

それは、コードの中の10行目から18行目にあたる内容の一部です。

ここでは、パンくずリストに表示される特定のページでの文字が設定されています。

11行目の”home”は、パンくずリストの先頭の「Home」の表記を変えることができます。

他の、”category”、”search”などは、それぞれ「カテゴリー」「検索結果ページ」で抽出されるパンくずリストの表記です。

例えば、元”category”一覧ページを開いたときのパンくずリストは

Home＞Archive by Category ●●●●（カテゴリー名）

このような表示になります。

私はこの”Archive by Category“が個人的には必要ないかと思ったので、自分が使っているコードではこの文言を削除しています。

同じようにみていくと、”search”、”tag”、”author”、”404″、”page”、”cpage”、それぞれに文字が書いてありますよね。

なので、必要なかったり、書き換えたい場合はここをさわればOKです。

ただし、”%s”という文字列はパンくずリストで該当のカテゴリー名、タグ名などを表示するものなので、消さないようにしましょう。

修正2：パンくずリストの仕切りを変更

このパンくずリストを設置すると、パンくずリストの仕切りはこの「>」半角の記号です。

私は個人的に、全角の「＞」が好きなので、ここを変更しました。

変更する場所は22行目の”>”のところです。

“/”や、その他Font Awesomeを使いたい場合はこのあたりをさわればOKです。いろいろ好きなものを試してみてください。

おわり

今まであまりコード関連を英語で調べたことがありませんが、今回のことがあったので、分からない時は英語で調べてみようと思いました。

誰かの参考になれば幸いです。

何より、コードを作ってくれたhttp://dimox.net/の方には感謝しかありません。