用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按您選擇