DESIGN BLOGデザイン事務所の制作ブログ

【WordPress】クエリパラメータURLでカテゴリー絞り込み記事の一覧を表示させる方法

株式会社BMB

記事ループを作る時のカテゴリーやタクソノミーでの絞り込み例

記事の絞り込み方はいくつかありますが、BMBではカスタム投稿タイプを多用するため、以下の方法を使用しています。通常投稿タイプでも使い回しています。

以下は、投稿タイプが「food」、カテゴリー(タクソノミー)「フルーツ」、タグ「セール中(タグっぽく使うがこれもタクソノミー)」で絞り込みしている状態での設定です。

表示中のページURLが「https://●●●●.com/blog/?food_cate=フルーツ&food_tag=セール中」の例

<?php $food_cate= get_query_var('food_cate');$food_tag = get_query_var('food_tag');?>
<?php $args=array('posts_per_page'=>99,'post_type'=>'food','orderby'=>'date','food_cate'=>$food_cate,'food_tag'=>$food_tag,);?>
<?php $posts = get_posts($args);if($posts){?>
<ul class="list-blog">
<?php foreach($posts as $post):setup_postdata($post);?>
<li>
<b class="title"><?php the_title(); ?></b>
<span class="txt"><?php bmb_excerpt(200); ?></span>
</li>
<?php endforeach;?><?php wp_reset_postdata();?>
</ul>
<?php }else{?><p class="not-found">記事がまだ投稿されていません</p>
<?php }?>
ポイント:get_query_var

3行目の「get_query_var」でクエリパラメータ(URL末尾のヤツ)から絞り込み条件を取得し、「get_posts」に条件として渡しています。
カスタム投稿タイプでは、上記のように自分でつけたタクソノミースラッグ(ここではfood_cateやfood_tag)をマークアップしていますが、
通常投稿タイプの場合は、get_query_var('category_name')とし、$args内は「'category_name'=>$category_name」のようにします。

これでURLについているクエリパラメータ絞り込み条件に合致したarchive表示をすることができます。

株式会社ビーエムビー

株式会社ビーエムビー

〒114-0031 東京都北区十条仲原1-4-8 商店街会館311 TEL&FAX:03-5948-5996

東京都北区のWEBやDTP(印刷物)のデザイン制作会社です。ホームページ制作やLP(ランディングページ)の作成、ECサイト(楽天ストアなど)の構築などのWEBデザイン、チラシ・ポスター・名刺・パンフレット・看板などの印刷物デザインに対応しています。お客様の業務形態や用途に合わせたwordpressによるCMSサイトをフルスクラッチにて構築することが可能です。お気軽にお問い合わせください。

その他の制作ブログ一覧

LINEスタンプを制作しました。たくさんのイラスト作画が大変でしたが、とても楽しい作業で納品まであっという間でした。 LINEスタンプ制作のご依頼を頂きました。 兵庫県三木市で彫刻刀の老舗メーカーとしてたくさんの彫刻刀を製造販売しているクライアントさんです。以前にホームページ制作をさせていただいたご縁からいろんなお仕事をご依頼いただいています。 そんな中でもLINEスタンプ制作のご相談をいただきました。クライアントさんのマスコットキャラクターをLINEスタンプにしたいとのこと。 何度かやったことのある仕事で… イラスト制作illustratorphotoshop
【jQuery】slideToggleを使って要素をクリックで要素を表示・非表示させる 「Q&A」などでよく使われる、クリックすると詳細が表示される、アコーディオンメニュー。この記事では、そのアコーディオンメニューを、jQueryのslideToggleというメソッドを使って作成する方法をご紹介します。 1、slideToggleの使用例 まずはjsの記述について <script> $(function($){ $('ul.qa li .question'… TECHNICWEB制作javascriptjQuery
一覧に戻る