tax_queryでタームごとに分類し投稿記事の一覧を実装する方法

2013年6月24日 2022年12月26日 Wordpress

この記事では、タームごとに分類してカスタム投稿の記事一覧の作り方を紹介します。

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

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

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

タームごとに分類して記事一覧を表示するPHPコード

とりあえずはコピペでも動作するはずなので、テーマの好きなところへ貼り付けてみましょう。
必ずバックアップはしてくださいね!

<?php
    $taxonomy_name = 'tax_category'; // タクソノミーのスラッグ名を入れる
    $post_type = 'custom_post'; // カスタム投稿のスラッグ名を入れる
    $args = array(
        'orderby' => 'name',
        'hierarchical' => false
        );
    $taxonomys = get_terms( $taxonomy_name, $args);
 
    if(!is_wp_error($taxonomys) && count($taxonomys)):
        foreach($taxonomys as $taxonomy):
        $url = get_term_link($taxonomy->slug, $taxonomy_name);
        $tax_posts = get_posts( array(
            'post_type' => $post_type,
            'posts_per_page' => 5, // 表示させたい記事数
            'tax_query' => array(
                array(
                    'taxonomy' => $taxonomy_name,
                    'terms' => array( $taxonomy->slug ),
                    'field' => 'slug',
                    'include_children' => true,
                    'operator' => 'IN'
                    )
                )
            ));
            if( $tax_posts ) {
?>
    <section>
        <h3 id="<?php echo esc_html($taxonomy->slug); ?>"><a href="<?php echo $url; ?>"><?php echo esc_html($taxonomy->name); ?></a></h3>
        <ul>
            <?php foreach($tax_posts as $tax_post): ?>
            <li><a href="<?php echo get_permalink($tax_post->ID); ?>"><?php echo get_the_title($tax_post->ID); ?></a></li>
            <?php endforeach; wp_reset_postdata(); ?>
        </ul>
    </section>
<?php
            }
        endforeach;
    endif;
?>

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

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

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

記事の取得にはget_posts()関数を使い、オプションのtax_queryで各タームに属する記事を取得しています。

取得した個別の記事は、foreach($tax_posts as $tax_post):でループし<li>タグで括られてタイトルが表示されます。

tax_queryが便利

get_posts()で記事を呼び出す際に、tax_queryを使うところが今回のポイント。

tax_queryは、記事の取得条件を細かく絞り込むことができる便利なパラメータです。

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

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

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

この記事へのコメント
  1. ノワイエ より:

    こんにちわ。
    複数のtarmを含む記事一覧の中で
    アドバンスカスタムフィールドで入力した値を表示したいのですが、うまく行きません。
    ご教授頂けないでしょうか(;;)

  2. momosuke より:

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

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

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

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

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

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

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

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

    • ナオユ より:

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

    • momosuke より:

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

  3. momosuke より:

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

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

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

    • ナオユ より:

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

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

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

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)