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

はじめに

WordPress のカスタムフィールドを扱うプラグイン「Advanced Custom Fields（ACF）」を使って、デイトピッカーで指定した日付が「今日以降」の記事のみを一覧表示する方法を解説します。

前提条件 A（通常）

前提条件として、投稿タイプが event というイベント情報の記事に対して、「イベントの開催日」をデイトピッカーで作成し、開催日の日付が今日より過去のものであれば、その記事は表示されないようにし、今日以降の記事のみを表示する仕組みを作ります。

ACF でデイトピッカーを設定

• 投稿タイプ: event

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

前提条件 B（デイトピッカーが繰り返しフィールドの中にある場合）

• 投稿タイプ: event

繰り返しフィールドの設定

• フィールドラベル: 「イベント開催情報」
• フィールド名: event_schedule
• フィールドタイプ: 「繰り返しフィールド」

繰り返しフィールドの中のデイトピッカーフィールドの設定

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

カスタムクエリを作成 A

指定した日付が今日以降の記事のみをフロントエンドに表示するためのカスタムクエリを作成します。
WP_Queryを使って投稿を絞り込みます。

以下のようなコードをテーマのテンプレートファイル（例えば、page.phpやarchive.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 の値に「フィールド名（繰り返しフィールド）」と「サブフィールド名」を記載します。その際、フィールド名の区切りに対象の配列「0」を指定します。

「フィールド名_0_サブフィールド名」とすることで、リピーターフィールドの最初の配列にあるサブフィールド名を対象にします。

2番目、3番目の値を参照するにはそれぞれ_1_、_2_ で繋ぎます。

コード解説

• esc_html(current_time('Ymd')) で今日の日付を YYYYMMDD 形式で取得。
• meta_query を使用して、ACF の event_date フィールドが今日以降 (>=) の記事のみを取得。
• wp_reset_postdata() で WP_Query の影響をリセット。

まとめ

ACFのデイトピッカーを使うことで、簡単に投稿に日付を設定でき、その日付を基にして投稿の表示・非表示をコントロールできます。

今回紹介した方法を使えば、指定した日付が今日以降の記事のみを表示することができ、イベント情報などの時系列に基づいたコンテンツ表示が可能になります。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。