WordPress Ajax加载分类下的文章功能

WP猫

已于 2023-02-14 09:54:49 修改

阅读量252

点赞数

分类专栏： wordpress 文章标签： php 开发语言 Powered by 金山文档

于 2023-02-12 14:04:57 首次发布

本文链接：https://blog.csdn.net/qq_15369533/article/details/128994384

版权

wordpress 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在WordPress中添加Ajax功能，通过修改functions.php文件创建加载分类文章的回调函数，然后在前端使用JavaScript发起Ajax请求，动态加载指定分类的文章到页面中，最后展示了接收响应并更新页面内容的代码示例。

摘要由CSDN通过智能技术生成

首先，我们要在 WordPress 后台添加一个新的 Ajax 功能，在 functions.php 中添加如下代码：

// 添加 Ajax 加载分类下文章功能
add_action('wp_ajax_load_category_posts','load_category_posts_callback');
add_action('wp_ajax_nopriv_load_category_posts','load_category_posts_callback');

function load_category_posts_callback(){
  // 获取分类ID
  $cat_id = $_POST['cat_id'];
  // 设置参数
  $args = array(
    'cat' => $cat_id,
    'orderby' => 'date',
    'order' => 'DESC',
    'posts_per_page' => -1
  );
  $query = new WP_Query( $args );
  // 开始循环
  if ( $query->have_posts() ) :
    while ( $query->have_posts() ) : $query->the_post();
      // 这里填写文章模板
      echo '<article>';
      echo '<h3><a href="'.get_permalink().'">'.get_the_title().'</a></h3>';
      echo '<div class="entry-content">'.get_the_excerpt().'</div>';
      echo '</article>';
    endwhile;
  endif;
  // 重置post数据
  wp_reset_postdata();
  // 结束 Ajax 功能
  die();
}

接下来，我们要在需要加载文章的页面（可以是首页或者某个分类下的页面）中添加 JavaScript 代码，用来发起 Ajax 请求：

// 加载文章
jQuery(document).ready(function($){
  // 获取分类ID
  var cat_id = '1'; // 填写你要加载的分类ID
  // 设置Ajax参数
  var data = {
    'action': 'load_category_posts',
    'cat_id': cat_id
  };
  // Ajax请求
  $.post(ajaxurl, data, function(response) {
    // 将文章内容添加到页面中
    $('.post-list').html(response);
  });
});

最后，我们要在页面添加一个用来显示文章内容的容器：

<div class="post-list"></div>

以上内容通过ChatGPT生成

Ajax 代码：



<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.category').on('click', function(){
            var catId = $(this).data('category');
            
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                data: {
                    action: 'get_category_posts',
                    catid: catId
                },
                dataType: 'json',
                success: function(data){
                    if( data ) {
                        // do something with the data here
                        $('#category-posts').html(data);
                    }
                }
            });
        });
    });
</script>



<?php

// Register the ajax action
add_action('wp_ajax_get_category_posts', 'get_category_posts');
add_action('wp_ajax_nopriv_get_category_posts', 'get_category_posts');

function get_category_posts() {
    $catId = $_GET['catid'];
    
    $args = array(
        'posts_per_page' => -1,
        'cat' => $catId
    );
    
    $posts = get_posts($args);
    
    if( $posts ) {
        $html = '<ul>';
        foreach( $posts as $post ) {
            $html .= '<li>' . $post->post_title . '</li>';
        }
        $html .= '</ul>';
        
        echo json_encode($html);
    }
    
    die();
}

?>