WordPress无插件实现静态缓存文件提高访问速度,评论ajax动态加载,解决静态缓存下评论不更新问题
文章目录
WordPress无插件实现静态缓存文件提高访问速度
自从用了wordpress程序建站后,很多功能都是可以开发的,比如我现在使用的是伪静态功能。这个功能就会导致在某些服务器上打开的速度很慢,当然不是服务器宽带不够,可能是因为获取数据的时候太慢了,导致网站的访问速度变慢了。
解决wordpress伪静态访问很慢的办法:
wordpress生成静态缓存
1、创建一个cache.php文件
将下面代码放在这个文件中,并上传至程序的根目录
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?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的请求就删除缓存文件。 } } ?> |
2.在根目录创建一个文件夹,命名为cache
如下图
3.打开根目录的index.php文件,在<?php后面添加代码
换行,添加require(‘cache.php’);代码,加好了的效果如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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 评论动态拉取接口代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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 评论请求代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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() 获得当前分页的页码!!!
那问题就好解决了,我们只要先判断是否存在分页,然后根据不同情况抓取不同的目标地址即可!
下面开始分享代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/* 评论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 元素即可,比如:
1 |
<div id="refresh">刷新评论</div> |
本文分享的方法和思路,如果不是真正需要,我想会看得很痛苦,因为我写的也很痛苦!很多地方不好解释,因为你没有需求,就可能看不懂!!但是,只要是我用心折腾过的功能,我都想分享出来,网络这个林子那么大,不可能就没有同样需求的人吧?!有时候,【解决思路】真心比【实现代码】来的更加难得!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » WordPress无插件实现静态缓存文件提高访问速度,评论ajax动态加载,解决静态缓存下评论不更新问题