利用admin-ajax.php使浏览计数兼容WP-SUPER-CACHE

前言

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中缓存插··· . 唐野