WordPressの高度なカスタマイズ⑥　カスタム分類のナビゲーションをつくってみる

こんにちは。fsです。
これまではカスタム分類という新しいカテゴリーをつくってきました。
※参考記事はこちら
↓↓↓↓↓↓↓

Wordpressの高度なカスタマイズ⑤　カスタム分類をつくってみる

これまではカスタム投稿タイプという新しいコンテンツを表示させるためのページをつくってきました。実際に使ってみると、「投稿ページみたいに分類できるようにしたい！」といったニーズが出てきます。そんなわけで、今回はカスタム分類をつくっていきたいと思います。

fsfuyuto.com

2021.12.22

ショップページなどでは、

「つくった分類（カテゴリー）をユーザーが選べるようにしたい！」

といったニーズが出てくるのはよくあることです。

そんなわけで、今回はつくったカスタム分類をナビゲーションとして表示させていきたいと思います。
仕上がりのイメージはこんな感じです。

それではご覧ください。

ナビゲーションの表示

それでは早速つくっていきます。
ジャンルのタイトルがあるので、その上に表示させていこうと思います。

以下のような手順になります。

1. get_termsという関数を使って分類を取得
2. foreachで分類一覧を表示させ、ulタグで囲む
3. liタグに各ジャンル名とリンクを引っ張りechoで表示
4. endforeachで表示を終え、ulタグで閉じて完了

コードはこのようになります。

	<main id="primary" class="site-main col-md-8">
	   <h2 class="mb-0">ショップ</h2>
	　　<?php $terms = get_terms('genre'); ?>
		<ul class="nav">
			<?php foreach ($terms as $term): ?>
				<li class="nav-item"><a class="nav-link" href="<?php echo get_term_link($term);?>"><?php echo esc_html($term->name); ?></a></li>
			<?php endforeach; ?>
		</ul>

        <h3 class="mt-2"><?php the_archive_title();?></h3>

ページを表示させてみるとジャンルごとに選べるようになっていますね。

これでカスタム分類のナビゲーションは完了です。
あとはお好みに合わせ、cssでレイアウトを調整していけばOKです。

まとめ

いかがだったでしょうか。

カスタム分類のナビゲーションは、

つくった分類を取得→foreachをulタグで囲む→echoで表示

これだけの手順でつくれます。

簡単なコードで実装できるので、Wordpressでショップページなどをつくりたい方はぜひ試してみてください。

今回は以上です。
最後までお読みいただきありがとうございました。

簡単操作！MacBookでWordpressテーマをつくってみる！