WordPressでイベント一覧を作る方法
｜WP_QueryとACFの日付で開催予定を表示

最初に投稿タイプと開催日の保存形式を決める

この記事ではカスタム投稿タイプworksに、ACF Date Pickerのフィールドevent_dateを用意した例を使います。対象サイトではeventなど、実際に登録している投稿タイプへ置き換えてください。

ACF Date Pickerは表示形式や戻り値形式を変更できますが、データベース上はYmd形式で保存されます。画面に「2026年9月14日」と表示されていても、比較する値は20260914です。

保存形式とmeta_queryの関係を先に詳しく確認したい場合は、次の記事で管理画面の値と取得結果を照らし合わせてから、この完成例へ戻ってください。

WP Query Builderで今日以降と開催日順を入力する

公開中のWP Query Builderで「詳細設定（全項目）」を選び、基本設定、並び順、Meta Queryを入力します。動的な「今日」は毎日変わるため、最初は確認時点の日付である2026年9月14日を、20260914という固定値で入力します。

自動高速化はOFFにし、この記事で選んだ条件だけがコードへ出る状態にしました。orderbyへmeta_value_numを選ぶと、WP Query Builderは最初のMeta Queryのキーをmeta_keyにも反映します。

次は、WP Query Builderがこの画面で生成したコードです。入力値、配列の順序、書式を変更せずに掲載しています。

$args = array(    'post_type' => 'works',    'post_status' => 'publish',    'posts_per_page' => 6,    'order' => 'ASC',    'orderby' => 'meta_value_num',    'meta_query' => array(        array(            'key' => 'event_date',            'compare' => '>=',            'type' => 'NUMERIC',            'value' => 20260914        )    ),    'meta_key' => 'event_date');

子テーマへイベント一覧を置き、固定ページから呼び出す

クラシックテーマの子テーマにtemplate-parts/upcoming-events.phpを作ります。WP Query Builderが生成したコードのうち、valueだけを$todayへ置き換え、表示ループを加えます。

<?php$today = (int) current_time( 'Ymd' ); $args = array(    'post_type' => 'works',    'post_status' => 'publish',    'posts_per_page' => 6,    'order' => 'ASC',    'orderby' => 'meta_value_num',    'meta_query' => array(        array(            'key' => 'event_date',            'compare' => '>=',            'type' => 'NUMERIC',            'value' => $today        )    ),    'meta_key' => 'event_date'); $event_query = new WP_Query( $args ); if ( $event_query->have_posts() ) :    ?>    <section aria-labelledby="upcoming-events-title">        <h2 id="upcoming-events-title">開催予定のイベント</h2>        <ul>            <?php while ( $event_query->have_posts() ) : ?>                <?php                $event_query->the_post();                $event_date = (string) get_post_meta( get_the_ID(), 'event_date', true );                $date = DateTimeImmutable::createFromFormat( '!Ymd', $event_date );                ?>                <li>                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>                    <?php if ( $date instanceof DateTimeImmutable ) : ?>                        <time datetime="<?php echo esc_attr( $date->format( 'Y-m-d' ) ); ?>">                            <?php echo esc_html( $date->format( 'Y年n月j日' ) ); ?>                        </time>                    <?php endif; ?>                </li>            <?php endwhile; ?>        </ul>    </section>    <?phpelse :    echo '<p>現在、開催予定のイベントはありません。</p>';endif; wp_reset_postdata();

current_time( ‘Ymd’ )は、WordPressの「設定 → 一般」で選んだタイムゾーンを基準にします。PHPサーバーの既定タイムゾーンへ直接依存させないことで、日付の切り替わりをサイト設定と揃えます。

page-events.phpの本文後から1回呼び出す

イベント一覧を表示する固定ページ用にpage-events.phpを子テーマへ作り、メインループ内でthe_content()の後からテンプレートパーツを呼びます。

<?phpwhile ( have_posts() ) :    the_post();    the_content();    get_template_part( 'template-parts/upcoming-events' );endwhile;?>

テーマのfunctions.phpへHTMLごと直書きすると、表示位置と取得処理が追いにくくなります。再利用する取得条件は関数やプラグインへまとめても構いませんが、表示マークアップはテンプレート側に残すと役割を分けやすくなります。

子テーマのどのファイルを編集するか判断できない場合は、先に次の記事でpage.php、テンプレートパーツ、functions.phpの役割を確認してください。設置場所を決めてから戻ると、取得処理を同じページで二重に実行するミスも避けやすくなります。

開催日が毎日変わる一覧は、本番へ置く前にローカルまたはステージングで日付境界を確認します。検証環境を用意する場合は、バックアップと利用できるPHPバージョンも公式情報で確かめてください。

当日・未来・前日・未入力の取得結果を確認する

分離したWordPress環境へ、当日、未来2件、前日、開催日未入力の5投稿を用意しました。サイトのタイムゾーンはAsia/Tokyo、基準日は20260914です。

WP Query Builderが生成した条件を変更せずに使うと、ID92、93、94の3件がevent_dateの昇順で返ります。投稿の公開日順ではなく、開催日が近い順です。

compareを>へ変えると当日のID92が外れ、ID93と94の2件になります。前日のID95と、event_dateを保存していないID96は、どちらの一覧にも入りません。

カテゴリーや地域も加える場合は条件を1つずつ足す

「今日以降で、東京開催だけ」のような一覧では、開催日のMeta QueryにTax Queryや別のMeta Queryを追加します。最初から複数条件を入れると0件の原因が分からないため、開催日だけで3件が返ることを確認してから地域条件を足します。

同じ種類の条件どうしをつなぐ場合と、異なる種類の条件を組み合わせる場合とでは、AND・ORの書き方が変わります。地域や公開対象を追加する前に、次の記事でrelationを置く場所と、異なる種類の条件をまたぐORの制約を確認してください。

表示されないときは保存値・型・時刻を順に確認する

結果が合わないときは、条件を増やす前に保存値、並び順、日付境界の順で切り分けます。

同じ開催日が複数ある場合、このコードだけではその中の順番を固定しません。必要なら、まず開催日順を確認したあと、orderbyへIDなどの二次条件を手動で加えます。

WP Query Builderのどの欄をどの順番で操作するかを詳しく確認したい場合は、詳細設定の記事でTax・Meta・Date Queryの入力手順を画面ごと追えます。この記事の完成例へ条件を足す前の操作ガイドとして読んでください。

公開前は日付境界と0件表示まで確認する

毎日対象が変わるため、正常系だけでなく日付が切り替わる境界も小さなデータで確認します。

イベント日付とWP_Queryの公式資料を確認する

保存形式はACF、絞り込みと並び順はWordPressの公式資料で確認します。戻り値形式だけを見て比較値を決めないようにしてください。

イベント一覧のよくある質問

実装時に迷いやすい当日、未入力、終了日の扱いを短く整理します。