当前位置：首页 > 网站优化 >

Wordpress无插件实现静态缓存文件提高访问速度,评论ajax动态加载,解决静态缓存下评论不更新问题

GG网络技术分享 2025-03-18 16:14 0

Wordpress无插件实现静态缓存文件提高访问速度

自从用了wordpress程序建站后，很多功能都是可以开发的，比如我现在使用的是伪静态功能。这个功能就会导致在某些服务器上打开的速度很慢，当然不是服务器宽带不够，可能是因为获取数据的时候太慢了，导致网站的访问速度变慢了。

解决wordpress伪静态访问很慢的办法：

wordpress生成静态缓存

1、创建一个cache.php文件

将下面代码放在这个文件中，并上传至程序的根目录

<?php
define('CACHE_ROOT', dirname(__FILE__).'/cache');
define('CACHE_LIFE', 86400); //缓存文件的生命期，单位秒，86400秒是一天
define('CACHE_SUFFIX','.html'); //缓存文件的扩展名，千万别用 .php .asp .jsp .pl 等等
$file_name = md5($_SERVER['REQUEST_URI']).CACHE_SUFFIX; //缓存文件名
//缓存目录，根据md5的前两位把缓存文件分散开。避免文件过多。如果有必要，可以用第三四位为名，再加一层目录。
//256个目录每个目录1000个文件的话，就是25万个页面。两层目录的话就是65536*1000=六千五百万。
//不要让单个目录多于1000，以免影响性能。
$cache_dir = CACHE_ROOT.'/'.substr($file_name,0,2);
$cache_file = $cache_dir.'/'.$file_name; //缓存文件存放路径
if($_SERVER['REQUEST_METHOD']=='GET'){ //GET方式请求才缓存，POST之后一般都希望看到最新的结果
if(file_exists($cache_file) && time() - filemtime($cache_file) < CACHE_LIFE){ //如果缓存文件存在，并且没有过期，就把它读出来。
$fp = fopen($cache_file,'rb');
fpassthru($fp);
fclose($fp);
exit();
}
elseif(!file_exists($cache_dir)){
if(!file_exists(CACHE_ROOT)){
mkdir(CACHE_ROOT,0777);
chmod(CACHE_ROOT,0777);
}
mkdir($cache_dir,0777);
chmod($cache_dir,0777);
}
function auto_cache($contents){ //回调函数，当程序结束时自动调用此函数
global $cache_file;
$fp = fopen($cache_file,'wb');
fwrite($fp,$contents);
fclose($fp);
chmod($cache_file,0777);
clean_old_cache(); //生成新缓存的同时，自动删除所有的老缓存。以节约空间。
return $contents;
}
function clean_old_cache(){
chdir(CACHE_ROOT);
foreach (glob("*/*".CACHE_SUFFIX) as $file){
if(time()-filemtime($file)>CACHE_LIFE){
unlink($file);
}
}
}
ob_start('auto_cache'); //回调函数 auto_cache
}
else{
if(file_exists($cache_file)){ //file_exists() 函数检查文件或目录是否存在。
unlink($cache_file); //不是GET的请求就删除缓存文件。
}
}
?>

如下图

3.打开根目录的index.php文件，在<?php后面添加代码

换行，添加require(‘cache.php’);代码，加好了的效果如下：

<?php
require('cache.php');
/**
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
*
* @package WordPress
*/
/**
* Tells WordPress to load the WordPress theme and output it.
*
* @var bool
*/
define( 'WP_USE_THEMES', true );
/** Loads the WordPress Environment and Template */
require __DIR__ . '/wp-blog-header.php';

启用 WP Super Cache 插件静态化

WordPress评论ajax动态加载，解决静态缓存下评论不更新问题

前不久，有朋友拿我的网站练手，用大量代理 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 200 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(500));
}
});
}
</script>

以上代码可以直接贴到网站的 footer.php 当中。如果你要添加到 js 文件中，请除去首尾的 script 标签，而且 post_id 值需要在外部通过 php 动态定义（搞不清的还是直接贴 footer 吧）！

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

部署无误之后，每次页面加载都会动态去拉取一次最新的评论，并呈现给用户。

优点：每次打开页面用户都能看到最新评论；缺点：每次打开页面都会动态拉取评论，降低了纯静态效果，拉取的评论分页有点误差（影响不大）。

二、手动动态刷新评论

这个方法灵感源自网络上流行的评论分页 Ajax 加载：点击评论的下一页，不会刷新整个页面，而是通过 ajax 拉取被点击那个分页的全部内容，然后找到评论部分并加载。

简单解释下原理：

比如，张戈博客的留言板，有 100 页评论，那么第 99 页的评论地址应该是：http://zhangge.net/liuyan/comment-page-99/，当点击【99】这个分页链接时，将触发 ajax 函数，先隐藏当前分页的所有评论，然后 ajax 拉取第 99 页的内容，然后将评论部分加载出来，实现不刷新页面来加载评论。

分析了这个过程，我们可以发现一个特征关键字，那就是分页地址后面的 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}, 800 );
/*  这里判断评论已关闭，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(500));
/* 将评论列表输出到评论统计模块的后面 */
$('#comments').after(commentlist.fadeIn(500));
/* 将评论分页输出到评论列表的后面，完成本次加载 */
$('.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 中，然后在任意位置新增一个 ID 为 refresh 的 html 元素即可，比如：

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

本文分享的方法和思路，如果不是真正需要，我想会看得很痛苦，因为我写的也很痛苦！很多地方不好解释，因为你没有需求，就可能看不懂！！但是，只要是我用心折腾过的功能，我都想分享出来，网络这个林子那么大，不可能就没有同样需求的人吧？！有时候，【解决思路】真心比【实现代码】来的更加难得！

标签： WordPress 教程

上一篇： Python爬虫之xpath语法及案例使用
下一篇：解决fiddler设置手机代理后无法上网问题

网站优化

Wordpress无插件实现静态缓存文件提高访问速度,评论ajax动态加载,解决静态缓存下评论不更新问题