ACFのデイトピッカーで今日以降の記事のみを一覧表示する方法【WP_Query】

公開日
最終更新日
ACF のデイトピッカーで指定した日付が今日以降の記事のみを一覧表示

イベント情報のような時系列コンテンツでは、「開催日が過ぎた記事は一覧に出したくない」というケースがよくあります。

結論から言うと、ACF(Advanced Custom Fields)のデイトピッカーで日付を持たせ、WP_Querymeta_queryで「今日以降」の記事だけに絞り込むことで実現できます。この記事では、通常のフィールドの場合と、繰り返しフィールドの中にある場合の両方を解説します。

前提条件A(通常)

投稿タイプeventの記事に「イベント開催日」をデイトピッカーで設定し、開催日が今日より過去の記事は表示せず、今日以降の記事のみを表示する仕組みを作ります。ACFのデイトピッカーは次のように設定します。

  • 投稿タイプ:event
  • フィールドラベル:「イベント開催日」
  • フィールド名:event_date
  • フィールドタイプ:「デイトピッカー」
  • 返り値のフォーマット:Ymd(推奨)

前提条件B(繰り返しフィールドの中にある場合)

デイトピッカーを繰り返しフィールド(リピーター)の中に置く場合は、次のような構成を想定します。

  • 投稿タイプ:event
  • 繰り返しフィールド:ラベル「イベント開催情報」/フィールド名 event_schedule
  • その中のデイトピッカー:ラベル「イベント開催日」/フィールド名 event_date/返り値のフォーマット Ymd(推奨)

カスタムクエリを作成(A:通常)

指定した日付が今日以降の記事のみを表示するカスタムクエリを、WP_Queryで作成します。テーマのテンプレートファイル(page.phparchive.phpなど)に、次のコードを追加します。

<ul class="index-tournaments__list">
    <?php
    $today = esc_html(current_time('Ymd'));
    $args = array(
        'post_type' => 'event', // 投稿タイプ
        'posts_per_page' => 12, // 表示件数
        'meta_query' => [
            [
                'key'     => 'event_date', // ACFのフィールド名
                'value'   => $today, // 今日の日付
                'compare' => '>=', // 今日以降
            ],
        ]
    );
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :
        while ($the_query->have_posts()) : $the_query->the_post();
    ?>
            <li>
                <?php the_title(); ?>
                <?php the_content(); ?>
            </li>
    <?php endwhile;
    else :
        echo '指定された日付以降の記事はありません。';
    endif; ?>
    <?php wp_reset_postdata(); // 投稿データをリセット
    ?>
</ul>

カスタムクエリを作成(B:繰り返しフィールド)

<ul class="index-tournaments__list">
    <?php
    $today = esc_html(current_time('Ymd'));
    $args = array(
        'post_type' => 'event', // 投稿タイプ
        'posts_per_page' => 12, // 表示件数
        'meta_query' => [
            [
                'key'     => 'event_schedule_0_event_date', // _0_ で繋ぐ
                'value'   => $today, // 今日の日付
                'compare' => '>=', // 今日以降
            ],
        ]
    );
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :
        while ($the_query->have_posts()) : $the_query->the_post();
    ?>
            <li>
                <?php the_title(); ?>
                <?php the_content(); ?>
            </li>
    <?php endwhile;
    else :
        echo '指定された日付以降の記事はありません。';
    endif; ?>
    <?php wp_reset_postdata(); // 投稿データをリセット
    ?>
</ul>

繰り返しフィールドの場合は、keyに「フィールド名(繰り返しフィールド)」と「サブフィールド名」を、対象の配列番号でつないで指定します。event_schedule_0_event_dateのように「フィールド名_0_サブフィールド名」とすることで、リピーターの最初の配列にあるサブフィールドを対象にできます。2番目・3番目を参照するときは、それぞれ_1__2_でつなぎます。

コード解説

  • esc_html(current_time('Ymd'))で、今日の日付をYYYYMMDD形式で取得
  • meta_queryで、ACFのevent_dateが今日以降(>=)の記事のみを取得
  • wp_reset_postdata()WP_Queryの影響をリセット

ポイントは、デイトピッカーの返り値をYmd(例:20250401)でそろえておくことです。今日の日付も同じYmd形式で取得しているため、文字列同士の比較で正しく「今日以降」の判定ができます。フォーマットが揃っていないと比較が期待通りに動かないので注意しましょう。

なお、アーカイブページのメインの一覧そのものを絞り込みたい場合は、pre_get_postsフックでmeta_queryを追加する方法もあります。今回のようにWP_Queryで独自ループを作る方法は、任意の場所に一覧を差し込みたいときに向いています。また、「今日から3ヶ月以内」のように期間で絞りたい場合は、条件を2つ組み合わせれば対応できます。

まとめ

ACFのデイトピッカーを使えば、投稿に日付を持たせ、その日付をもとに表示・非表示をコントロールできます。今回の方法で「今日以降の記事のみ」を表示すれば、イベント情報のような時系列コンテンツを、常に最新の状態で見せられます。開催日が過ぎたものを自動で隠せるので、運用の手間も減らせます。

IPPEI FUKUTA(株式会社バッズブルー 代表)

IPPEI FUKUTA(株式会社バッズブルー 代表)

WordPress専門のWeb制作者として15年・150サイト以上を担当。現場でつまずいた問題と解決策を、同じ制作者・フリーランスの方に向けて発信しています。無料のWeb便利ツール集「バドツール」を開発・運営中。