前言

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. 首页文章列表中显示的计数(读);
  2. 文章或页面顶部显示的计数(读+写)。

因此,需要写两个响应方法,一个读取,一个写入(增加浏览次数)。

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 -->

则代表缓存成功。

引用资料

  1. wordpress 的ajax 接口:admin-ajax.php 的利用 . waitdeng
  2. 利用admin-ajax.php解决WordPress中缓存插··· . 唐野

我来吐槽

*

*

9位绅士参与评论

  1. 柠檬酸03-11 11:33 回复

    小兔子还在折腾wp啊

  2. littleplus03-05 13:14 回复

    我都水不动了,你还接着水(滑稽)

    • 野兔03-06 00:57 回复

      非也非也,我博客不会有水贴这种东西

      • Doraemon!03-06 15:06

        _(:з」∠)_真的耶

  3. c0sMx03-03 23:09 回复

    啥时候折腾一下Typecho hhh

  4. 梁兴健03-01 05:42 回复

    😀 😀 好羞射,文章真的好赞啊,顶博主!

  5. mikusa02-28 18:17 回复

    给大佬点赞

  6. 品牌策划02-28 16:38 回复

    快成半个专业人了

  7. 野兔02-28 11:51 回复

    静态化评论测试