【WordPress・コピペ簡単】Schema.orgのパンくずリストをプラグインなしで導入する方法(海外サイトで発見)

先日、ブログのテーマを新しく作り直し、パンくずリストを追加したところ、エラーが出てきました。
エラー内容は「data-vocabulary.orgスキーマのサポートは終了します」とのこと。

なので、Schema.orgタイプのパンくずリストを生成してくれるコードを探しましたが、求めているものが見つかりませんでした。そこで調べ方を変えて、英語で検索すると良いコードがあったのでシェアしようと思います。
そのコードを入れれば、以下のページでパンくずリストを表示することができます。
- カテゴリーアーカイブ
- タグアーカイブ
- 日毎のアーカイブ
- 月毎のアーカイブ
- 年毎のアーカイブ
- 著者のアーカイブ
- カスタム投稿のページ
- 記事のページ
- 画像・添付ページ
- 検索結果ページ
- 404エラーページ
パンくずリストを検索すると一部ページにしか適応してないものが多いのですが、こちらを使えば、ブロガーさんが使いそうなページはだいたい網羅できるかと思います。
ぜひ使ってみてください。
※自分が試した範囲でしか、このコードのことは分からないので、トラブル等の対応はできませんので、使う前に必ずバックアップ等を行なっておくようにしてください。
生成される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/の方には感謝しかありません。