新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

WordPress

固定ページで階層関係&構造化データに対応したパンくずリストを表示する方法【WordPress】

2019.3.21

固定ページで階層関係&構造化データに対応したパンくずリストを表示する方法【WordPress】
WordPress 0 0

こちらの記事は、このような方におすすめです。

階層関係のある固定ページをもったWordPressサイトを制作・運営されている方

妙高Web屋LINE@ 友だち追加

WordPressのテーマの中には、パンくずリストが用意されているものも多く見かけます。

投稿では特に、カテゴリを紐づけて公開するため、「HOME>カテゴリ名>投稿タイトル」のような形式になったりします。

一方、固定ページでは原則的にカテゴリを紐づけることがないため、カテゴリ名を挟んだ形式にはなりませんが、固定ページは階層関係を持つことができますので、

「HOME>固定ページタイトル」

「HOME>親階層の固定ページタイトル>子階層の固定ページタイトル」

の両方に対応できていればベターでしょう。

また、昨今は「構造化データ」の概念も重要度を増していますので、それに対応したパンくずリストが望ましいものです。

今回の記事は、上記のそれらを満たすパンくずリストのコードをご紹介します。

この記事の目次

【結論】WordPressの固定ページで階層関係&構造化データに対応したパンくずリストを表示する方法

まずは結論から、コチラです!

<ol class="className">
 	<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="<?php bloginfo('url') ?>">
<span itemprop="name">HOME</span>
</a>
<meta itemprop="position" content="1"></li>
&lt;?php if(is_page()): ?&gt;
&lt;?php /*階層の深さを定義*/ $posiNum = 2; ?&gt;
&lt;?php foreach ( array_reverse(get_post_ancestors($post-&gt;ID)) as $parid ) { /*ループの始まり*/ ?&gt;
 	<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="<?php echo get_page_link( $parid );?>"><span itemprop="name">&lt;?php echo get_page($parid)-&gt;post_title; ?&gt;</span></a>
<meta itemprop="position" content="<?php echo $posiNum; ?>"></li>
&lt;?php /*1階層下の固定ページへ*/ $posiNum = $posiNum + 1; ?&gt;
&lt;?php } /*ループの終わり*/ ?&gt;
&lt;?php while ( have_posts() ) : the_post(); ?&gt;
 	<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<span itemprop="name">&lt;?php the_title(); ?&gt;</span>
<meta itemprop="position" content="<?php echo $posiNum; ?>"></li>
&lt;?php endwhile; ?&gt;</ol>
&lt;?php endif; ?&gt;

こちらでは(順序関係を記述するものなので)olタグでコーディングしていますが、状況に応じてはulタグでも結構ですし、pタグの中にaタグやspanタグを入れる形式でも自由です。

上記の例での[class=”className”]は、任意に変更してみてくださいね(^^)

ページの先頭へ戻る

[詳細]固定ページの回想関係の表示と構造化データのitemprop=”position”の値の設定

今回ご紹介するコードの肝の部分は、固定ページの階層関係を取得する部分にあると思います。

HOME(トップページ)は必ず最上位で、最下層の固定ページは必ず最下位ですので、その間に位置する階層の固定ページが存在する場合は、それらの情報を上から順に取得していくことになります。

先ほどご紹介したコードを一部抜粋したものが、こちらです。

&lt;?php /*階層の深さを定義*/ $posiNum = 2; ?&gt;
&lt;?php foreach ( array_reverse(get_post_ancestors($post-&gt;ID)) as $parid ) { /*ループの始まり*/ ?&gt;
 	<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="<?php echo get_page_link( $parid );?>"><span itemprop="name">&lt;?php echo get_page($parid)-&gt;post_title; ?&gt;</span></a>
<meta itemprop="position" content="<?php echo $posiNum; ?>"></li>
&lt;?php /*1階層下の固定ページへ*/ $posiNum = $posiNum + 1; ?&gt;
&lt;?php } /*ループの終わり*/ ?&gt;

上記のコードの[get_post_ancestors($post->ID)]で、現在表示している固定ページの上の階層の固定ページの情報を取得するというものだとして、それだけでは階層構造が「真逆」に表示されてしまいます。

そのため、[array_reverse(get_post_ancestors($post->ID))]とすることで、HOMEと最下層の固定ページの間の階層に固定ページが存在する場合は、それらを望む順序で取得できるようにしています。

また、[foreach構文]を使って間の階層の固定ページを表示しながら、それらの階層関係を構造化データにも設定していくのに重要な役割を果たしているのが[$posiNum]という変数です。

(※Position Numberの略として名前をつけただけなので、この変数も自由にしていただいてOKです。)

変数[$posiNum]の値が設定されるのが、metaタグの[itemprop=”position”]という属性の値(contentの部分)です。

HOMEが「1」に相当するので、階層構造が存在する場合、初期値は「2」です。

そこから、順に子階層に入っていくにしたがって「3」「4」…と値が設定されていくようになります。

そして順々に値が増加していった変数[$posiNum]は最後に、最下層の固定ページの[itemprop=”position”]の属性の値として設定されて、処理が終了します。

固定ページに階層関係が存在するWordPressサイトにおいて、それらを表示しつつ、構造化データの値も設定するために、上記のコードがお役に立てれば幸いです。

ページの先頭へ戻る

参考サイト

当記事を作成するにあたり、下記のページのアイデアを参考にさせていただきました。

ありがとうございました。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ