要在 WordPress 中实现一个类似于图片中的多条件筛选功能，可以参考以下步骤，结合插件和自定义代码进行开发。

实现步骤：

1. 自定义分类法 (Taxonomies) 和字段 (ACF)

你可以使用 WordPress 的分类法和 ACF（Advanced Custom Fields）自定义字段来创建筛选条件，例如：

• Duration: 可以作为自定义字段（ACF）。
• Starting Date: 可以使用 ACF 的日期字段。
• Course Type: 可以作为自定义分类法 (Taxonomy)。
• Accommodation: 也可以作为分类法或 ACF 字段。

2. 创建筛选表单

在前端页面，创建一个表单来让用户选择筛选条件。你可以使用 HTML 和 PHP 来生成下拉菜单、日期选择器等筛选条件。

示例代码：

<form action="<?php echo esc_url(home_url('/')); ?>" method="GET">
    <div class="filter-options">
        <!-- Duration Filter -->
        <select name="duration">
            <option value="1 week">1 week</option>
            <option value="2 weeks">2 weeks</option>
            <option value="3 weeks">3 weeks</option>
        </select>

        <!-- Starting Date Filter -->
        <input type="text" name="starting_date" placeholder="Select a date" class="datepicker">

        <!-- Course Type Filter -->
        <select name="course_type">
            <?php
            $course_types = get_terms('course_type');  // 获取所有的 Course Type
            foreach($course_types as $course_type):
            ?>
                <option value="<?php echo $course_type->slug; ?>"><?php echo $course_type->name; ?></option>
            <?php endforeach; ?>
        </select>

        <!-- Accommodation Filter -->
        <select name="accommodation">
            <?php
            $accommodations = get_terms('accommodation');  // 获取所有 Accommodation
            foreach($accommodations as $accommodation):
            ?>
                <option value="<?php echo $accommodation->slug; ?>"><?php echo $accommodation->name; ?></option>
            <?php endforeach; ?>
        </select>

        <button type="submit">Calculate price comparison</button>
    </div>
</form>

3. 使用 WP_Query 处理筛选条件

你可以在 functions.php 或模板文件中使用 WP_Query 来根据表单传递的筛选条件查询相应的内容。

示例代码：

$args = array(
    'post_type' => 'course',
    'tax_query' => array(
        'relation' => 'AND',
        array(
            'taxonomy' => 'course_type',
            'field'    => 'slug',
            'terms'    => isset($_GET['course_type']) ? sanitize_text_field($_GET['course_type']) : '',
        ),
        array(
            'taxonomy' => 'accommodation',
            'field'    => 'slug',
            'terms'    => isset($_GET['accommodation']) ? sanitize_text_field($_GET['accommodation']) : '',
        ),
    ),
    'meta_query' => array(
        'relation' => 'AND',
        array(
            'key'     => 'duration',
            'value'   => isset($_GET['duration']) ? sanitize_text_field($_GET['duration']) : '',
            'compare' => 'LIKE',
        ),
        array(
            'key'     => 'starting_date',
            'value'   => isset($_GET['starting_date']) ? sanitize_text_field($_GET['starting_date']) : '',
            'compare' => 'LIKE',
        ),
    ),
);

$query = new WP_Query($args);
if ($query->have_posts()):
    while ($query->have_posts()): $query->the_post();
        // 输出课程信息
        the_title();
        // 其他课程字段
    endwhile;
endif;
wp_reset_postdata();

4. 前端交互 (JavaScript)

为了增强用户体验，可以添加 JavaScript 交互，例如日期选择器和条件筛选的联动效果。你可以使用 jQuery UI 日期选择器插件来实现日期选择。

jQuery(document).ready(function($) {
    $(".datepicker").datepicker({
        dateFormat: 'yy-mm-dd'
    });
});

5. 优化样式 (CSS)

通过 CSS 来实现你期望的样式，使筛选条件布局更整洁。你可以根据实际情况调整表单的样式。

.filter-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-options select,
.filter-options input {
    padding: 10px;
    margin-right: 10px;
}

插件推荐

如果你希望更快速地搭建筛选功能，可以考虑使用以下插件：

• FacetWP：一个强大的过滤插件，可以轻松集成多种条件筛选。
• Search & Filter：帮助创建复杂的搜索和过滤表单。

通过以上步骤，你可以在 WordPress 中实现类似图片中的多条件筛选功能，并根据用户选择筛选出相关课程信息。