WordPressでプラグインを使わずにパンくずリストを表示させるには、テーマのfunctions.phpファイルにカスタムコードを追加し、テンプレートファイルにパンくずリストを表示するコードを埋め込む必要があります。以下に、その手順を説明します。
目次
WordPressでプラグインを使わずにパンくずリストを表示
1. functions.phpファイルにパンくずリスト用の関数を追加
まず、テーマのfunctions.phpファイルに以下のコードを追加します。このコードは、パンくずリストを生成するカスタム関数です。
function custom_breadcrumb() {
// ホームのURLを取得
$home_url = home_url('/');
echo '<nav class="breadcrumb">';
echo '<a href="' . $home_url . '">ホーム</a>';
if (is_category() || is_single()) {
// カテゴリページとシングルページ
echo " > ";
the_category(' > ');
if (is_single()) {
echo " > ";
the_title();
}
} elseif (is_page()) {
// 固定ページ
echo " > ";
echo the_title();
} elseif (is_search()) {
// 検索結果ページ
echo " > 検索結果: ";
echo get_search_query();
} elseif (is_404()) {
// 404ページ
echo " > 404 エラー";
} elseif (is_tag()) {
// タグページ
echo " > タグ: ";
single_tag_title();
} elseif (is_author()) {
// 著者アーカイブページ
echo " > 著者: ";
the_author();
} elseif (is_date()) {
// 日付アーカイブページ
if (is_day()) {
echo " > ";
the_time('Y年m月d日');
} elseif (is_month()) {
echo " > ";
the_time('Y年m月');
} elseif (is_year()) {
echo " > ";
the_time('Y年');
}
} elseif (is_archive()) {
// その他のアーカイブページ
echo " > アーカイブ";
}
echo '</nav>';
}2. パンくずリストを表示させるテンプレートファイルに関数を追加
次に、パンくずリストを表示させたいテンプレートファイル（header.phpやsingle.php、page.php、archive.php、tag.phpなど）に以下のコードを追加します。このコードは、先ほど追加した関数を呼び出してパンくずリストを表示します。
<?php if (function_exists('custom_breadcrumb')) custom_breadcrumb(); ?>CSSでパンくずリストのスタイルを調整
パンくずリストが適切に表示されるように、CSSでスタイルを調整します。例えば、以下のようなCSSをstyle.cssに追加します。
.breadcrumb {
font-size: 14px;
margin: 10px 0;
}
.breadcrumb a {
color: #0073aa;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb span {
margin: 0 5px;
}この手順で、WordPressのタグページやアーカイブページでもパンくずリストを表示させることができます。functions.phpファイルにカスタム関数を追加し、必要なテンプレートファイルにその関数を呼び出すコードを追加することで、全てのページで統一したパンくずリストを実現できます。必要に応じて、さらにカスタマイズして機能を拡張することも可能です。
パンくずリストの機能を拡張
1. ホームリンクのカスタマイズ
ホームリンクのテキストやアイコンをカスタマイズできます。
$home_link = '<a href="' . $home_url . '"><i class="fa fa-home"></i> ホーム</a>';
echo $home_link;2. カスタム投稿タイプの対応
カスタム投稿タイプのパンくずリストを追加できます。
elseif (is_singular('your_custom_post_type')) {
echo " > ";
echo '<a href="' . get_post_type_archive_link('your_custom_post_type') . '">' . post_type_archive_title('', false) . '</a>';
echo " > ";
the_title();
}3. 階層構造の追加
固定ページが親ページを持っている場合、その階層を表示できます。
elseif (is_page()) {
if ($post->post_parent) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) {
echo $crumb . ' > ';
}
}
echo the_title();
}4. カスタムタクソノミーの対応
カスタムタクソノミー用のパンくずリストを追加できます。
elseif (is_tax('your_taxonomy')) {
$term = get_queried_object();
echo " > ";
echo '<a href="' . get_term_link($term) . '">' . $term->name . '</a>';
}5. パンくずリストの最後の項目に現在のページを表示
パンくずリストの最後の項目に現在のページ名を表示する場合、リンクにしないようにすることもできます。
function custom_breadcrumb() {
// ホームのURLを取得
$home_url = home_url('/');
echo '<nav class="breadcrumb">';
echo '<a href="' . $home_url . '">ホーム</a>';
if (is_category() || is_single()) {
echo " > ";
the_category(' > ');
if (is_single()) {
echo " > <span>";
the_title();
echo "</span>";
}
} elseif (is_page()) {
if ($post->post_parent) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) {
echo $crumb . ' > ';
}
}
echo '<span>' . get_the_title() . '</span>';
} elseif (is_search()) {
echo " > <span>検索結果: " . get_search_query() . "</span>";
} elseif (is_404()) {
echo " > <span>404 エラー</span>";
} elseif (is_tag()) {
echo " > <span>タグ: ";
single_tag_title();
echo "</span>";
} elseif (is_author()) {
echo " > <span>著者: ";
the_author();
echo "</span>";
} elseif (is_date()) {
if (is_day()) {
echo " > <span>";
the_time('Y年m月d日');
echo "</span>";
} elseif (is_month()) {
echo " > <span>";
the_time('Y年m月');
echo "</span>";
} elseif (is_year()) {
echo " > <span>";
the_time('Y年');
echo "</span>";
}
} elseif (is_archive()) {
echo " > <span>アーカイブ</span>";
}
echo '</nav>';
}
