WordPressの固定ページでパンくずリストを自動生成する

今回やりたいこと

大量に固定ページを作成して、且つ親子階層が深いページが多いサイトの場合、パンくずリストを親子階層で自動生成できたら便利ですよね。

もちろん静的に作成して、流し込みエリアにパンくずリストのタグを埋め込むのももちろん問題ないです。

ですが、URLとパンくずリストが必ずイコールになる自動生成、個人的には設定しておくと非常に便利だと思うので、今回はその方法を紹介します。

手順

まずはパンくずを生成する関数をfunctions.phpにて定義します。

パンくずを埋め込みたい部分に関数を定義します。今回は固定ページのテンプレート(page.php)に埋め込みます。

もちろんデフォルトテンプレートではないテンプレートにも同じ関数を埋め込めばパンくずが自動生成されます。

functions.php

まずはfunctions.phpに以下のように記述します。


// パンくずリスト自動生成
if (!function_exists('custom_breadcrumb')) {
function custom_breadcrumb($wp_obj = null)
  {
  // トップページは対象外
  if (is_home() || is_front_page()) return false;
  //そのページのWPオブジェクトを取得
  $wp_obj = $wp_obj ?: get_queried_object();
  echo '<div class="">' . //id名などは任意で
    '<ul class="l-breadcrumb">' .           //class名は任意で
      '<li class="l-breadcrumb__item">' .
        '<a href="' . home_url() . '"><span>TOP</span></a>' .
        '</li>';
      if (is_attachment()) {
      /**
      * 添付ファイルページ ( $wp_obj : WP_Post )
      * ※ 添付ファイルページでは is_single() も true になるので先に分岐
      */
      echo '<li class="l-breadcrumb__item"><a href="' . home_url() . '">' . $wp_obj->post_title . '</a></li>';
      } elseif (
      is_page()
      ) {
      /**
      * 固定ページ ( $wp_obj : WP_Post )
      */
      $page_id = $wp_obj->ID;
      $page_title = $wp_obj->post_title;

      // 親ページがあれば順番に表示
      if ($wp_obj->post_parent !== 0) {
      $parent_array = array_reverse(get_post_ancestors($page_id));
      foreach ($parent_array as $parent_id) {
      echo '<li class="l-breadcrumb__item">' .
        '<a href="' . get_permalink($parent_id) . '">' . get_the_title($parent_id) .
          '</a>' .
        '</li>';
      }
      }
      // 投稿自身の表示
      echo '<li class="l-breadcrumb__item"><a href="' . home_url() . '">' . $page_title . '</a></li>';
      } elseif (
      is_post_type_archive()
      ) {
      /**
      * 投稿タイプアーカイブページ ( $wp_obj : WP_Post_Type )
      */
      echo '<li class="l-breadcrumb__item"><a href="' . home_url() . '">' . $wp_obj->label . '</a></li>';
      }
      echo '</ul>
  </div>'; // 冒頭に合わせて閉じタグ
  }
}

liタグやaタグに付与するclass名は、必要に応じて変更してください。

静的に組んだhtmlタグを上記コードと置き換えていくと良いかと思います。

page.php

実際にパンくずリストを埋め込む部分に以下のように記述します。


<?php custom_breadcrumb(); ?>

これで完成です。htmlをそのまま埋め込みたいテンプレートには関数を使わずにそのままタグを埋め込む、なんてこともできるので、必要に応じて使い分けるとよいと思います。

大量の固定ページを量産する場合は是非この方法使ってみてください。

related article

2019/10/21 WordPress

カスタムタクソノミーをチェックボックスで表示させる

2020/06/29 WordPress

WordPressの投稿記事のタイトルの文字数を制限する

2019/10/21 WordPress

Warning: count():のエラー解決策

2020/09/10 WordPress

the_dateタグは使えない