使用 Ajax 实现文章点击计数插件

文章点击计数是网站的一个基本功能，我们在这篇文章中介绍过具体的实现方法，那么这个方法有一个不足就是当网站启用了网页缓冲功能的时候，如果用户点击的文章页面是从缓冲里面提取的话，就不会更新数据库中保存的文章计数了，本篇文章就是要改进一下这个代码，通过使用 Ajax 来支持缓冲方式的文章计数功能。

在上一篇文章中我们介绍了 WordPress 插件的创建和实现方法，那么本篇文章就按照插件的方式实现支持缓冲的文章计数功能。这个插件包含两个部分的代码，即主程序代码实现 Ajax 服务端文章计数功能，前端 JavaScript 代码实现 Ajax 调用服务端代码的功能，下面分别做说明：

一、WordPress Ajax 调用规则

WordPress 系统核心提供了 Ajax 的基础服务，按照其访问和调用规则来建立客户端和服务端的通讯。这个规则主要涵盖三个方面的内容：

1、Ajax 服务端代码：实现具体的功能和建立调用接口，如下所示：

/*建立服务端代码调用接口*/
add_action( 'wp_ajax_my_plugin', 'my_plugin' );
/*服务端功能代码*/
function my_plugin() {
	$post_id = $_POST['post_id'];/*客户端传入的参数*/
        echo $post_id;
	wp_die();
}

2、Ajax 服务端与客户端通讯和数据交换代码：实现客户端 JavaScript 代码引用和数据较换接口，如下所示：

add_action( 'wp-footer', 'my_plugin_enqueue' );
function my_plugin_enqueue() {
    if( !is_single() ) {
	// 处于非单一文章时不做处理
	return;
    }
        
	wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_plugin.js', __FILE__ ), array('jquery') );

	// 建立前后端数据交换接口
	wp_localize_script( 'ajax-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'post_id' => get_the_ID() ) );
}

3、Ajax 客户端代码：实现对服务端代码的调用，如下所示：

jQuery(document).ready(function($) {
	var data = {
		'action': 'my_plugin',
		'post_id': ajax_object.post_id      // ajax_object 需在数据交换接口部分定义好，参看上面第三段代码（wp_localize_script）
	};
	// 发出 Ajax 调用
	jQuery.post(ajax_object.ajax_url, data, function(response) {
		alert('服务端返回值是: ' + response);
	});
});

在 WordPress 中使用 Ajax 服务的方法就是上面描述的内容，下面就按照这些规则实现文章计数插件（支持页面缓冲）。

二、文章计数 Ajax 服务端代码及数据交换代码

<?php
/**
 * Plugin Name: Post view count plugin
 * Plugin URI: https://www.kflyo.com
 * Description: Set post views count by ajax
 * Version: 0.0.1
 * Author: kflyo
 * Author URI: https://www.kflyo.com
 * License: GPL
 */

add_action( 'wp_footer', 'plugin_enqueue_scripts' );
function plugin_enqueue_scripts() {
	if(is_single())	{
		wp_enqueue_script( 'pvs-kflyo', plugins_url( '/js/kflyo-pvs-ajax.js', __FILE__ ) , array('jquery') );

		wp_localize_script( 'pvs-kflyo', 'pvs_ajax', array(
										'ajax_url' => admin_url( 'admin-ajax.php' ),
										'pvs_nonce' => wp_create_nonce('pvs-nonce'),
										'post_id' => get_the_ID()
							));
	}
}
//非登录用户
add_action( 'wp_ajax_nopriv_pvs_ajax_count', 'pvs_ajax_process' );
//登录用户
add_action( 'wp_ajax_pvs_ajax_count', 'pvs_ajax_process' );
function pvs_ajax_process() {
	check_ajax_referer( 'pvs-nonce', 'nonce' );  // 防止非授权调用

	$post_id = $_POST['post_id'];
	if ($post_id) {
		wpa_track_post_views($post_id);
	}
	wp_die();
}
/*点击数计数和保存*/
function wpa_set_post_views($postID) {
    $count_key = 'wpb_post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

function wpa_track_post_views ($post_id) {
	if ( empty ( $post_id) ) {
		return;  
	}

	$p_format = get_the_terms( $post_id, 'post_format' );
	if ( !empty( $p_format ) ) {
		$format = reset( $p_format );
		$format_str = str_replace( 'post-format-', '', $format->slug );
		if( $format_str == 'gallery' || $format_str == 'video' || $format_str == 'image' ) return;
	}

	wpa_set_post_views($post_id);
}

三、文章计数 Ajax 客户端调用代码

jQuery(document).ready( function(){
	jQuery.ajax({
		url : pvs_ajax.ajax_url, 
		type : 'post',
		data : {
			action : 'pvs_ajax_count',  
			nonce : pvs_ajax.pvs_nonce,  
			post_id : pvs_ajax.post_id
		},
		success : function( response ) {
		},
		error : function( response ) {
			console.log(response);
		}
	});
});

把上面两个部分的代码放到插件目录中，其中 JavaScript 代码文件放到 “js” 目录下，然后在后台管理工具中启用该插件即可。