CHIPS

制作チップス

WordPressで最近記事の一覧を表示する方法 – WP_Queryでの出力方法

2025年6月13日

カテゴリー: 制作チップス

WP_Queryでの出力方法

基本的な使い方

特定のカテゴリ(news, event)を対象に、特定のカテゴリ(ID 2)を除外して記事一覧を表示

<ul>
<?php
$args = array(
  'post_type'        => 'post',
  'posts_per_page'   => 10,
  'category_name'    => 'news,event',
  'category__not_in' => array(2),
  'orderby'          => 'date',
  'order'            => 'DESC',
);

$the_query = new WP_Query($args);

if ($the_query->have_posts()):
  while ($the_query->have_posts()) : $the_query->the_post();
?>
  <li>
    <span><?php the_time('Y年m月d日'); ?></span>
    <?php
    $cat = get_the_category();
    if (!empty($cat)) {
      $cat_name = esc_html($cat[0]->cat_name);
      $cat_slug = esc_attr($cat[0]->slug);
      echo '<span class="' . $cat_slug . '">' . $cat_name . '</span>';
    }
    ?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  </li>
<?php
  endwhile;
else:
?>
  <li>投稿が見つかりませんでした。</li>
<?php
endif;
wp_reset_postdata();
?>
</ul>

カテゴリ名にリンクを付けたい場合

<?php
$cat_link = get_category_link($cat[0]->term_id);
echo '<a href="' . esc_url($cat_link) . '" class="' . $cat_slug . '">' . $cat_name . '</a>';
?>

実用例

投稿一覧を取得し、「アイキャッチ・タイトル・公開日・更新日」を表示。
アイキャッチがないときはダミー画像を表示する。

<?php
$args = array(
  'post_type'      => 'post',
  'posts_per_page' => 12,
);
$the_query = new WP_Query($args);
?>

<?php if ($the_query->have_posts()): ?>
  <ul>
    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>">
          <div class="post_thumbnail">
            <?php if (has_post_thumbnail()): ?>
              <?php the_post_thumbnail('medium'); ?>
            <?php else: ?>
              <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/damyimage.jpg"
                   width="400"
                   height="350"
                   alt="<?php echo esc_attr(get_the_title()); ?>">
            <?php endif; ?>
          </div>

          <h2 class="post_title"><?php the_title(); ?></h2>

          <p class="post_date">
            <span class="release_date">
              公開日 | 
              <time datetime="<?php echo esc_attr(get_the_time('Y-m-d')); ?>">
                <?php echo get_the_time('Y年m月d日'); ?>
              </time>
            </span>

            <?php if (get_the_time('Y.m.d') != get_the_modified_date('Y.m.d')): ?>
              <span class="update_date">
                最終更新日 | 
                <time datetime="<?php echo esc_attr(get_the_modified_date('Y-m-d')); ?>">
                  <?php echo get_the_modified_date('Y年m月d日'); ?>
                </time>
              </span>
            <?php endif; ?>
          </p>
        </a>
      </li>
    <?php endwhile; ?>
  </ul>
<?php else: ?>
  <p>まだ投稿がありません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

アイキャッチ画像がない場合、投稿記事の最初の画像を代替えで表示することもできます。

WordPressで記事の公開日や更新日を取得する方法はこちらをどうぞ。

カスタム投稿タイプ

カスタム投稿タイプ shop をカスタム分類(タクソノミー)shop_category の中から特定のターム(cafe, super)で絞り込んで取得する場合

<ul>
<?php
$args = array(
    'post_type'      => 'shop',
    'posts_per_page' => 10,
    'tax_query'      => array(
        array(
            'taxonomy' => 'shop_category',
            'field'    => 'slug',
            'terms'    => array('cafe', 'super'),
        ),
    ),
    'orderby' => 'date',
    'order'   => 'DESC',
);

$the_query = new WP_Query($args);

if ($the_query->have_posts()):
    while ($the_query->have_posts()) : $the_query->the_post();
?>
    <li>
        <span><?php the_time('Y年m月d日'); ?></span>

        <?php
        // カスタム分類 shop_category を取得
        $terms = get_the_terms(get_the_ID(), 'shop_category');
        if ($terms && !is_wp_error($terms)):
            foreach ($terms as $term):
        ?>
            <span class="<?php echo esc_attr($term->slug); ?>">
                <?php echo esc_html($term->name); ?>
            </span>
        <?php endforeach; endif; ?>

        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php
    endwhile;
else:
?>
    <li>該当する店舗情報がありません。</li>
<?php endif; wp_reset_postdata(); ?>
</ul>

カスタム投稿で特定のターム記事を除外して出力する場合

<?php
$args = array(
	'post_type' => 'カスタム投稿スラッグ',
	'tax_query' => array(
		array(
			'taxonomy' => 'タクソノミースラッグ',
			'field' => 'slug',
			'terms' => 'タームスラッグ',
			'operator' => 'NOT IN', // 指定したタームを除外
		),
	),
);
?>

複数タームを除外する場合

<?php
$args = array(
  'post_type' => 'shop',
  'tax_query' => array(
    array(
      'taxonomy' => 'shop_category',
      'field'    => 'slug',
      'terms'    => array('cafe', 'bar'),  // 'cafe' と 'bar' の投稿を除外
      'operator' => 'NOT IN',
    ),
  ),
);
?>

ACFに登録した画像をアーカイブページで表示したい場合

<ul class="Fade">
<?php 
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
	'post_type' => 'recipes', 
	'posts_per_page' => 9,
	'paged' => $paged,
	'post_status' => 'publish',
	'order' => 'DESC'
);
$wp_query = new WP_Query($args);

if ($wp_query->have_posts()) :
	while ($wp_query->have_posts()) : $wp_query->the_post();
		$terms = wp_get_object_terms(get_the_ID(), 'recipes-cat');
?>
		<li>
			<a href="<?php echo esc_url(get_permalink()); ?>">
				<?php
				$image_id = get_field('recipe-img');
				$image = wp_get_attachment_image_src($image_id, 'full');
				if ($image):
				?>
				<div class="photo">
					<img src="<?php echo esc_url($image[0]); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
				</div>
				<?php endif; ?>
				<div class="text">
					<?php foreach ($terms as $term): ?>
						<span class="<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></span>
					<?php endforeach; ?>
					<h3 class="title"><?php echo esc_html(get_the_title()); ?></h3>
				</div>
			</a>
		</li>
<?php 
	endwhile;
else:
?>
	<li>現在表示できるレシピはありません。</li>
<?php endif; wp_reset_postdata(); ?>
</ul>