2015/6/22

WordPressのカスタムメニューにschema.orgを設定する方法→結論、【無理】

区切り線

WordPressのカスタムメニューにschema.orgを設定する方法→結論、【無理】

WordPressのカスタムメニューに「SiteNavigationElement」というサイトナビゲーション用のitemtypeを使ってみたくなって、実装方法を色々と調べてみました。

こんな風に出力させたい

<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
	<li itemprop="name"><a itemprop="url" href="/">HOME</a></li>
	<li itemprop="name"><a itemprop="url" href="/navi1/">NAVI1</a></li>
	<li itemprop="name"><a itemprop="url" href="/navi2/">NAVI2</a></li>
	<li itemprop="name"><a itemprop="url" href="/navi3/">NAVI3</a></li>
</ul>

極めて単純な記述です。
ただHTMLを書くだけなら造作も無いですね。

ですが、今回はWordPressにこれを組み込みたいわけです。
それも、カスタムメニューにです。つまり自動で上の記述が反映されるようにしたい。

ということで、まずはカスタムメニューの仕組みから。

実際のカスタムメニューはこうなっている

header.phpやsidebar.php、footer.phpなど、WordPressのカスタムメニューを配置する場所に次のように記載されているはずです。

<?php
wp_nav_menu(array(
	'theme_location' => 'footerNavi',
	'depth' => '1',
	'container_id' => 'footerNavi')
);
?>

使用するテーマによって多少異なるかもしれませんが、基本的にはこんな形です。

直したいけど・・・できない!

そう、できないんです。

<?php
wp_nav_menu(array(
	'theme_location' => 'footerNavi',
	'depth' => '1',
	'items_wrap' => '<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">%3$s</ul>',
	'container_id' => 'footerNavi')
);
?>

こんな風に’items_wrap’を指定してやればulにitemscopeとitemtypeまでは指定できるんですが、liやaタグに対してitempropの指定が出来ないんですね。
色々と調べてみたんですが、海外のサイトでも解決方法を見つけることができず、なんとも残念です。無理なものは無理なのです。
(もしやり方を知っている方がいたら教えてください!)

そんな時はJSON-LDで

無理と言ってしまいましたが、これはあくまでmicrodataでの話です。
JSON-LDでなら全く問題ありません。

header.phpの中の、タグの中に次のように書いてやればいいのです。

<script type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "SiteNavigationElement",
	"url": ["/","/navi1","/navi2/","/navi3/"]
}
</script>

“url”のキーに対して、Valueに複数の値を指定する「アレイ」を用います。
使い方は簡単。まず、[]で囲って、その中複数の値を指定、値ごとにカンマをつける、それだけです。
記述は相対パスで問題ないようです。

ただ、JSON-LDは現時点ではリッチスニペットに対応していません。
将来性に期待、というところでしょうか。

  • このエントリーをはてなブックマークに追加

区切り線

コメントをどうぞ

メールアドレスが公開されることはありません。