tax_queryでターム毎に分類してカスタム投稿記事一覧を表示する

2013年6月24日 2018年11月16日 Wordpressカスタマイズ

タームごとに分類してカスタム投稿の記事一覧を表示する機能を実装する方法です。

まずタームごとsectionタグで分類し、記事一覧を表示させます。

タームで分類した記事一覧のイメージ

タームで分類した記事一覧のイメージ

タームごとに分かれた記事一覧のソースコード

コピペで動作します。
2~3行目のみ、それぞれタクソノミーとカスタム投稿のスラッグに書き換えます。

$taxonomy_name = 'tax_category';
$post_type = 'custom_post';

get_posts()のオプションtax_queryで絞り込みを行います。

タームを取得してループする

タームの取得にはget_terms()関数を使います。
タームの数だけsectionタグで括られた部分をforeach($taxonomys as $taxonomy):でループします。

ループ内でそのタームに属する記事を取得・表示する

タームに属する記事を取得します。
記事の取得にはget_posts()関数を使います。
取得した記事はforeach($tax_posts as $tax_post):でループします。

tax_queryが便利

get_posts()で記事を呼び出す際に、tax_queryを使うところが今回のポイント。
tax_queryは、記事の取得条件を細かく絞り込むことができる便利なパラメータです。

16~24行目でtax_queryの設定を配列で指定しています。
変数$taxonomy_nameで定義したタクソノミーに関連付けされた記事で絞り込み取得しています。
'terms' => array( $taxonomy->slug )のように配列のarray()で指定するパラメータもあります。

tax_queryのパラメータや詳しい使い方は下記を参考にしてください。

WP Query – WordPress Codex 日本語版
タクソノミーのパラメータ

コメント
  1. momosuke より:

    早速にご返信ありがとうございます。

    >termを取得するWP関数にpaged(ページ送り)のパラメータが無いため、ご希望の形での実装は厳しいかなと思います。

    なるほどそうなのですね。別の考え方で解決を図らないと駄目そうだということですね。

    >JSでスライダーやカルーセル等のかたちで表示する

    代替案をご紹介くださり、大変ありがとうございます。
    なるほどそういう考えもありますね。

    現在termには年をあてており(例えば以下のような感じ)、
    termに含まれる記事の数は一定ではなくまちまちになりそうなのですが、
    スライダーにした場合、ボックスの高さをコントロールするのが難しいでしょうか???

    2018年のおすすめ映画
     ・タイトル(個別ページへのリンクあり)
     ・タイトル(個別ページへのリンクあり)
     ・タイトル(個別ページへのリンクあり)

    2017年のおすすめ映画
     ・タイトル(個別ページへのリンクあり)
     ・タイトル(個別ページへのリンクあり)
     ・タイトル(個別ページへのリンクあり)
     ・タイトル(個別ページへのリンクあり)
     ・タイトル(個別ページへのリンクあり)
     ・タイトル(個別ページへのリンクあり)

    • ナオユ より:

      おすすめなのは「bxslider」か「sliderpro」ですねー。
      https://bxslider.com/
      http://bqworks.com/slider-pro/
      どちらもスライドさせる要素の高さが違っても自動で調整する機能がありますよ!

    • momosuke より:

      ご親切にアドバイスをくださり、大変ありがとうございましたm (_ _) m
      また試せていないのですが、うまくできましたら、またコメントさせていただきます!

  2. momosuke より:

    色々な方のサイトを参考にさせていただきながら勉強中のWP初心者です。
    実現したい形に大変近く、参考にさせていただいております。

    上記のように、タームで分類した記事一覧を作成したいのですが、
    タームが1〜20数件と複数(沢山)あり、今後も増える予定なので、ターム10〜12件ごとにページネーションでページを送って表示したいと考えております。

    方法がわからずこちらのコメント欄に質問させていただきました。
    ご教授いただけましたら大変ありがたいです。
    どうぞ宜しくお願い申し上げます。

    • ナオユ より:

      コメントありがとうございます!
      僕もすごい詳しいワケでもないのですが、持てる知識をフルに使ってご質問について返信させて頂きます。

      まず、termを取得するWP関数にpaged(ページ送り)のパラメータが無いため、ご希望の形での実装は厳しいかなと思います。
      PHPでガンガンにカスタマイズすれば、もしかしたらそれに近いことがサーバーサイドで出来るのかもですが、そこまでの技術力がありません…。

      しかし本稿のやり方だと全部のタームは出力されるので、将来タームが増えた時とても長くなってしまいますね。
      代替案で申し訳ないですが、JSでスライダーやカルーセル等のかたちで表示するのはどうでしょうか?
      jQueryプラグイン等で比較的カンタンに実装できます。

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?