銀河鉄道

【WordPress】パンくずリストを自作する

サムネイル
パンくずリスト作る

このパンくずリストを、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

グローバル属性 の itemtype は、データ構造の中で itemprop (アイテムのプロパティ)を定義するのに使われる語彙の URL を指定します。
itemscope は itemtype が有効になるデータ構造の語彙の対象範囲を設定するために使用します。

array_reverse

要素を逆順にした配列を返す

get_ancestors

祖先オブジェクトの配列を返します。祖先オブジェクトの種類を第2引数で指定します。カスタム投稿タイプやカスタムタクソノミーの場合は第3引数も使います。

参照:
get_ancestors

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';
			}
		}
	}
}

著者

author
月うさぎ

編集後記:
この記事の内容がベストではないかもしれません。

記事一覧