前言
WP-Super-Cache是WordPress上著名的缓存插件，它可以将动态页面保存为静态页面提供给访客，以此来提升加载速度。本博近日准备使用这个插件，但在本地测试时发现使用插件后文章浏览计数不会增加。
问题分析
原因
现用主题的计数方法是将函数勾到single/page的get_header上，在函数内对文章自定义字段views进行读写操作。当插件生成静态页面后，由于此时访问服务器将直接返回静态html，因此不会去执行相关的WP代码。
解决方案
不再通过php函数获取计数，而是通过jQuery ajax异步发送请求，根据服务器的响应来填充对应内容。由于js代码在浏览器中执行，因此就不会有上述问题。为了在服务器端实现这个功能，admin-ajax.php就要登场了！
什么是admin-ajax.php
我们可以将admin-ajax.php理解为wordpress提供的ajax接口(你可能只在漏洞列表里见过它)，当用户按照WordPress规定的方法注册自己的响应方法后，便可以通过get或post该文件的方式来获取你编写的方法响应。
编写服务器响应方法
分析需求，在PureLove主题中，有两处与自定义字段views打交道的地方：
- 首页文章列表中显示的计数(读);
- 文章或页面顶部显示的计数(读+写)。
因此，需要写两个响应方法，一个读取，一个写入(增加浏览次数)。
1.读取方法
//自定义字段名
ThemeConfig::$views_meta_name = "views";
//获取浏览计数
function GetVisiters()
{
$post_ID = $_GET["post_id"];
if($post_ID != "")
{
$post_views = (int)get_post_meta($post_ID,ThemeConfig::$views_meta_name,true);
if($post_views == "")
{
//删除错误字段
delete_post_meta($post_ID,ThemeConfig::$views_meta_name);
//重新添加字段
add_post_meta($post_ID,ThemeConfig::$views_meta_name,1,true);
}
echo json_encode($post_views);
}
else
{
echo json_encode(0);
}
//退出当前脚本
die();
}
/*
//wp_ajax_nopriv_ 是在没有登录的处理流程;wp_ajax_是登录后的处理流程
add_action( 'wp_ajax_nopriv_***', 'dosome' );
add_action( 'wp_ajax_***', 'dosome' );
//原理见admin-ajax.php，wp是开源的
*/
//绑定
add_action("wp_ajax_nopriv_GetVisitors","GetVisitors");
add_action("wp_ajax_GetVisitors","GetVisitors");
2.写入方法
//增加并返回浏览计数
function SetVisitors()
{
$post_ID = $_GET["post_id"];
if($post_ID != "")
{
$post_views = (int)get_post_meta($post_ID,ThemeConfig::$views_meta_name,true);
//计数+1
if(!update_post_meta($post_ID,ThemeConfig::$views_meta_name,$post_views + 1))
{
//删除错误字段
delete_post_meta($post_ID,ThemeConfig::$views_meta_name);
//重新添加字段
add_post_meta($post_ID,ThemeConfig::$views_meta_name,1,true);
}
//返回增加后的计数
echo json_encode($post_views+1);
}
else
{
echo json_encode(0);
}
//退出当前脚本
die();
}
add_action("wp_ajax_nopriv_SetVisitors","SetVisitors");
add_action("wp_ajax_SetVisitors","SetVisitors");
编写前端脚本
提示：静态化的过程会将php代码执行结果直接生成在html代码间。
1.首页获取计数
由于首页文章列表是通过WordPress主循环打印的，因此为了获取每篇文章的计数，这段代码也放在主循环中。
<!-- html人数容器 -->
<span id= "viewsNum-<?php the_ID(); ?>" itemprop="ratingCount">...</span>人阅读
<!-- 异步查询更新人数 -->
<script>
jQuery(document).ready(function($)
{
$.ajax(
{
type:"GET",
url:"<?php echo admin_url('admin-ajax.php') ?>",
data:{action:"GetVisitors",post_id:"<?php the_ID(); >"},
dataType:"json",
success:function(data){
$("#viewsNum-<?php the_ID() ?>").html(data);
}
})
})
</script>
2.文章页更新并获取计数
<!-- 容器 -->
<span id ="viewsNum" itemprop="ratingCount">...</span>人阅读
<!-- 异步更新或获取 -->
<script type="text/javascript">
jQuery(document).ready(function($)
{
$.ajax(
{
type: "GET",
url: '<?php echo admin_url('admin-ajax.php') ?>',
data: {action:"SetVisitors",post_id:"<?php echo($post->ID) ?>"},
dataType: "json",
success: function(data)
{
$("#viewsNum").html(data);
}
})
})
</script>
当PureLove主题改造到这里后，它已经可以与Wp-Super-Cache兼容了。
Wp-Super-Cache 设置
许多人都开启了“不要为已知用户缓存”，这个对PureLove主题来说是没有必要的。因为该主题的计数功能已经经过改造，而它的评论系统为ajax提交，因此只需开启当某页面有新评论时，只刷新该页面的缓存就好。
其他内容按需设置。之后，便可以在预缓存需要的内容啦！
检查静态化是否生效
在任意页面查看源代码，如果最下有类似的注释：
<!-- Dynamic page generated in 3.125 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2018-02-26 19:47:18 -->
<!-- super cache -->
则代表缓存成功。
