WordPressのトップページでは、「最新情報」「お知らせ」「イベント情報」など、目的別に投稿一覧を分けて表示したいケースがあります。通常のループ（have_posts）だけでは同じ条件の記事しか取得できませんが、WP_Queryを使うことでカテゴリーを指定した新着記事一覧を自由に作成できます。
この記事では、トップページ内に通常の新着投稿一覧を表示しながら、特定カテゴリーの記事だけを9件表示する方法を、テーマ編集時の注意点も含めて解説します。
通常の投稿ループだけではカテゴリー別表示が難しい理由
WordPressの基本的な投稿表示では、現在のページに設定されたメインクエリを利用します。質問にあるコードのhave_posts()やthe_post()は、WordPressがあらかじめ取得した投稿データを順番に表示する仕組みです。
そのため、同じトップページ内で「すべての新着記事」と「イベントカテゴリーだけの記事」を別々に表示したい場合、メインクエリだけでは対応できません。
このような場合は、WP_Queryを使って追加の投稿取得処理を作成します。
カテゴリー指定で新着記事を取得するWP_Queryの基本
イベントカテゴリーの記事だけを取得する場合は、以下のようにWP_Queryを利用します。
<?php
$event_query = new WP_Query(array(
‘post_type’ => ‘post’,
‘posts_per_page’ => 9,
‘category_name’ => ‘event’
));
?>
category_nameにはカテゴリーのスラッグを指定します。例えば管理画面でカテゴリー名が「イベント」でも、スラッグが「event」の場合はeventを指定します。
カテゴリーIDで指定したい場合は、以下のようにcatを使用する方法もあります。
<?php
$event_query = new WP_Query(array(
‘posts_per_page’ => 9,
‘cat’ => 123
));
?>
トップページにイベント一覧を追加する実装例
既存の「NEWEST/最新情報」を残したまま、その下に「EVENT/講演情報」を追加する場合は、別ループとして記述します。
実際のコード例は以下のようになります。
<div id=”event” class=”area”>
<h4>EVENT <span>講演情報</span></h4>
<section class=”sec”>
<div class=”row”>
<?php
$event_query = new WP_Query(array(
‘posts_per_page’ => 9,
‘category_name’ => ‘event’
));
?>
<?php if($event_query->have_posts()): ?>
<?php while($event_query->have_posts()): $event_query->the_post(); ?>
<div class=”col-md-4″>
<?php get_template_part(‘template-parts/loop’, ‘news’); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
</section>
</div>
このように新しいWP_Queryを作成することで、「NEWEST」は全記事、「EVENT」はイベントカテゴリーのみという異なる条件の一覧を同じページ内に表示できます。
wp_reset_postdata()を必ず入れる理由
追加のWP_Queryを使用した後は、wp_reset_postdata()を実行することが重要です。
WP_Queryでthe_post()を使うと、WordPress内部の現在の投稿情報がイベント記事側に切り替わります。そのまま後続の処理を続けると、別の場所でタイトルや画像が正しく表示されないなどの問題が発生する可能性があります。
そのため、カスタムループの最後には必ず以下を追加します。
<?php wp_reset_postdata(); ?>
カテゴリー表示でよくある失敗例
カテゴリー指定が効かない場合、最も多い原因はカテゴリー名ではなくスラッグを指定していないことです。
例えばカテゴリー名が「イベント」でも、スラッグが「events」ならcategory_nameにはeventsを指定する必要があります。
また、カテゴリーがカスタム投稿タイプの記事を管理している場合は、post_typeの指定も変更する必要があります。例えばeventというカスタム投稿タイプなら、以下のようになります。
<?php
$event_query = new WP_Query(array(
‘post_type’ => ‘event’,
‘posts_per_page’ => 9
));
?>
表示速度を考慮したトップページ設計
トップページに複数の投稿一覧を表示すると、その分データベースへの問い合わせ回数が増えます。
最新情報9件、イベント9件、その他のカテゴリー一覧など複数のループを追加する場合は、必要な記事数だけ取得するように設定することが大切です。
また、画像サイズを適切に設定したり、キャッシュ系プラグインを利用したりすることで、表示速度への影響を抑えることができます。
まとめ
WordPressのトップページ内に「最新情報」と「イベントカテゴリーだけの新着一覧」を同時に表示したい場合は、通常のhave_posts()ループではなくWP_Queryを利用します。
category_nameやcatで条件を指定すれば、特定カテゴリーの記事だけを9件表示することが可能です。
実装時はwp_reset_postdata()を忘れずに追加し、カテゴリーのスラッグや投稿タイプを正しく指定することで、柔軟なトップページ構成を作成できます。
コメント