Question

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

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

对于＆＃34;最近＆＃34;提出最后一篇文章。对于＆＃34; Popular＆＃34;仅根据查看次数最多显示帖子。

的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

使用AJAX过滤WordPress帖子

1 个答案: