WordPressで手軽に導入！プラグインなしのパンくずリスト表示方法

wordpress 2024/01/31

1 functions.phpにコードを追加
2 スタイルを追加する
3 テンプレートファイルに関数を呼び出す
4 最後に

WordPressのサイトにおいて、ユーザーナビゲーションを向上させるためにパンくずリストは非常に重要です。しかし、プラグインを使用せずに手軽に実装する方法はご存知でしょうか？今回はWordPressでプラグインなしにパンくずリストを表示する手順をご紹介します。

functions.phpにコードを追加

パンくずリストを表示するための関数をfunctions.phpに追加します。
下記コードの「 > 」についてはブラウザが正しく解釈するためにも「 > 」などのエンティティに変換してください。

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

  if (!is_home()) {
    echo '<a href="' . home_url() . '">ホーム</a> > ';

    // カテゴリページまたは単一投稿ページの場合
    if (is_category() || is_single()) {
      echo the_category(' > ');  // カテゴリを表示
      if (is_single()) {
        echo ' > ' . get_the_title();  // 投稿のタイトルを表示
      }
    }
    // 固定ページの場合
    elseif (is_page()) {
      echo the_title();  // 固定ページのタイトルを表示
    }
    // タグページの場合
    elseif (is_tag()) {
      echo single_tag_title('', false);  // タグのタイトルを表示
    }
    // 404エラーページの場合
    elseif (is_404()) {
      echo 'ページが見つかりません';
    }
    // 検索結果ページの場合
    elseif (is_search()) {
      echo '検索結果';
      echo ' > "' . get_search_query() . '"';  // 検索クエリを表示
    }
  }

  echo '</div>';
}

スタイルを追加する

必要に応じて、スタイルを追加してデザインを調整します。

.breadcrumb {
  margin: 10px 0;
  font-size: 14px;
}

.breadcrumb a {
  text-decoration: none;
  color: #007bff;
}

.breadcrumb a:hover {
  text-decoration: underline;
  color: #0056b3;
}