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

妙高Web屋

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

WordPress

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

2019.3.21 2019.3.4

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

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

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

妙高Web屋LINE@ 友だち追加

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

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

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

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

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

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

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

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

この記事の目次

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

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

  1. HOME
  2. <?php if(is_page()): ?> <?php /*階層の深さを定義*/ $posiNum = 2; ?> <?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { /*ループの始まり*/ ?>
  3. <?php echo get_page($parid)->post_title; ?>
  4. <?php /*1階層下の固定ページへ*/ $posiNum = $posiNum + 1; ?> <?php } /*ループの終わり*/ ?> <?php while ( have_posts() ) : the_post(); ?>
  5. <?php the_title(); ?>
  6. <?php endwhile; ?>
<?php endif; ?>

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

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

ページの先頭へ戻る

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

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

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

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

<?php /*階層の深さを定義*/ $posiNum = 2; ?>
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { /*ループの始まり*/ ?>
 	
  • <?php echo get_page($parid)->post_title; ?>
  • <?php /*1階層下の固定ページへ*/ $posiNum = $posiNum + 1; ?> <?php } /*ループの終わり*/ ?>

    上記のコードの[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で購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ