WordPress自作テーマでパンくずリストを作る方法｜functions.phpで簡単カスタマイズ

14

Views

WordPress自作テーマでパンくずリストを作る方法

パンくずリストは、今どこにいるのかをユーザーに伝える重要なナビゲーション要素です。
今回は、functions.phpに関数を追加するだけで表示できるパンくずリストを、初心者向けにわかりやすく解説します。

1. functions.phpにパンくず関数を追加しよう

テーマフォルダ内の functions.php に以下のコードを追記します。

function breadcrumb() {
  echo '<nav class="breadcrumb"><ul>';

  // トップページへのリンク
  echo '<li><a href="' . home_url() . '">ホーム</a></li>';

  // 投稿ページ（single.php）またはカテゴリーページの場合
  if (is_category() || is_single()) {

    // カテゴリー情報を取得
    $cat = get_the_category();

    // 最初のカテゴリがある場合
    if (!empty($cat)) {
      echo '<li><a href="' . get_category_link($cat[0]->term_id) . '">' . $cat[0]->cat_name . '</a></li>';
    }

    // 投稿ページなら記事タイトルを追加
    if (is_single()) {
      echo '<li>' . get_the_title() . '</li>';
    }

  // 固定ページ（page.php）の場合
  } elseif (is_page()) {

    global $post;

    // 親ページがある場合、親ページへのリンクを追加
    if ($post->post_parent) {
      $parent_title = get_the_title($post->post_parent);
      $parent_link = get_permalink($post->post_parent);
      echo '<li><a href="' . $parent_link . '">' . $parent_title . '</a></li>';
    }

    // 現在のページタイトル
    echo '<li>' . get_the_title() . '</li>';

  // 検索結果ページ
  } elseif (is_search()) {
    echo '<li>検索結果: ' . get_search_query() . '</li>';

  // 404ページ
  } elseif (is_404()) {
    echo '<li>ページが見つかりませんでした</li>';
  }

  echo '</ul></nav>';
}

2. 表示させたい位置に関数を呼び出す

パンくずリストを表示したいテンプレート（例：header.php や page.php）に以下のコードを追加します。

<?php if (function_exists('breadcrumb')) breadcrumb(); ?>

3. CSSでデザインを整える（例）

パンくずリストにスタイルをつけて見やすくしましょう。

.breadcrumb ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}
.breadcrumb li + li::before {
  content: "＞";
  padding: 0 8px;
  color: #888;
}
.breadcrumb a {
  color: #0073aa;
  text-decoration: none;
}
.breadcrumb li:last-child {
  color: #555;
}

初心者が気をつけたいポイント

  • ホームリンクは必ず含めるとUXが良くなる
  • is_single()とis_page()の違いを理解して使い分けよう
  • 投稿に複数カテゴリがある場合、最初の1つだけを表示しています

おわりに

自作テーマにパンくずリストを組み込めば、ユーザーにもSEOにも優しい構造になります。 プラグイン不要なので、デザインも自由自在。ぜひ取り入れてみてくださいね！

関連記事