解决WordPress开启CDN缓存后文章浏览量不自增的问题

WordPress开启CDN静态缓存页面之后，当我们访问文章的时候，便不会去请求源站，而是返回CDN缓存了的页面，所以文章的浏览数量不会进行自增以及其他的变化。

解决这个问题，我们可以通过Ajax来异步请求服务器，然后再进行文章的浏览数量自增或其他的操作。（注：本方法仅适用于使用了WP-PostViews插件或者和具有WP-PostViews相同字段的博客，若你的文章统计字段不同，可自行修改下方SQL语句以达到效果）

首先，我们在网站的根目录新建一个操作文件，命名为views.php，将以下代码写入此文件中。

旧版（不推荐使用）

<?php require('wp-blog-header.php'); ?>
<?php
	$ajaxHead =  $_SERVER['HTTP_X_REQUESTED_WITH'];

	if(strtoupper($ajaxHead)==strtoupper("XMLHttpRequest")) {
		$post_id = $_POST['post_id'];
		echo $post_id;
		$sql = "update `wp_postmeta` set `meta_value`=`meta_value`+1 where `post_id`='${post_id}' AND `meta_key`='views';";
		$wpdb->query($sql);
	}else{
		header("HTTP/2 404 Not Found");  
		header("Status: 404 Not Found");
		exit;
	}

根据@张戈博主提供的建议与信息，将浏览量记录操作做了过滤以及部分优化，但是由于在服务器端进行验证的话如果不使用Redis等缓存，操作量以及存储的Cookie数据可能会比较多，于是我换了一种方式来进行验证过滤（JavaScript部分），代码如下：

<?php
/**
 * @author Licoy.cn
 * @version 2017/8/8
 */

require('../../wp-blog-header.php');
$isXhr = $_SERVER['HTTP_X_REQUESTED_WITH'];
if (strtoupper($isXhr) == strtoupper("XMLHttpRequest")) {
    $post_id = $_POST['post_id'];
    $po = get_post_meta($post_id,'views',true);
    if(!$po)  {
        //表示不存在这个自定义栏目，那么新增这个自定义栏目
        add_post_meta($post_id, 'views', 1, true);
        echo 1;
    } else {
        // 若已存在这个自定义栏目，则先获取当前数值，并递增+1，再更新数据库
        $count = $po + 1;
        update_post_meta($post_id,'views',$count);
        echo $count;
    }
} else {
    header("Status: 403 Not Found");
    exit;
}

接着我们在主题的page.php文件中插入以下代码：

$(function(){
    function page_views() {
        if(!window.localStorage) {
            console.info('浏览器不支持localStorage');
        }else{
            var post_id = <?php the_ID();?>;
            var views = localStorage.getItem("view_list");
            if(views===null){
                localStorage.setItem("view_list",post_id);
                $.post("/views.php?time="+new Date().getTime(),{post_id:post_id});
                return true;
            }else{
                var item = views.split("|");
                var bool = $.inArray(post_id+'',item);
                if(bool===-1){
                    $.post("/views.php?time="+new Date().getTime(),{post_id:post_id});
                    localStorage.setItem("view_list",views+"|"+post_id);
                    return true;
                }
                return false;
            }

        }
    }
    page_views();
});

到这一步，就已经成功解决了这个问题。

[v_tips]若方法中存在BUG请在下方评论中陈述问题，谢谢！ [/v_tips]

发表于：WordPress

2017-01-10

复制链接

评论（83条评论）

ant 评论达人 LV.1

2020-06-15 11:45:28 回复

一定要用WP-PostViews插件等才会更新吗？主题自带的也是views，但还是不更新。 views.php是不是要放到主题根目录的。

憧憬Licoy 博主

2020-06-16 10:33:52 回复

@ant 是要放到根目录

2020-06-16 19:22:06 回复

@憧憬Licoy 我用了，但是没有用。是什么原因。

我在page.php最开头里面加了alert好像都没有用。（alert功能是没有问题的）
//是不是少了这个？
$(function(){

小蓝评论达人 LV.1

2020-05-31 08:46:37 回复

啊谢谢巨佬提供的方法！

今日新鲜事评论达人 LV.1

2020-03-21 01:13:53 回复

文章不错支持一下，非常喜欢

程门立学评论达人 LV.1

2019-07-15 16:46:59 回复

不错的解决思路

2019-07-15 17:11:20 回复

@程门立学

美女图片评论达人 LV.1

2018-10-06 03:31:39 回复

眼福博客来访，流量大涨！刚好找这解决方法。

2018-10-06 09:52:27 回复

@美女图片 ok

懿古今评论达人 LV.1

2018-03-20 11:03:35 回复

这个我倒是没有关注过，我有那个统计浏览数的插件，开启缓存后我就直接在后台设置为“Use AJAX To Update Views”中选择YES就不管了。

2018-03-20 11:51:58 回复

@懿古今哈哈，那个应该有这类的功能

分享喵评论达人 LV.1

2018-03-11 14:21:36 回复

博主，现在的代码路径是不是有点问题

2018-03-11 20:49:30 回复

@分享喵请根据自己的网站实际结构调整。

酷趣谈博主，有时间的话能帮我看看我这个文章页面吗，https://www.kuqutan.com/1594.html，侧边栏显示到下面去了，其他的页面都正常，不知道是什么原因，不好意思，上次回复的文章页网址错了。谢谢

ipaaa 我是昨天留言的那位，已解决问题。

ipaaa 博主好，之前一直用Git主题。今天突然发现了这个宝藏主题，看了介绍和文档，有两个问题实在没找到，想叨扰下博主： - 平时我发的博客有很多数学公式，博主的主题编辑支持markdown吗，是不是还是需要我自己下载markdown插件？ - 博主的主题是按块排列的，不知道发表的每个博客能不能都是长条类型的排列。