用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;
}
?>

我们将$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函数，您可以根据您的选择切换到latest_posts