用AJAX过滤WordPress帖子

Question

我一直在关注本教程：http://pixelers.net/filter-wordpress-posts-by-category-with-ajax/。和工作。

我想创建一个基于流行和最近的帖子的过滤器。对于基于大量正在查看的帖子的热门帖子。

对于“最近”提出的最后一篇文章。仅针对“热门”显示帖子，根据查看次数最多的次数显示。

的index.php

<div class="col-sm-12"> 
    <ul class="post-filters"> 
     <li><a href="">Recent</a></li> 
     <li><a href="">Popular</a></li> 
    </ul> 
</div> 

<main id="main" class="content site-main"> 
    <?php $query_args = array(
      'post_type' => 'post', 
      'meta_key' => 'wpb_post_views_count', 
      'orderby' => 'meta_value_num', 
     ); 
     $the_query = new WP_Query($query_args); 
    ?> 
    <?php if ($the_query->have_posts()) : ?> 
     <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 
      <div class="col-md-3"> 
       <?php get_template_part('template-parts/content', 'grid'); ?> 
      </div> 
     <?php endwhile; ?> 
     <?php wp_reset_postdata(); ?> 
    <?php else : ?> 
     <?php get_template_part('content', 'none'); ?> 
    <?php endif; ?> 
</main> 

ajax.php

jQuery(document).ready(function ($) { 
var $mainContent = $('#main'), 
    $cat_links = $('.post-filters li a'); 

    $cat_links.on('click', function (e) { 
     e.preventDefault(); 
     $el = $(this); 
     var value = $el.attr("href"); 
     $mainContent.animate({opacity: "0.7"}); 
     $mainContent.load(value + " #main", function(){ 
      $mainContent.animate({opacity: "1"}); 

     }); 
    }); 
}); 

我怎样才能做一个链接最近流行可以点击并过滤。

谢谢。

Answer 1

让你的HTML结构像这样..第一次让它的内部HTML空白。

<div class="col-sm-12"> 
    <ul class="post-filters"> 
     <li><a href="" id="recent_posts">Recent</a></li> 
     <li><a href="" id="latest_posts">Popular</a></li> 
    </ul> 
</div> 

<main id="main" class="content site-main"> 

</main> 

创建活动的主题footer.php的onclick事件

<script type="text/javascript"> 

$("#recent_posts").click(function() { 
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 
     $.post(
      ajaxurl, 
      { 
       'action' : 'fetch_posts', 
       'fetch' : 'recent_posts', 
      }, 
      function(output){ 
      $('#main').html(output); 
      }); 
}); 

$("#latest_posts").click(function() { 
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 
     $.post(
      ajaxurl, 
      { 
       'action' : 'fetch_posts', 
       'fetch' : 'latest_posts', 
      }, 
      function(output){ 

      }); 
}); 


</script> 

把下面的代码开始在活动主题的functions.php的编码

add_action('wp_ajax_fetch_posts', 'fetch_posts'); 

add_action('wp_ajax_nopriv_fetch_posts', 'fetch_posts'); 


function import_map_landing() { 
    if($_REQUEST['fetch'] == 'latest_posts'){ 
     $query_args = array(
       'post_type' => 'post', 
       'meta_key' => 'wpb_post_views_count', 
       'orderby' => 'meta_value_num', 
      ); 
      $the_query = new WP_Query($query_args); 

     if ($the_query->have_posts()) : 
      while ($the_query->have_posts()) : $the_query->the_post(); 
       $return_str.= '<div class="col-md-3">'; 
       $return_str.=//paste the content of content-grid template here 
       $return_str.='</div>'; 
      endwhile; 
      wp_reset_postdata(); 
      else : 
       $return_str.= 'No posts found' 
     endif; 
    } 
    if($_REQUEST['fetch'] == 'recent_posts'){ 
     //do the code for recent posts here 
     //need to be concatinated in $return_str 
    } 

    echo $return_str; 
    die; 
} 
?> 

我们concatinating $ return_str中的所有输出（php代码和HTML），并在最后回显。所以请不要忘记进行协商。

模板的一部分需要被粘贴在这里不包含

像这样<?php get_template_part('template-parts/content', 'grid'); ?>需要与此页中的代码来代替。

而且在页面的开始，我们能发射onclick事件onload()获得在页面加载

对于EG

$(body).load(function() { 
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 
      $.post(
       ajaxurl, 
       { 
        'action' : 'fetch_posts', 
        'fetch' : 'recent_posts', 
       }, 
       function(output){ 
       $('#main').html(output); 
       }); 
}); 

我已经呼吁页面加载recent_posts funtion，您可以将数据切换到latest_posts按您选择