本文旨在介绍如何利用 AJAX 技术实现 WordPress 网站中的文章列表及评论的分页功能。我们将会介绍如何使用 jQuery 和 WordPress 提供的 REST API 实现数据的异步加载，旨在提高网站的响应速度和用户体验。
1. 准备工作
在开始本文之前，我们需要确保以下内容已准备就绪：
- 一台运行最新版 WordPress 的服务器
- 一台拥有 root 权限的 Linux 服务器
- 一个具有良好响应体验的全新 WordPress 应用
- 一份最新版的 jQuery 库
2. 分页功能实现
在本教程中，我们将分页功能分为两部分：文章列表分页和评论列表分页，具体实现如下。
2.1 文章列表分页实现
为了实现文章列表的分页功能，我们需要先了解 WordPress 自带的 REST API。WordPress 为我们提供了一些 REST 接口，包括文章、分类、标签等等。我们需要使用这些接口来获取文章列表和文章页面数据。
首先，让我们来创建一个新的模板文件，我们命名为 custom_template.php。在模板文件中，我们添加一个空的 <ul> 元素来展示文章列表，以及下面 <div> 元素作为页码区域。
<!-- 文章列表容器 -->
<ul id="post-list"></ul>
<!-- 页码容器 -->
<div class="pagination"></div>
接下来，我们准备编写 JavaScript 代码。首先，我们绑定一个点击事件，这将会触发 AJAX 操作并发送请求到 REST API 上，接着更新文章列表和页码部分。
$(function(){
var pageNum = 1;
var postCount = 10;
function showPosts(pageNum){
$.ajax({
url: '/wp-json/wp/v2/posts',
type: 'GET',
data: 'page='+pageNum+'&per_page='+postCount,
beforeSend: function(){
$('#post-list').html('<div class="loading"></div>');
},
success: function(data){
$('#post-list').html("");
var pageData = data;
for(var i in pageData){
var html = '<li><a href="'+pageData[i].link+'">'+pageData[i].title.rendered+'</a></li>';
$('#post-list').append(html);
}
var pageDiv = '<a href="javascript:;" class="prev" id="prev" onclick="showPosts('+(pageNum-1)+')">上一页</a> <a href="javascript:;" class="next" id="prev" onclick="showPosts('+(pageNum+1)+')">下一页</a>'
if(pageNum==1) $('.prev').hide();
if(pageNum==2){$('#prev').hide();$('.prev').fadeIn(800);}
if(pageData.length<postCount) $('.next').hide();
if(pageData.length>=postCount && pageNum>=2) $('#prev').fadeIn(800);
$('.pagination').html(pageDiv);
},
error: function(){
$('#post-list').html('<div class="error">Error loading posts.</div>');
}
});
}
showPosts(pageNum);
});
在上面的代码中，我们使用 AJAX 发送了一个名为 /wp-json/wp/v2/posts 的 GET 请求，获取文章列表数据。我们给 URL 附加了两个数据：page 和 per_page，这两个数据会影响文章列表的呈现。page 代表文章列表的当前页数，而 per_page 代表每页展示的文章数。同时，我们使用了 .beforeSend 方法，在请求数据时自动把文章列表区域显示为加载中的状态，以便于给用户更好的体验。在请求到数据后，我们使用 for 循环遍历所有文章信息，并在页面上渲染。接下来，我们生成了页码容器，其包含了 上一页 和 下一页 按钮。如果当前页数是第一页，那么我们只显示下一页，如果当前页数是第二页，那么我们才会显示上一页。
2.2 评论列表分页实现
评论列表的分页与文章列表的分页业务类似，我们只需要使用 WordPress 自带的评论 API 来获取数据，然后使用 AJAX 请求数据进行渲染即可。
首先，我们可以跟第一步一样，在模板文件中添加一个空的 <ul> 元素作为评论列表容器，以及下面和文章分页相同的页码容器。
<!-- 评论列表容器 -->
<ul id="comment-list"></ul>
<!-- 页码容器 -->
<div class="pagination"></div>
接下来，我们就需要编写相应的 JS 代码来实现评论列表的分页显示。为了简单起见，我们也可以把接下来的 JS 代码放在 custom_template.php 文件中。
$(function(){
var pageNum = 1;
var commentCount = 20;
var postID = 1;
function showComments(pageNum){
$.ajax({
url: '/wp-json/wp/v2/comments/',
type: 'GET',
data: 'page='+pageNum+'&per_page='+commentCount+'&post='+postID,
beforeSend: function(){
$('#comment-list').html('<div class="loading"></div>');
},
success: function(data){
$('#comment-list').html("");
var pageData = data;
for(var i in pageData){
var html = '<li><span class="name">'+pageData[i].author_name+'</span> ：<span class="content">'+pageData[i].content.rendered+'</span></li>';
$('#comment-list').append(html);
}
var pageDiv = '<a href="javascript:;" class="prev" onclick="showComments('+(pageNum-1)+')">上一页</a> <a href="javascript:;" class="next" onclick="showComments('+(pageNum+1)+')">下一页</a>'
if(pageNum==1) $('.prev').hide();
if(pageNum==2){$('#prev').hide();$('.prev').fadeIn(800);}
if(pageData.length<commentCount) $('.next').hide();
if(pageData.length>=commentCount && pageNum>=2) $('#prev').fadeIn(800);
$('.pagination').html(pageDiv);
},
error: function(){
$('#comment-list').html('<div class="error">Error loading comments.</div>');
}
});
}
showComments(pageNum);
});
在上面我们定义了一些与文章分页不同的一些新变量包括：pageNum 表示当前页数，commentCount 表示每页展示评论的数量，postID 表示需要获取评论的文章 id。接下来，我们异步请求评论列表数据，这里我们将参数 post 设置为了 postID，表示从评论中获取指定文章 id 的评论信息。编写与请求文章列表数据相似的 for 循环来渲染，同时将评论作者与评论内容分别展示。最后，我们同样通过页码将异步获取数据的评论信息展示出来。
3. 总结和参考
利用AJAX实现WordPress中的文章列表及评论的分页功能的实现过程比较简单，与基本的AJAX异步请求实现的分页展示基本一致，只是需要对WordPress自带的API有一定的了解才能更好的实现分页功能。本文中的代码示例只是为了介绍实现的思路，可以根据自己的需要进一步优化和改进。
参考文献：
- WordPress REST API：https://developer.wordpress.org/rest-api/
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用AJAX实现WordPress中的文章列表及评论的分页功能 - Python技术站
微信扫一扫 
支付宝扫一扫 