如何在前端使用 Select 通过 ACF 字段运行 Wordpress 查询

Question

基本上我想做的是在前端创建过滤器，这样用户就可以通过特定的 ACF 字段过滤所有帖子。

有一个猫舍网站，主人需要在新一代小猫到来时添加新窝。我已经为这个新的字段组创建了选项页面，并创建了一个带有文本的转发器字段，这样我就可以添加带有垃圾名称的新行，我想稍后过滤。

我已经包含了转发器字段的基本循环：

<select name="litter" id="litter">
  <?php
  
  if( have_rows('cat-litters', 'option') ):
    
    while ( have_rows('cat-litters', 'option') ) : the_row(); ?>

      <option value="<?php the_sub_field('new-litter', 'option'); ?>"><?php the_sub_field('new-litter', 'option'); ?></option>

    <?php endwhile;
  else :
      
  endif;
  ?>
</select>

目前正在运行：

我将在猫的帖子中添加一个名为 cat-litter 的字段，这样我就可以找到带有猫砂“02”的特定帖子。

但现在我坚持使用这个 select 从前端到运行查询来显示合适的帖子。我在 index.php of twentytwentyone child-theme btw 工作。

是否需要重新加载页面并不重要（但是，如果 ajax 方式不复杂，我将非常感激）但我必须指出它需要使用分页，我已经设置了 pre_get_posts 每页显示 9 个帖子（3x3 网格）。

Answer 1

根据 ACF 文档从本页的 Dynamic $_GET parameters 部分获取和修改：https://www.advancedcustomfields.com/resources/query-posts-custom-fields/

function my_pre_get_posts( $query ) {

    // do not modify queries in the admin
    if( is_admin() ) {
        return $query;
    }

    // only modify queries for 'cat' post type
    if( isset($query->query_vars['post_type']) && $query->query_vars['post_type'] == 'cat' ) {
        
        // allow the url to alter the query
        if( isset($_GET['cat-litter']) ) {
            $query->set('meta_key', 'cat-litter');
            $query->set('meta_value', $_GET['cat-litter']);
        } 
    }
    
    // return
    return $query;
}

add_action('pre_get_posts', 'my_pre_get_posts');

然后在前端使用 'cat-litter' 从下拉列表中重新加载页面可以使用 jQuery:

<script>
    $('select#litter').on('change', function() {
      window.location.href = "www.website.com/cats?cat-litter=" + $(this).val();
    });
</script>

如何在前端使用 Select 通过 ACF 字段运行 Wordpress 查询

How to run Wordpress Query by ACF field using Select on front-end

php

wordpress

advanced-custom-fields

如何在前端使用 Select 通过 ACF 字段 运行 Wordpress 查询

How to run Wordpress Query by ACF field using Select on front-end

php

wordpress

advanced-custom-fields

如何在前端使用 Select 通过 ACF 字段运行 Wordpress 查询