【Breadcrumb NavXT】タイトル・リンク・階層などを取得できる動的タグまとめ|WordPress

「Breadcrumb NavXT」は、WordPressでパンくずリストを簡単に表示できるプラグインとなり、プラグインの設定画面では、表示するパンくずリストによって、HTMLテンプレートをカスタマイズできます。

今回は、そのHTMLテンプレート内で利用できる、表示中のパンくずリストの項目により変化する「動的タグ」のまとめとなります。

Breadcrumb NavXTの動的タグまとめ

以下、Breadcrumb NavXTの動的タグのまとめとなります。

タイトルを取得|%htitle%

%htitle%  は、パンくずの項目のページタイトルを返します。

esc_attr()でエスケープされたタイトルを取得|%title% 

%title%  は、パンくずの項目のesc_attr()でエスケープされたページタイトルを返します。ページタイトルを属性値にする場合に利用します。

URLリンクを取得|%link%

%link% は、パンくずの項目のページURLリンクを返します。

1つ以上の文字列を取得|%type%

%type%は、パンくずの項目によって1つ以上の文字列を返します。classの属性値などで利用します。

階層を取得|%position%

%position%は、パンくずの項目の階層を返します。

aria-current="page" を付与|bcn-aria-current

現在のページのパンくずの項目に対して、aria-current="page" を付与します。その他のパンくずの項目では空文字となります。

aria-currentは、WAI-ARIAで定義されている属性となり、パンくずなどで現在位置を表します。

動的タグの利用例

以下は、Breadcrumb NavXTのパンくずリストのHTMLテンプレートで、上記動的タグの一部を利用した例となります。

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a itemprop="item" href="%link%"><span itemprop="name">%htitle%</span></a><meta itemprop="position" content="%position%" /></li>

HTMLテンプレート内で、属性を利用できない場合

Breadcrumb NavXTのデフォルト設定では、パンくずリストのHTMLテンプレート内で、属性を利用できないHTMLタグ(liタグなど)があります。

そのようなHTMLタグに対して属性を許可する方法については、以下のリンク先を参考にしてみてください。

構造化データについて

上記のHTML内では構造化データを利用しています。構造化データについては以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。