wordpress缓存导致浏览量不增加解决办法

前端 潘老师 1个月前 (01-17) 72 ℃ (2) 扫码查看

当我们wordpress网站在使用缓存后,用户点击文章页面,发现文章的浏览量不会增加,同样点赞也是类似,我们该如何解决呢?

为了提升用户体验,我们可以采用了AJAX技术来动态获取并刷新文章阅读数量。用户在阅读文章时,后台的AJAX会自动向服务器发送请求,而服务器在接收到请求后,会将原有的阅读数量加1,并实时更新到数据库中。

php接口代码

在这个过程中,最关键的环节就是AJAX提交的请求。为了能够处理这些请求,我们需要一个接口。这个接口就是PHP编写的views.php文件,它被保存在主题目录下的action文件夹中(如果该文件夹不存在,我们需要新建一个)。以下是views.php的核心代码:

<?php
require( dirname(__FILE__).'/../../../../wp-load.php' );
nocache_headers();
$post_ID = isset($_POST['post_ID']) ? (int) $_POST['post_ID'] : 0;
if ($post_ID!=0 ) {
    $post_views = (int) get_post_meta($post_ID, 'views', true);
        if (!update_post_meta($post_ID, 'views', ($post_views + 1))) {
            add_post_meta($post_ID, 'views', 1, true);
        }
    $post_views = (int) get_post_meta($post_ID, 'views', true);
        print_r(json_encode(array('error' => 0, 'views' => 1, 'response' => $post_views)));
        exit;
}else{
    print_r(json_encode(array('error' => 1, 'views' => 0, 'response' => $post_views)));
        exit;
}
?>

这段代码主要涉及WordPress的后台操作和AJAX请求。首先,它引入了WordPress的核心函数支持文件,这是使用WordPress提供的函数所必需的。然后,它设置了响应头部的缓存,以确保浏览器不会缓存页面内容。接下来,它检查POST参数post_id是否存在,如果不存在则将其设置为0。

在代码的逻辑部分,它执行了一些操作,包括存储自定义字段的内容。需要注意的是,add_post_meta函数用于存储自定义字段,具体字段名称需要根据实际情况进行修改。这里使用的是webstack主题的文章阅读数量字段。

ajax请求代码

最后,它使用jQuery来发送AJAX请求获取数据。为了使这段代码能够正常工作,需要确保jQuery库已经在页面中加载,并且这段JavaScript代码需要在HTML内容加载完成之后再执行。

//获取并增加阅读数
function getpostviews(postid){
      $.ajax({
                    type: "POST",
                    url: 'https://www.xxx.com/wp-content/themes/webstack/action/views.php',
                    dataType: "json",
                    data: {"post_ID": postid},
                    success: function(data, textStatus, xhr) {
                    if (data.error){ return false;}else{
            $(".postviews").text("阅读("+data.response+")");
        }
                }
                });
}

请注意,这里只是提供了一个大致的思路和伪代码示例,实际使用时需要根据具体情况进行适当的修改和调整。同时,由于涉及到的代码和操作比较复杂,建议在使用之前进行充分的学习和研究,以确保代码的正确性和安全性。上面的postviews是我的文章阅读数量HTML标签的class名称,根据自己的主题修改,然后在主题的文章页模板single.php中写输出js代码:

<?php
<script type="text/javascript">
$(document).ready(function (){
    echo 'getpostviews('.get_the_ID().');';
});
</script> ?>

在确保文章页加载JavaScript的同时,我们也可以考虑在页脚处输出代码。不过,为了避免在非文章页加载这个函数,我们可以使用WordPress的is_single函数进行判断。这样可以确保只在文章页面执行相关操作。另外,这种方法对于被腾讯CDN或其它CDN缓存的页面,以及被WordPress插件wp_super_cache缓存的页面都适用。当然,请注意,如果浏览器禁止执行JavaScript,或者用户在极短时间内关闭网页,那么阅读数量的更新可能会出现问题。因此,在实际应用中,我们需要权衡各种因素,确保最佳的用户体验。


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12761.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

(2) 个小伙伴在畅所欲言
  1. 用户头像
    ajax很牛鼻的技术,但是好复杂阿
    皇家元林 2024-01-17 23:38 回复