自定义模板中按ACF日期匹配显示Events文章至对应标签

我在自定义模板中创建了包含10个横向标签的菜单，每个标签的日期由文章内的ACF日期选择器字段定义。同时创建了名为Events的自定义文章类型，并添加键为grid_date的自定义字段。期望当标签日期与Events文章的grid_date匹配时，将文章显示在对应标签下（如标签1设为01/09/2023，该日期的Events文章显示在其下方）。目前标签可正常展示，但对应标签下无文章显示，且控制台无报错。

• ACF日期字段存储格式与显示格式不一致：ACF默认将日期以YYYYMMDD格式存入数据库，但get_field()默认返回的是你在ACF字段设置中指定的显示格式（比如DD/MM/YYYY），直接用显示格式做数据库匹配会完全不匹配。
• meta_query未指定type参数：WordPress会默认按字符串比对，而非日期类型比对，进一步导致匹配失败。

PHP模板代码 #

<div class="date-columns">
    <?php
    // 存储每个标签对应的ACF日期字段名
    $acf_field_names = array(
        'date_field_1', 'date_field_2', 'date_field_3', 'date_field_4', 'date_field_5',
        'date_field_6', 'date_field_7', 'date_field_8', 'date_field_9', 'date_field_10'
    );

    foreach ($acf_field_names as $acf_field_name) {
        // 获取数据库中存储的原始日期格式（YYYYMMDD），不做格式转换
        $raw_heading_date = get_field($acf_field_name, false, false);
        // 如果该标签未设置日期，跳过
        if (!$raw_heading_date) continue;

        // 转换为前台显示的友好格式（如DD/MM/YYYY）
        $display_date = DateTime::createFromFormat('Ymd', $raw_heading_date)->format('d/m/Y');

        // 查询匹配日期的Events文章
        $args = array(
            'post_type' => 'events',
            'posts_per_page' => -1,
            'orderby' => 'date',
            'order' => 'DESC',
            'meta_query' => array(
                array(
                    'key' => 'grid_date',
                    'value' => $raw_heading_date,
                    'compare' => '=',
                    'type' => 'DATE' // 指定按日期类型匹配
                )
            )
        );

        $events_query = new WP_Query($args);
    ?>
        <div class="heading">
            <h3><?php echo $display_date; ?></h3>
            <?php if ($events_query->have_posts()) : ?>
                <?php while ($events_query->have_posts()) : $events_query->the_post(); ?>
                    <div class="post">
                        <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                        <p><?php the_content(); ?></p>
                        <p class="detail"><strong>Detail:</strong> <?php the_field('detail'); ?></p>
                    </div>
                <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
            <?php else : ?>
                <p>暂无对应日期的活动</p>
            <?php endif; ?>
        </div>
    <?php } ?>
</div>

CSS样式代码 #

body {
    font-family: Arial, sans-serif;
}

.date-columns {
    display: flex;
    flex-wrap: wrap;
}

.heading {
    flex: 1;
    padding: 20px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    margin: 5px;
    min-width: 200px; /* 确保小屏幕下标签不会太窄 */
}

.post {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    text-align: left; /* 让文章内容左对齐，更易读 */
}

.post h4 a {
    text-decoration: none;
    color: #333;
}

.post h4 a:hover {
    color: #0073aa; /* 添加 hover 效果，提升交互体验 */
}

.detail {
    font-weight: bold;
}

• 增加了空日期标签的跳过逻辑，避免显示空标签
• 优化了文章循环的写法，直接使用WordPress模板标签，代码更简洁
• 给CSS添加了小屏幕适配和hover交互效果

内容的提问来源于stack exchange，提问作者SavPhill