WordPress评论ajax动态加载,解决静态缓存下评论不更新问题 | 张戈博客

  • 时间:
  • 浏览:10

这是有有2个历史遗留问提,自从博客部署了PHP纯静态缓存但是,所有页面也有html静态内容了,但会 在七牛CDN静态分离但是,速率更是达到极致!

不过也带来不少疑难问提,在但是写的《启用WP Super Cache纯代码版本但是的或多或少优化方法 》一文中原因分析总结或多或少正确处理方法 。其中为了正确处理用户无法看一遍最新回复的问提,我也想了多个方法 ,比如成功提交评论就会删除该页缓存、右下角集成清理缓存按钮等。在我多次改进但是,原因分析趋向于完美,但会 这个 php缓存优化也是张戈博客有偿服务最受欢迎的项目之一。

前不久,有大伙拿我的网站练手,用多量代理IP对我的博客进行DDos攻击,无奈之下博客临时转入到百度云加速。转入但是,原因分析把云加速的页面缓存也打开,没有也有了2层缓存:【CDN节点的html缓存】和【服务器的html缓存】。没有我但是写的ajax清理缓存以及评论删除缓存背叛了效果,原因分析只能删除本地的html缓存,而CDN节点的缓存百度并未提供API控制接口,也不用户看一遍的还是缓存内容!

当然,也有强迫症语录,直接关闭百度的页面缓存就可不都可不可以 了!但这也不逃避问提,而没有正确处理问提!也不,本文就分享一下,强迫症是怎么才能 才能 正确处理这个 非需要问提的。

一、自动动态加载评论

这是我最初想到的、但会 是老早就想实现这个 方案:当静态的html页面加载时,评论次责实时从数据库动态拉取数据,原因分析是纯静态下的html页面,也不这个 功能需要JS+Ajax来实现。

①、php评论动态拉取接口代码

<?php
if ('comment_list.php' == basename($_SERVER['SCRIPT_FILENAME']) && !isset($_POST['post_id'])) {
    header("content-type:text/html; charset=utf-8");
    echo '您好!请暂且直接访问这个

页面!';
    exit();
}
require('../wp-blog-header.php');
header("Content-type: text/html;charset=UTF-8");
header('HTTP/1.1 150 OK');
$comments = get_comments(array(
	'post_id' => $_POST['post_id'],
	'status' => 'approve'
));
echo '<ol class="commentlist">';
wp_list_comments('type=comment&reverse_top_level=true&page=0&callback=mytheme_comment&end-callback=mytheme_end_comment',$comments);
echo '</ol>';
?>

Ps:代码的原理就不赘述了,主要用到wp_list_comments内置函数,感兴趣的可不都可不可以 自行了解下。

以上代码保存为php文件,比如ajax-comments.php,保存到网站根目录,备用。

②、Ajax评论请求代码

<script type="text/javascript">
/* 将函数放置到ready中间,页面加载后自动执行 */
jQuery(document).ready(function($){
     Ajax_Comments();   
});
/* Ajax请求,分开写方便调用 */
function Ajax_Comments(){
$.ajax({
    type: "POST",
    url: location.origin+"/ajax-comments.php",
    data:{"post_id":<?php echo $post->ID;?>},
    dataType: "html",
    success: function(out){
        /* 用实时拉取的内容替换原先

的内容 */
        $('.commentlist').html($(out).fadeIn(1150));
    }
});
}
</script>

以上代码可不都可不可以 直接放入网站的footer.php当中。原因分析你可不都可不可以 要添加到js文件中,请除去首尾的script标签,但会 post_id值需要在内部通过php动态定义(搞不清的还是直接贴footer吧)

一阵一阵说明下,2段代码中的【.commentlist】是指评论列表的class,比如知更鸟主题的评论列表的是<ol class=”commentlist”>评论列表</ol>,实际上请根据主题的评论列表class或ID来自行修改!

部署无误但是,每次页面加载也有动态去拉取一次最新的评论,并呈现给用户。

优点:每次打开页面用户都能看一遍最新评论;

缺点:每次打开页面也有动态拉取评论,降低了纯静态效果,拉取的评论分页一阵一阵误差(影响不大)。

二、手动动态刷新评论

这个 方法 灵感源自网络上流行的评论分页Ajax加载:点击评论的下一页,不用刷新整个页面,也不通过ajax拉取被点击那个分页的删改内容,但会 找到评论次责并加载。

简单解释下原理:

比如,张戈博客的留言板,有1150页评论,没有第99页的评论地址应该是:https://zhang.ge/liuyan/comment-page-99/,当点击【99】这个 分页链接时,将触发ajax函数,先隐藏当前分页的所有评论,但会 ajax拉取第99页的内容,但会 将评论次责加载出来,实现不刷新页面来加载评论。

分析了这个 过程,大伙可不都可不可以 发现有有2个形态关键字,那也不分页地址中间的 comment-page-xx !这是个好东西,原因分析你可不都可不可以 要在云加速和本地的缓存中排除这个 关键词的缓存即可!也也不,浏览器直接访问带comment-page-xx这类关键词的地址,就略过缓存,加载动态内容!

但会 ,当大伙部署了ajax评论分页,点击或多或少分页原因分析显示非缓存内容!但会 这还也有我需要的,原因分析你可不都可不可以 要要当前页面也实现动态评论。我知道你聪明人会说,你点到或多或少评论分页,再点回来不就好了嘛?

真是,实现ajax评论分页后,我点到或多或少评论分页,但会 再点回来,真是可不都可不可以 实现评论刷新,但会 却用了2次点击!

好,下面大伙换个层厚,既然 comment-page-xx 是动态页面,没有comment-page-1肯定也是动态页面咯!

于是也有2种情况汇报:第这个 ,文章评论数量还不足生成分页,那这但是但会 我拉取comment-page-1就可不都可不可以 了;第二种,评论原因分析处于分页,没有但会 我拉取这个 comment-page-【页码】即可,也不ajax拉取但是,大伙但会 我通过js判断来决定要拉取的目标地址即可。

没有,js怎么才能 才能 判断评论是是是否分页了呢?很简单,先分析下网页代码:

可不都可不可以 发现分页是有分页对应的class的,没有js但会 我判断这个 class是是否处于就好啦!但会 我还可不都可不可以 发现当前的分页和或多或少分页的class还是不一样的:当前分页的class是【page-numbers current】,而 或多或少分页则是【page-numbers】,如以此来,大伙还可不都可不可以 用js代码 $(‘.page-numbers.current’).html() 获得当前分页的页码!!!

那问提就好正确处理了,大伙但会 我先判断是是否处于分页,但会 根据不同情况汇报抓取不同的目标地址即可!

下面但是现在现在开始 英语 分享代码:

/* 评论ajax获取函数 */
function Ajax_Comments(){
    $.ajax({
        type: "GET",
        url: ajax_url,
        beforeSend: function(){
            /* 触发后移除评论列表、评论分页及评论统计(不清楚的可参考张戈博客的评论ID元素) */
            $('.navigation_c').remove();
            $('.commentlist').remove();
	    $('#comments').remove();
            /* 显示正在加载中效果 */
            $('#loading-comments').slideDown();
            /* 这里判断评论开启并没有评论的情况汇报,sofa是我定义的抢沙发DIV */
            if($('.sofa').html() == undefined && $('.nocomments').html() == undefined ){
                $body.animate({scrollTop: $('.refresh').offset().top - 65}, 1150 );
            /*  这里判断评论已关闭,nocomments是提示本文评论已关闭的div */
            } else if ($('.nocomments').html() != undefined){
                alert('很抱歉!本文评论已关闭。您可不都可不可以

到留言板</a>畅所欲言。');
                return false;
            }
        },
        dataType: "html",
        success: function(out){
            /* 在ajax拉取内容中查找评论列表次责 */
	    commentlist = $(out).find('.commentlist');
            /* 原因分析没有评论,则提示抢沙发 */
            if(commentlist.length == 0) {
                $('#loading-comments').hide();
                alert('暂无评论,您可不都可不可以

抢沙发哟~!;');
                return false;
            /* 原因分析有评论,则移除抢沙发模块 */
            } else {
                $('#sofa').remove();
            }
            /* 获取评论统计DIV模块,有的主题原因分析没有 */
            comments = $(out).find('#comments'); 
            /* 获取评论分页DIV模块 */
            nextlink = $(out).find('.navigation_c');
            $('#loading-comments').slideUp('fast');
            /* 将评论统计输出到(加载中)模块的中间,并移除[加载中]模块 */
	    $('#loading-comments').after(comments.fadeIn(1150));
            /* 将评论列表输出到评论统计模块的中间 */
	    $('#comments').after(commentlist.fadeIn(1150));
            /* 将评论分页输出到评论列表的中间,完成本次加载 */
            $('.commentlist').after(nextlink);
        }
    });  
}

/* 评论ajax分页 */
$('.page-numbers').live('click', function(e){
    e.preventDefault();
    if ($(this).attr('href') != undefined) {
        ajax_url = $(this).attr('href');
    } else {
        /* 点击当前分页页码也可不都可不可以

刷新评论 */
        ajax_url = page_url+"/comment-page-"+$('.page-numbers.current').html()+"/#comments";
    }
    Ajax_Comments()
});

/* 手动刷新评论 */
function refresh_Comments(){
    /* 根据文章是是否处于分页,定义不同的抓取地址 */
    if ($('.page-numbers.current').html() != undefined) {
        /* 原因分析处于分页,则抓取当前分页地址 */
        ajax_url = page_url+"/comment-page-"+$('.page-numbers.current').html()+"/#comments";
    } else {
        /* 原因分析没有分页,则抓取comment-page-1 */
        ajax_url = page_url+"/comment-page-1/#comments";
    }
    Ajax_Comments();
}

/* 将评论刷新函数绑定到ID为refresh的点击事件上 */
$(function(){ 
    $("#refresh").click(function(){
        refresh_Comments();
    }); 
});

使用方法 很简单,把这个 代码添加到主题已有的js中,但会 在任意位置新增有有2个ID为refresh的html元素即可,比如:

<div id="refresh">刷新评论</div>

Ps:这个 代码参考修改自:《WordPress Ajax 评论分页 | Kayo’s Melody》,但会 原因分析没看懂ajax评论分页,本文分享的也会看得稀里糊涂的,尤其是代码中的ID元素,不同主题是不一样的。

本文分享的方法 和思路,原因分析也有真正需要,你可不都可不可以 要会看得很痛苦,原因分析我写的也很痛苦!也不地方不好解释,原因分析你没有需求,就原因分析看不懂!!但会 ,只也不用心折腾过的功能,我都想分享出来,网络这个 林子没有大,不原因分析就没有同样需求的人吧?!有但是,【正确处理思路】真心比【实现代码】来的更加难得!

这个 看似很繁杂的文章,实际上,光看文章是很费解的,我每所有人 建议结合我每所有人 的需求,但会 对比张戈博客的页面源代码去参考,会更容易理解或多或少。

好了,废话说了够多了,还是那句话,文章是分享给真正有需要的人,没有需求,又说什么都没有个甲乙丙丁的人,建议暂且在本文浪费口水,说三道四比较好!