パンくずリスト(ショートコード)

パンくずリスト(ショートコード)

Breadcrumb NavXT などのプラグインを使えば簡単に設置できるんだけど、ショートコードの方が自分に必要なものだけ書けるしカスタマイズも容易なので…

下記コードを breadcrumb_list.php として保存。

<?php
/** パンくずリスト **/
if (!function_exists('my_breadcrumb_list')) :
function my_breadcrumb_list($atts, $content = null)
{
   ob_start();
   $atts = shortcode_atts(array(
      'home'  => false,
      'title' => false,
   ), $atts);

   if (empty($content) && !($content === 0 || $content === "0"))
      $content = 'HOME';

   if (strcmp($content, '%home%') == 0)
      $content = get_bloginfo('name');

   $home  = '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
   $home .= '<a href="' . esc_url(get_bloginfo('url')) . '" itemprop="item">';
   $home .= '<span itemprop="name">' . esc_html($content) . '</span></a><meta itemprop="position" content="1"></li>';

   echo '<ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">';

   /** カテゴリページ **/
   if (is_category()) {
      $cat = get_queried_object(); // 表示ページの WP_Term オブジェクトを取得
      $current_cat_name = $cat->name;
      $cat_id = $cat->parent; // 親カテゴリID
      $cat_list = array();
      while ($cat_id != 0) {
         $cat      = get_category($cat_id); // WP_Term オブジェクトを取得
         $cat_link = get_category_link($cat_id);
         array_unshift($cat_list, array('cat_name' => $cat->name, 'cat_link' => $cat_link));
         $cat_id = $cat->parent;
      }

      echo $home;
      $i = 2;
      foreach ($cat_list as $value) {
         $html  = '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
         $html .= '<a href="' . esc_url($value['cat_link']) . '" itemprop="item">';
         $html .= '<span itemprop="name">' . esc_html($value['cat_name']) . '</span></a>';
         $html .= '<meta itemprop="position" content="' . $i . '"></li>';
         echo $html;
         $i++;
      }
      echo '<li>' . esc_html($current_cat_name) . '</li>';
   }

   /** アーカイブ・タグページ **/
   else if (is_archive()) {
      $titleParts = explode(': ', get_the_archive_title());
      $title = $titleParts[1] ?? $titleParts[0];
      echo $home;
      echo '<li>' . $title . '</li>';
   }

   /** 投稿ページ **/
   else if (is_single()) {
      $post = get_queried_object(); // 表示ページの WP_Post オブジェクトを取得
      $tax_slug = array_keys(get_the_taxonomies())[0];
      $cat  = get_the_terms($post->ID, $tax_slug); // WP_Term[] を取得
      $cat_id = (isset($cat[0]->term_id)) ? $cat[0]->term_id: 0;
      $cat_list = array();
      while ($cat_id != 0) {
         $cat      = get_term($cat_id); // WP_Term オブジェクトを取得
         $cat_link = get_term_link($cat_id);
         array_unshift($cat_list, array('cat_name' => $cat->name, 'cat_link' => $cat_link));
         $cat_id = $cat->parent;
      }

      $i = 1;
      if ($atts['home']) { // HOME を表示する
         $i = 2;
         echo $home;
      }

      foreach ($cat_list as $value) {
         $html  = '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
         $html .= '<a href="' . esc_url($value['cat_link']) . '" itemprop="item">';
         $html .= '<span itemprop="name">' . esc_html($value['cat_name']) . '</span></a>';
         $html .= '<meta itemprop="position" content="' . $i . '"></li>';
         echo $html;
         $i++;
      }
      if ($atts['title']) the_title('<li>', '</li>'); // 現在のページを表示する
   }

   /** 固定ページ **/
   else if (is_page()) {
      echo $home;
      the_title('<li>', '</li>');
   }

   /** 404ページ **/
   else if (is_404()) {
      echo $home;
      echo '<li>ページが見つかりません</li>';
   }

   echo "</ul>";
   return ob_get_clean();
} // END my_breadcrumb_list

add_shortcode('breadcrumb', 'my_breadcrumb_list');
endif;

ファイル構成が下記の場合

├ functions.php
└ fnc
   └ breadcrumb_list.php

functions.php に下記を追加

/** パンくずリスト **/
get_template_part('fnc/breadcrumb_list');

バグ修正

2024.08.04 アーカイブページでエラーがでるバグほか修正しました

使い方

ショートコードブロックまたはカスタムHTMLブロックなどに [breadcrumb] と書きます。後は css で…

ul.breadcrumb {
   font-size: 1em;
}

.breadcrumb li {
   display: inline;
}

.breadcrumb li + li:before {
   content: " > ";
}

投稿ページで HOME を表示する場合は [breadcrumb home=true] 、タイトルを表示する場合は [breadcrumb title=true] とします。(自己完結型)

HOME の表示を変更したいときは囲み型で [breadcrumb]ホーム[/breadcrumb] のようにします。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です