0%

Programmingプログラミングナレッジ

Posted:2019.02.01

WordPressの固定ページでシンプルなパンくずリストをプラグインなしで実装する

パンくずリストは大規模で深い階層を持つサイトなどでは有用なナビゲーションになりますが、WordPressなどの動的にページ生成される場合に実装するのは少し面倒だったりします。プラグインなどもあるのですが、カスタマイズするのであれば自前で揃えたほうが何かと都合がいいケースもあります。

 

そこで、ちょうど先日クライアントワークのWordPress案件でパンくずリストを実装する機会があり、その時に使ったコードを備忘録として残しておきたいと思います。今回は投稿やカスタム投稿、カスタム分類は対象外ですが、固定ページの部分には使えるかと思います。

 

まずはfunctions.phpに固定ページに対して、親ページを持つかどうかをチェックする関数を下記のように用意します。親ページがある場合には、親ページの投稿IDを返すようにしています。

【functions.php】

function is_subpage() {
  global $post;
  if ( is_page() && $post->post_parent ) {
    return $post->post_parent;
  } else {
    return false;
  }
}

 

そして、固定ページのテンプレートにパンくずリストを実装していきます。ここでの仕様ですが、最下層以外のページはタイトルとパーマリンクを、最下層のページはタイトルのみを出力させるようにします。下記のようにコードを記述します。

【page.php】

<ul>
  <li><a href="<?php echo home_url(); ?>">サイトトップ</a>&nbsp;&gt;&nbsp;
  </li>
  <?php
    $postId = $post->ID;
    $parentPostArry = array_reverse(get_post_ancestors($post));
    if(is_subpage()):
  ?>
    // 2階層目以下の下層ページの場合は階層数だけ繰り返し、ページタイトルとリンクを出力
    <?php foreach($parentPostArry as $parentsPostId): ?>
      <li><a href="<?php echo get_permalink($parentsPostId); ?>"><?php echo get_the_title($parentsPostId); ?></a>&nbsp;&gt;&nbsp;
      </li>
    <?php endforeach; ?>
    <?php echo get_the_title($postId); ?>
  <?php else: ?>
    // 1階層目の下層ページの場合は繰り返さずに出力
    <?php the_title(); ?>
  <?php endif; ?>
</ul>

 

このパンくずリストはループ外でも使用できるようにする想定です、まずはグローバルの$post変数を参照し、固定ページが持つ親ページの投稿IDを「get_post_ancestors()」関数を使って配列形式で取得します。デフォルトでは直近の順番になるので「array_reverse()」で配列の順番を逆にして、先祖側からに並び替えます。そしてfunctions.phpで用意しておいた、固定ページが親ページを持っているかで分岐させます。親ページがない場合には、そのまま下層ページのタイトルを出力させます。

 

次に、foreachで先ほどの配列から値である親ページの投稿IDをループさせていきます。パーマリンクの取得には「get_permalink()」を、ページタイトルには「get_the_title()」を使って、引数にはそれぞれループで取り出した親ページの投稿IDを入れていきます。そして最後に、現在の下層ページのタイトルを出力させるようにします。

 

上記のコードによって、実際にHTMLとして出力されると下記のようなイメージなります。

【HTML】

<ul>
  <li><a href="https://example.com">サイトトップ</a>&nbsp;&gt;&nbsp;
  </li>
  <li><a href="https://example.com/page1/">1階層目の下層ページ</a>&nbsp;&gt;&nbsp;
  </li>
  <li><a href="https://example.com/page1/page2/">2階層目の下層ページ</a>&nbsp;&gt;&nbsp;
  </li>
  <li><a href="https://example.com/page1/page2/page3/">3階層目の下層ページ</a>&nbsp;&gt;&nbsp;
  </li>
  <li><a href="https://example.com/page1/page2/page3/page4/">4階層目の下層ページ</a>&nbsp;&gt;&nbsp;
  </li>
  <li>5階層目の下層ページ
  </li>
</ul>

 

CSSなどでインラインスタイルする必要はありますが、ブラウザで表示させるとこのような横並びで階層がわかるナビゲーションに仕上がります。

サイトトップ > 1階層目の下層ページ > 2階層目の下層ページ > 3階層目の下層ページ > 4階層目の下層ページ > 5階層目の下層ページ

 

いかがでしょうか、ちょっとした簡易サイトの場合であれば、このように自前で用意したほうが簡単かもしれませんね。今回は固定ページで使えるものですが、また別の機会に投稿ページやカスタム投稿、カスタム分類に対応したバージョンも作ってみたいと思います。

 

(参考にさせて頂いたサイト)
関数リファレンス/is page
親情報を取得するget_post_ancestors() と get_ancestors() の違い [WordPress]

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】