【WordPress】パンくずリストを自作する
記事更新日:2022-09-19


このパンくずリストを、PHPとCSSで作ってみます

投稿ページ用とカテゴリ一覧用のパンくずリスト作成

固定ページ用など、必要であれば条件分岐で追加すればOK
if (!function_exists('my_set_breadcrumb')) {
function my_set_breadcrumb() {
if (is_home() || is_admin()) return; // トップページ、管理画面では表示しない
$home = esc_url(home_url());
$str = '<nav class="(クラス名)"><ul itemscope itemtype="http://schema.org/BreadcrumbList">';
$str .= my_bread_item("ホーム", $home, "1");
if (is_single()) {
$str .= my_get_bread_single();
} elseif (is_category()) {
$str .= my_get_bread_category();
} elseif (is_tag()) {
$str .= '<li><i class="fa fa-tag"></i> タグ</li>';
} else {
$str .= '<li>' . wp_title('', false) . '</li>';
}
$str .= '</ul></nav>';
echo $str;
}
}
// パンくずリスト内の1つ1つのリンクを生成
if (!function_exists('my_bread_item')) {
function my_bread_item($name, $url, $position = "1") {
return '
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="' . $url . '" itemprop="item">
<span itemprop="name">' . $name . '</span>
</a>
<meta itemprop="position" content="' . $position . '" />
</li>';
}
}
// 投稿ページ用リスト
if (!function_exists('my_get_bread_single')) {
function my_get_bread_single() {
global $post;
$categories = get_the_category($post->ID);
if (!$categories) return '';
$cat = $categories[0];
if ($cat->parent != 0) {
$ancestors = array_reverse(get_ancestors($cat->cat_ID, 'category'));
$result = my_bread_loop($ancestors);
}
// resultにカテゴリ追加
$i = 2;
$result .= my_bread_item(esc_attr($cat->cat_name), esc_url(get_category_link($cat->term_id)), $i);
return $result;
}
}
// カテゴリ一覧用リスト
if (!function_exists('my_get_bread_category')) {
function my_get_bread_category() {
$cat = get_queried_object();
if ($cat->parent == 0) return '';
$ancestors = array_reverse(get_ancestors($cat->cat_ID, 'category'));
$result = my_bread_loop($ancestors);
return $result;
}
}
// ループでリスト生成
if (!function_exists('my_bread_loop')) {
function my_bread_loop($ancestors) {
$result = '';
$i = 2;
foreach ($ancestors as $ancestor) {
$result .= my_bread_item(esc_attr(get_cat_name($ancestor)), esc_url(get_category_link($ancestor)), $i);
$i++;
}
return $result;
}
}
itemtype
, itemprop
, itemscope
array_reverse
要素を逆順にした配列を返す
get_ancestors
祖先オブジェクトの配列を返します。祖先オブジェクトの種類を第2引数で指定します。カスタム投稿タイプやカスタムタクソノミーの場合は第3引数も使います。
esc attr
< > & ” ‘ (小なり、大なり、アンパサンド、ダブルクォート、シングルクォート) 文字参照をエンコードします
CSSでスタイリング

アイコンは、フォントオーサムで
(クラス名) {
ul {
display: flex;
list-style: none;
li {
display: flex;
a {
color: #9e9c9c;
}
&::before,
&::after {
padding: 0 6px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 14px;
color: rgba(0, 0, 0, 0.2);
}
&:first-child::before {
content: '\f5da';
}
&:not(:last-child)::after {
content: '\f0da';
}
}
}
}
2022-09-19
編集後記:
この記事の内容がベストではないかもしれません。
記事一覧
-
Xserverの引っ越し 【WordPress】XserverからXserverへの引っ越し|サーバー統合 -
bodyタグに任意のクラス名 【WordPress】bodyに任意のクラス名を付ける -
クラス名を変数でechoする 【WordPress】クラス名を変数にしてechoする -
内部リンクのピンバック防止 【WordPress】内部リンクを貼ったときのコメント自動送信を防ぐ|functions.phpに記述 -
ブロックエディタのひな形を作る 【WordPress】ブロックエディタ新規作成|npmでひな形を作る手順 -
キャッチ画像を自動設定 【WordPress】カテゴリごとにキャッチ画像を設定する