get_categories:WordPressのタームを一覧で出して、さらに該当の投稿を出力する

2017/07/15

(更新日:2023/10/19

get_categories:WordPressのタームを一覧で出して、さらに該当の投稿を出力する

WordPressサイトのTOPページなどで良くある処理の、指定タクソノミーのタームを一覧で出して、各タームに紐付いている投稿を出力する処理です。

▼このような形の出力

処理の記述

処理の内容は、get_categoriesでカテゴリー一覧を出力して、それをキーとしてWP_Queryを使い各タームに含まれる投稿を出力していきます。

WordPressのループのオプション、tax_queryを上手く使うと色んな出し方ができますね。

    <div class="box-section category-section">
<?php
$taxonomy = 'category';
$args = array('taxonomy' => $taxonomy);
$taxs = get_categories($args);
if($taxs):
  foreach ($taxs as $tax):
?>
      <section class="box-category">
        <h2 class="ttl-index"><?php echo esc_html($tax->name); ?></h2>
        <div class="box-loop">
          <div class="inner-loop">
<?php
    $args = array(
      'post_type' => 'post',
      'posts_per_page' => 5,
      'tax_query' => array(
        array(
          'taxonomy' => $taxonomy,
          'field' => 'slug',
          'terms' => $tax->slug
        ),
      )
    );
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()):
?>
            <ul>
<?php
      while ( $the_query->have_posts() ) : $the_query->the_post();
?>
              <li><a href="<?php the_permalink(); ?>" class="cfx">
                <?php if( get_the_post_thumbnail() ) { ?>
                <div class="post-thumbnail">
                  <?php the_post_thumbnail(array(120, 120)); ?>
                </div>
                <?php } ?>
                <p class="text"><?php echo the_title(); ?></p>
              </a></li>
<?php
      endwhile;
?>
            </ul>
<?php
    endif;
    wp_reset_query();
?>
          </div><!-- .inner-loop -->
        </div><!-- .box-loop -->
      </section>
<?php
  endforeach;
endif;
?>
    </div>