方法一
一直想折腾那种非调用全页面的Ajax,也就是在外部请求fuctions.php中Ajax的评论函数而动态输出评论列表。这篇文章依然是来之大发的“高性能WordPress之Ajax评论分页” 。让我来好好学习一番是如何实现的~
一般来说,评论列表的基本结构如下
<code>
<div class="commentshow">
<!--这个ol标签是由函数输出的-->
<ol class="comment-list">
<li id="li-comment-24608">一个评论</li>
</ol>
<nav class="commentnav">
<a>翻页链接</a>
<a>翻页链接</a>
</nav>
</div></code>
<div class="commentshow">
<!--这个ol标签是由函数输出的-->
<ol class="comment-list">
<li id="li-comment-24608">一个评论</li>
</ol>
<nav class="commentnav">
<a>翻页链接</a>
<a>翻页链接</a>
</nav>
</div></code>
commentshow
和commentnav
分别是评论列表的容器、评论翻页的超链接的容器。
<code>
function fs_ajax_pagenavi(){ //创建函数
if( isset($_GET['action'])&& $_GET['action'] == 'fs_ajax_pagenavi' ){ //获取请求数据的参数
global $post,$wp_query, $wp_rewrite; //创建全局变量
$postid = isset($_GET['post']) ? $_GET['post'] : null; //获取文章ID
$pageid = isset($_GET['page']) ? $_GET['page'] : null; //获取页面ID
if(!$postid || !$pageid){ //判断Get的的文章ID和页面ID是否为空
fail(__('Error post id or comment page id.'));
}
$comments = get_comments('post_id='.$postid); //依据ID调出文章评论列表
$post = get_post($postid); //依据ID调出页面评论列表
if(!$comments){ //判断是否有评论列表
fail(__('Error! can\'t find the comments'));
}
if( 'desc' != get_option('comment_order') ){ //判断评论列表的输出顺序,最旧还是最新
$comments = array_reverse($comments); //若是判断递减,则调换顺序
}
$wp_query->is_singular = true;
$baseLink = '';
if ($wp_rewrite->using_permalinks()) {
$baseLink = '&base=' . user_trailingslashit(get_permalink($postid) . 'comment-page-%#%', 'commentpaged');
}
// response 注意修改callback为你自己的,没有就去掉callback
//这个要看你主题的comments.php 中的 wp_list_comments()函数以及函数里面的参数相同即可,
echo '<ol class="comment-list">'; //这个也是跟主题的comments.php的相同
wp_list_comments('callback=devecomment&type=comment&page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments);
echo '</ol>';//这个也是跟主题的comments.php的相同
echo '<nav class="commentnav">';
paginate_comments_links('current=' . $pageid . '&prev_text=«&next_text=»'); //评论翻页的链接
echo '</nav>';
die;
}
}
add_action('init', 'fs_ajax_pagenavi');
</code>
function fs_ajax_pagenavi(){ //创建函数
if( isset($_GET['action'])&& $_GET['action'] == 'fs_ajax_pagenavi' ){ //获取请求数据的参数
global $post,$wp_query, $wp_rewrite; //创建全局变量
$postid = isset($_GET['post']) ? $_GET['post'] : null; //获取文章ID
$pageid = isset($_GET['page']) ? $_GET['page'] : null; //获取页面ID
if(!$postid || !$pageid){ //判断Get的的文章ID和页面ID是否为空
fail(__('Error post id or comment page id.'));
}
$comments = get_comments('post_id='.$postid); //依据ID调出文章评论列表
$post = get_post($postid); //依据ID调出页面评论列表
if(!$comments){ //判断是否有评论列表
fail(__('Error! can\'t find the comments'));
}
if( 'desc' != get_option('comment_order') ){ //判断评论列表的输出顺序,最旧还是最新
$comments = array_reverse($comments); //若是判断递减,则调换顺序
}
$wp_query->is_singular = true;
$baseLink = '';
if ($wp_rewrite->using_permalinks()) {
$baseLink = '&base=' . user_trailingslashit(get_permalink($postid) . 'comment-page-%#%', 'commentpaged');
}
// response 注意修改callback为你自己的,没有就去掉callback
//这个要看你主题的comments.php 中的 wp_list_comments()函数以及函数里面的参数相同即可,
echo '<ol class="comment-list">'; //这个也是跟主题的comments.php的相同
wp_list_comments('callback=devecomment&type=comment&page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments);
echo '</ol>';//这个也是跟主题的comments.php的相同
echo '<nav class="commentnav">';
paginate_comments_links('current=' . $pageid . '&prev_text=«&next_text=»'); //评论翻页的链接
echo '</nav>';
die;
}
}
add_action('init', 'fs_ajax_pagenavi');
</code>
js驱动部分
这是一段js代码~一般放在页面的头部来获取文章的ID、还有页面的url,其实这个可以写到div里,然后用jQuery的.text来获取内容,不过这个也行~
<code>
<script>
<?php if ( is_singular() ){ ?>
var fspostid ="<?php echo $post->ID?>"; //获取ID
var fsajaxurl ="http:\/\/yefengs.com\/"; //获取初始url
<?php } ?>
</script>
</code>
<script>
<?php if ( is_singular() ){ ?>
var fspostid ="<?php echo $post->ID?>"; //获取ID
var fsajaxurl ="http:\/\/yefengs.com\/"; //获取初始url
<?php } ?>
</script>
</code>
接下来就是js的主题部分了
<code>
jQuery(document).ready(function(a) {//Code By Mufeng
var l = a(".commentshow"), y = fspostid, r = fsajaxurl, z = '<div id="loading-comments"></div>';
l.on("click", ".commentnav a", function(b) {
b.preventDefault();
var b = a(this).attr("href"), c = 1;
/comment-page-/i.test(b) ? c = b.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0] :/cpage=/i.test(b) && (c = b.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0]);
a.ajax({
url:r + "?action=fs_ajax_pagenavi&post=" + y + "&page=" + c,
beforeSend:function() {
l.html(z);
},
error:function(a) {
alert(a.responseText);
},
success:function(b) {
l.html(b);
a("body, html").animate({
scrollTop:l.offset().top - 50
}, 1e3);
}
});
});
});
</code>
jQuery(document).ready(function(a) {//Code By Mufeng
var l = a(".commentshow"), y = fspostid, r = fsajaxurl, z = '<div id="loading-comments"></div>';
l.on("click", ".commentnav a", function(b) {
b.preventDefault();
var b = a(this).attr("href"), c = 1;
/comment-page-/i.test(b) ? c = b.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0] :/cpage=/i.test(b) && (c = b.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0]);
a.ajax({
url:r + "?action=fs_ajax_pagenavi&post=" + y + "&page=" + c,
beforeSend:function() {
l.html(z);
},
error:function(a) {
alert(a.responseText);
},
success:function(b) {
l.html(b);
a("body, html").animate({
scrollTop:l.offset().top - 50
}, 1e3);
}
});
});
});
</code>
至于样式,自行添加~
方法二
这种方法感觉比上面一种 好些,兼容性较好~
一般来说页面结构是这样的着这样的
<code>
<span id="cp_post_id" style="display:none;"><?php echo $post->ID; ?></span>
<?php //上面这个是定义一个id,为了js获取当前文章的ID ?>
<ol class="commentlist">
<?php wp_list_comments( array( 'type' => 'comment', 'callback' => 'comment_list_comments' ) );
//这个是输出评论列表的函数 callback 指的是回调函数,用来自定义漂亮评论列表函数~
?>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
// 用来判断 评论页面是否大于1 也就是判断评论是不是只有一页,若只有一页,怎不输出翻页链接 ?>
<div class="commentpages">
<?php paginate_comments_links( array( 'prev_text' => ' ', 'next_text' => ' ' ) );?></div>
<div id="cpageleft" class="cornerLeft"></div><div id="cpageright" class="cornerRight"></div>
<?php endif; //结束判断 ?>
</ol>
</code>
<span id="cp_post_id" style="display:none;"><?php echo $post->ID; ?></span>
<?php //上面这个是定义一个id,为了js获取当前文章的ID ?>
<ol class="commentlist">
<?php wp_list_comments( array( 'type' => 'comment', 'callback' => 'comment_list_comments' ) );
//这个是输出评论列表的函数 callback 指的是回调函数,用来自定义漂亮评论列表函数~
?>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
// 用来判断 评论页面是否大于1 也就是判断评论是不是只有一页,若只有一页,怎不输出翻页链接 ?>
<div class="commentpages">
<?php paginate_comments_links( array( 'prev_text' => ' ', 'next_text' => ' ' ) );?></div>
<div id="cpageleft" class="cornerLeft"></div><div id="cpageright" class="cornerRight"></div>
<?php endif; //结束判断 ?>
</ol>
</code>
下面的就是用来回应ajax的~~一般放在fuctions.php中
<code>
<?php
function AjaxCommentsPage() {
if ( isset($_GET["action"]) && $_GET["action"] == "AjaxCommentsPage" ) {
global $post,$wp_query, $wp_rewrite;
$postid = isset($_GET["post"]) ? $_GET["post"] : null;
$pageid = isset($_GET["page"]) ? $_GET["page"] : null;
//获取请求传递过来的值 id
if ( !$postid || !$pageid ) {
fail(__("Error post id or comment page id."));
}
// get comments
$comments = get_comments("post_id=" . $postid);
$post = get_post($postid);
if ( !$comments ) {
fail(__("Error! can\'t find the comments."));
}
if( "desc" != get_option("comment_order") ){
$comments = array_reverse($comments);
}
// set as singular (is_single || is_page || is_attachment)
$wp_query->is_singular = true;
// base url of page links
$baseLink = "";
if ( $wp_rewrite->using_permalinks() ) {
$baseLink = user_trailingslashit(get_permalink($postid) . "/comment-page-%#%", "commentpaged");
}
// response 下一行 WinyskyComments注意修改callback为你自己的回调函数
wp_list_comments("type=comment&callback=comment_list_comments&page=" . $pageid . "&per_page=" . get_option("comments_per_page"), $comments);
echo '<div class="commentpages">';
paginate_comments_links( array(
'prev_text' => ' ',
'next_text' => ' ',
'current' => $pageid,
'base' => $baseLink
) );
echo '</div><div id="cpageleft"></div><div id="cpageright"></div>';
die;
} else {
return;
}
}
add_action('init', 'AjaxCommentsPage');
?>
</code>
<?php
function AjaxCommentsPage() {
if ( isset($_GET["action"]) && $_GET["action"] == "AjaxCommentsPage" ) {
global $post,$wp_query, $wp_rewrite;
$postid = isset($_GET["post"]) ? $_GET["post"] : null;
$pageid = isset($_GET["page"]) ? $_GET["page"] : null;
//获取请求传递过来的值 id
if ( !$postid || !$pageid ) {
fail(__("Error post id or comment page id."));
}
// get comments
$comments = get_comments("post_id=" . $postid);
$post = get_post($postid);
if ( !$comments ) {
fail(__("Error! can\'t find the comments."));
}
if( "desc" != get_option("comment_order") ){
$comments = array_reverse($comments);
}
// set as singular (is_single || is_page || is_attachment)
$wp_query->is_singular = true;
// base url of page links
$baseLink = "";
if ( $wp_rewrite->using_permalinks() ) {
$baseLink = user_trailingslashit(get_permalink($postid) . "/comment-page-%#%", "commentpaged");
}
// response 下一行 WinyskyComments注意修改callback为你自己的回调函数
wp_list_comments("type=comment&callback=comment_list_comments&page=" . $pageid . "&per_page=" . get_option("comments_per_page"), $comments);
echo '<div class="commentpages">';
paginate_comments_links( array(
'prev_text' => ' ',
'next_text' => ' ',
'current' => $pageid,
'base' => $baseLink
) );
echo '</div><div id="cpageleft"></div><div id="cpageright"></div>';
die;
} else {
return;
}
}
add_action('init', 'AjaxCommentsPage');
?>
</code>
上面有些东西依据自己的主题修改~
下面就是js驱动的代码了
<code>
<script type="text/javascript">
$(".commentpages a").click(function() { //点击翻页连接时执行
var wpurl = $(this).attr("href").split(/(\?|&)action=AjaxCommentsPage.*$/)[0];
//在?之后添加函数
var commentPage = 1;
if (/comment-page-/i.test(wpurl)) {
commentPage = wpurl.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0];
} else if (/cpage=/i.test(wpurl)) {
commentPage = wpurl.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0];
};
// alert(commentPage); // 获取页数
var postId = $("#cp_post_id").text();
// alert(postId); // 获取postid 这个id就是刚刚我定义的那个
var url = wpurl.split(/#.*$/)[0]; //去除url里#后面的无意标签
url += /\?/i.test(wpurl) ? "&" : "?";
url += "action=AjaxCommentsPage&post=" + postId + "&page=" + commentPage;
// alert(url); // 看看传入参数是否正确
$.ajax({
url: url,
type: "GET",
beforeSend: function() { //提交之前所做的动作
$(".commentlist").css({cursor:"wait"});
//鼠标箭头变等待
var C = 0.6;
$(".commentlist").css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:"alpha(opacity=" + C*100 + ")"});
//评论列表变透明
////这么一大段就是为了通过查找主题载入的all.js的url 来获取 你主题的目录位置
var i = 0, got = -1, len = document.getElementsByTagName("script").length;
while (i <= len && got == -1) {
var js_url = document.getElementsByTagName("script")[i].src,
got = js_url.indexOf("all.js"); i++;
}
wp_theme_url = js_url.substr(0, js_url.indexOf("inc/all.js")),
///////获取到了主题目录,再加个images/ajaxload.gif就是加载时显示gif动画
pic_loading = wp_theme_url + "images/ajaxload.gif";
var loading = '<div id="comment-loading"><img decoding="async" src="' + pic_loading + '" style="vertical-align:middle;" /> 正在载入,请稍候...</div>';
$(".commentpages").html(loading);
//把动画插入到.commentpages后面
},
error: function(jqXHR, textStatus) {
//alert(textStatus);
window.location.href = $(this).attr("href");
//失败后再次尝试
},
success: function(data) {
$(".commentlist").html(data);
//返回的数据放在.commentlist里
var C = 1;
$(".commentlist").css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C*100 + ')'});
//恢复不透明
$("#comment-loading").remove();
//移除加载动画
$(".commentlist").css({cursor:"auto"});
//恢复鼠标箭头样式
$body.animate({scrollTop:$("#comments").offset().top-40}, 1000);
//动画滚动到#comments ,就是评论列表顶部即评论第一条
AjaxCommentsLoad();
//重新执行以下可能在评论中用到的函数比如AjaxCommentsLoad();
}
});
return false;
});
</script>
</code>
<script type="text/javascript">
$(".commentpages a").click(function() { //点击翻页连接时执行
var wpurl = $(this).attr("href").split(/(\?|&)action=AjaxCommentsPage.*$/)[0];
//在?之后添加函数
var commentPage = 1;
if (/comment-page-/i.test(wpurl)) {
commentPage = wpurl.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0];
} else if (/cpage=/i.test(wpurl)) {
commentPage = wpurl.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0];
};
// alert(commentPage); // 获取页数
var postId = $("#cp_post_id").text();
// alert(postId); // 获取postid 这个id就是刚刚我定义的那个
var url = wpurl.split(/#.*$/)[0]; //去除url里#后面的无意标签
url += /\?/i.test(wpurl) ? "&" : "?";
url += "action=AjaxCommentsPage&post=" + postId + "&page=" + commentPage;
// alert(url); // 看看传入参数是否正确
$.ajax({
url: url,
type: "GET",
beforeSend: function() { //提交之前所做的动作
$(".commentlist").css({cursor:"wait"});
//鼠标箭头变等待
var C = 0.6;
$(".commentlist").css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:"alpha(opacity=" + C*100 + ")"});
//评论列表变透明
////这么一大段就是为了通过查找主题载入的all.js的url 来获取 你主题的目录位置
var i = 0, got = -1, len = document.getElementsByTagName("script").length;
while (i <= len && got == -1) {
var js_url = document.getElementsByTagName("script")[i].src,
got = js_url.indexOf("all.js"); i++;
}
wp_theme_url = js_url.substr(0, js_url.indexOf("inc/all.js")),
///////获取到了主题目录,再加个images/ajaxload.gif就是加载时显示gif动画
pic_loading = wp_theme_url + "images/ajaxload.gif";
var loading = '<div id="comment-loading"><img decoding="async" src="' + pic_loading + '" style="vertical-align:middle;" /> 正在载入,请稍候...</div>';
$(".commentpages").html(loading);
//把动画插入到.commentpages后面
},
error: function(jqXHR, textStatus) {
//alert(textStatus);
window.location.href = $(this).attr("href");
//失败后再次尝试
},
success: function(data) {
$(".commentlist").html(data);
//返回的数据放在.commentlist里
var C = 1;
$(".commentlist").css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C*100 + ')'});
//恢复不透明
$("#comment-loading").remove();
//移除加载动画
$(".commentlist").css({cursor:"auto"});
//恢复鼠标箭头样式
$body.animate({scrollTop:$("#comments").offset().top-40}, 1000);
//动画滚动到#comments ,就是评论列表顶部即评论第一条
AjaxCommentsLoad();
//重新执行以下可能在评论中用到的函数比如AjaxCommentsLoad();
}
});
return false;
});
</script>
</code>
文章到此结束~~以上内容只是我分析了一遍原理,但我未实际测试,可能存在某些错误~