带有自定义 ACF 过滤器的 Wordpress ajax 分页

Question

我不知道如何使用 ACF 字段为我的自定义过滤器创建 ajax 分页。例如， spot_activity 是我的自定义 ACF 字段之一。

我的表单模板：

          <form class="filters custom-filters" id="filter" action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="GET">

   <div class="filters__wrapper">
              <span class="filters__header">Aktywności</span>
              <ul class="filters-multiple">
                <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="bike" type="checkbox" id="firstSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "bike") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="firstSpotAct">
                    <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/activity-icons/bike.svg" alt="<?php _e('Ścieżki rowerowe', 'domain');?>"> 
                    <?php _e('Ścieżki rowerowe', 'domain');?>
                  </label>
                </li>
                <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="pool" type="checkbox" id="secondSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "pool") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="secondSpotAct">
                    <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/activity-icons/pool.svg" alt="<?php _e('Basen', 'domain');?>"> 
                    <?php _e('Basen', 'domain');?>
                  </label>
                </li>
                <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="fishing" type="checkbox" id="thirdSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "fishing") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="thirdSpotAct">
                    <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/activity-icons/fishing.svg" alt="<?php _e('Wędkarstwo', 'domain');?>"> 
                    <?php _e('Wędkarstwo', 'domain');?>
                  </label>
                </li>
                <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="water_sport" type="checkbox" id="fourthSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "water_sport") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="fourthSpotAct">
                    <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/activity-icons/water_sport.svg" alt="<?php _e('Sporty wodne', 'domain');?>"> 
                    <?php _e('Sporty wodne', 'domain');?>
                  </label>
                </li>
                <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="animations" type="checkbox" id="fifthSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "animations") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="fifthSpotAct">
                    <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/activity-icons/animations.svg" alt="<?php _e('Animacje', 'domain');?>"> 
                    <?php _e('Animacje', 'domain');?>
                  </label>
                </li>
                 <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="pitch" type="checkbox" id="sixthSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "pitch") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="sixthSpotAct">
                  <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/activity-icons/pitch.svg" alt="<?php _e('Boisko sportowe', 'domain');?>"> 
                    <?php _e('Boisko sportowe', 'domain');?>
                  </label>
                </li>
                <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="trails" type="checkbox" id="seventhSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "trails") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="seventhSpotAct">
                    <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/ground-icons/trails.svg" alt="<?php _e('Szlaki turystyczne', 'domain');?>"> 
                    <?php _e('Szlaki turystyczne', 'domain');?>
                  </label>
                </li>
                <li class="filters-multiple__group">
                  <input class="filters-multiple__input" value="climber" type="checkbox" id="eighthSpotAct" name="spot_activities" <?php if ($_GET["spot_activities"] == "climber") : echo 'checked'; endif;?>>
                  <label class="filters-multiple__label" for="eighthSpotAct">
                    <img class="filters-multiple__icon inline-svg" src="<?php echo get_template_directory_uri(); ?>/images/ground-icons/climber.svg" alt="<?php _e('Dla wspinaczy', 'domain');?>"> 
                    <?php _e('Dla wspinaczy', 'domain');?>
                  </label>
                </li>
              </ul>
            </div>
</form>

我的functions.php

function custom_filters() {


  $meta_query = array('relation' => 'AND');

  if ( isset( $_GET['spot_activities'] ) ) :
    $spot_activities = $_GET['spot_activities'];
    foreach( $spot_activities as $spot_activity ) {
      $meta_query[] = array(
        'key'     => 'spot_activity',
        'value'   => $spot_activity,
        'compare' => 'LIKE'
      );    
    }
  endif;

    $final_args = array (
      'post_type' => 'spots',
      'post_status' => 'publish',
      'posts_per_page' => -1,
      'meta_query' =>  $meta_query,
    );
$query = new WP_Query( $final_args  ); 
  if( $query->have_posts() ) :     
    while( $query->have_posts() ): $query->the_post(); 
      get_template_part( 'template-parts/spot', get_post_type() ); 
    <?php endwhile; ?>         
  <?php endif; ?>

<?php die();

}

add_action('wp_ajax_spotsfilter', 'custom_filters'); 
add_action('wp_ajax_nopriv_spotsfilter', 'custom_filters');

最后是我的 JS：

function spotFilters() {

  $('.filters-multiple__input').on('change', function() {
    var spot_activities = [];
    $.each($("input[name='spot_activities']:checked"), function(){ 
      spot_activities.push($(this).val());
    });
 var filter = $('.custom-filters');
 var data = {
   action: 'spotsfilter',
   spot_activities : spot_activities,
 }

    $.ajax({
      url: filter.attr('action'),
      data: data,
      type: filter.attr('method'), 
      beforeSend: function() {
        $("#circleLoader").show();
      },
      success:function(response) {
        $('#spotList').html(response); 
        $("#circleLoader").hide();
      }
    });
    return false;
  });
}

一切都很好。另外，我这里有一些分类过滤器，但没关系 - 我的过滤器有效。我不知道如何使用 ajax 对我的帖子进行分页，而不是在开始时显示和过滤所有帖子。