WordPressのパンくずリストの作り方とカスタマイズ

WordPressでパンくずリストを実装する方法と、リンク先のカスタマイズ方法について解説します。

基本的なパンくずリストの実装

まず、breadcrumb.phpを作成し、以下のようなコードを実装します：

<nav class="breadcrumb mx-auto py-1r">
  <ul class="breadcrumb-wrapper">
    <!-- トップページへのリンク -->
    <li><a href="<?php echo do_shortcode('[tophomeurl]'); ?>/"><i></i>トップ</a></li>

    <?php if (is_single() && get_post_type() === 'post') : ?>
      <!-- 通常の投稿ページ -->
      <li><a href="<?php echo do_shortcode('[tophomeurl]'); ?>/posts/">投稿一覧</a></li>
      <li><a href="<?php echo do_shortcode('[tophomeurl]'); ?>/category/<?php echo do_shortcode('[cat_slug]'); ?>/">
        <?php echo do_shortcode('[cat_name]'); ?>
      </a></li>
      <li class="current_page_item"><a>
        <?php echo wp_strip_all_tags(do_shortcode('[title]'), false); ?>
      </a></li>

    <?php elseif (is_singular() && !is_page() && get_post_type() !== 'post') : ?>
      <!-- カスタム投稿ページ -->
      <li><a href="<?php echo do_shortcode('[tophomeurl]'); ?>/category/<?php echo do_shortcode('[cat_slug]'); ?>/">
        <?php echo do_shortcode('[cat_name]'); ?>
      </a></li>
      <li class="current_page_item"><a>
        <?php echo wp_strip_all_tags(do_shortcode('[title]'), false); ?>
      </a></li>

    <?php else : ?>
      <!-- 固定ページなど -->
      <?php
      //先祖 → 親の順に並べ替え
      $ancestors_ids = array_reverse(get_post_ancestors($post));
      //繰り返しで先祖ページ名を表示
      foreach ($ancestors_ids as $ancestors_id) {
        echo '<li><a href="' . get_page_link($ancestors_id) . '">';
        echo wp_strip_all_tags(get_page($ancestors_id)->post_title, false);
        echo '</a></li>';
      }
      ?>
      <li class="current_page_item"><a>
        <?php echo wp_strip_all_tags(do_shortcode('[title]'), false); ?>
      </a></li>
    <?php endif; ?>

  </ul>
</nav>

このコードにより、以下のような階層構造が表現されます：

• 投稿ページの場合：
  • トップ > 投稿一覧 > カテゴリー名1 > 記事タイトル
• カスタム投稿の場合：
  • トップ > カスタム投稿一覧 > カテゴリー名2 > 記事タイトル

固定ページの親子関係を判定するコード（functions.php）

function page_is_ancestor_of($slug) {
  global $post;
  $page = get_page_by_path($slug);
  $result = false;

  if (isset($page) && is_object($post) && isset($post->ancestors)) {
    foreach ((array)$post->ancestors as $ancestor) {
      if ($ancestor == $page->ID) {
        $result = true;
      }
    }
  }

  return $result;
}

カテゴリーのリンク先をカスタマイズ

カテゴリーのリンク先を変更したい場合、WordPressのリライトルールを使用します。functions.phpに以下のコードを追加します：

function custom_rewrite_rules() {
    $rules = [
        'category/cat-name-1/?$' => 'posts/category1/',
        'category/cat-name-2/?$' => 'posts/category2/',
        'category/cat-name-3/?$' => 'posts/category3/'
    ];

    foreach ($rules as $regex => $redirect) {
        add_rewrite_rule(
            $regex,
            $redirect,
            'top'
        );
    }

    flush_rewrite_rules();
}
add_action('init', 'custom_rewrite_rules');

これにより、以下のようなURL変換が行われます：

• /category/cat-name-1/ → /posts/category1/
• /category/cat-name-2/ → /posts/category2/
• /category/cat-name-3/ → /posts/category3/

タイトルのHTMLタグ処理

記事タイトルにHTMLタグが含まれている場合（例：<br>タグによる改行など）、パンくずリストでは表示を1行にまとめたい場合があります。

そのような場合はwp_strip_all_tags()関数を使用します：

echo wp_strip_all_tags(do_shortcode('[title]'), false);

この関数の第2引数について：

• true: 改行を空白に変換
• false: 改行をそのまま保持

通常の記事タイトルでは実際の改行文字（\n、\r、\r\n）は含まれないため、falseを指定するだけで十分です。

まとめ

1. パンくずリストは、ユーザーの現在位置を示す重要なナビゲーション要素です
2. WordPressの条件分岐タグを使用して、適切な階層構造を表現できます
3. リライトルールを使用することで、URLの構造をカスタマイズできます
4. wp_strip_all_tags()を使用することで、タイトルのHTMLタグを適切に処理できます

リライトルールを使用する場合は、パーマリンク設定の更新が必要になることがあるので注意してください。