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

15,812次阅读
85条评论

前言

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();});
到这一步,就已经成功解决了这个问题。

解决

若方法中存在 BUG 请在下方评论中陈述问题,谢谢!解决
22
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 2017-01-10发表,共计1975字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(85条评论)
验证码
载入中...
柠檬 评论达人 LV.1
2021-08-04 04:09:56 回复

作者我想问一下为啥我的网站加载不出来头像嘞

WindowsWindowsEdgeEdge92.0.902.62
ant 评论达人 LV.1
2020-06-15 11:45:28 回复

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

WindowsWindowsChromeChrome83.0.4103.97
    憧憬Licoy 博主
    2020-06-16 10:33:52 回复

    @ant 是要放到根目录

    MacintoshMacintoshChromeChrome83.0.4103.97
      ant 评论达人 LV.1
      2020-06-16 19:22:06 回复

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

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

      WindowsWindowsChromeChrome83.0.4103.97
小蓝 评论达人 LV.1
2020-05-31 08:46:37 回复

啊谢谢巨佬提供的方法!

WindowsWindowsEdgeEdge83.0.478.37
今日新鲜事 评论达人 LV.1
2020-03-21 01:13:53 回复

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

WindowsWindowsChromeChrome78.0.3904.108
程门立学 评论达人 LV.1
2019-07-15 16:46:59 回复

不错的解决思路 :mrgreen:

WindowsWindowsChromeChrome63.0.3239.132
美女图片 评论达人 LV.1
2018-10-06 03:31:39 回复

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

WindowsWindowsChromeChrome63.0.3239.132
懿古今 评论达人 LV.1
2018-03-20 11:03:35 回复

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

WindowsWindowsChromeChrome65.0.3325.162
分享喵 评论达人 LV.1
2018-03-11 14:21:36 回复

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

WindowsWindowsChromeChrome64.0.3282.186