WordPressで最近記事の一覧を表示する方法 – WP_Queryでの出力方法
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>
