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

Wordpress

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

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

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

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

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

このようにカスタム分類をナビゲーションとして表示させていきます

それではご覧ください。

ナビゲーションの表示

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

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

  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テーマをつくってみる!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 5 人中 5 人がこの 投稿 は役に立ったと言っています。

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました