WordPress支持CDN的文章阅读计数

思路:使用Ajax自动提交请求增加文章阅读数,Cookie记录是否已经提交,避免刷新重复提交。

JS代码(保存为views.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//获取Cookie
function getCookie(name) {
    var str = document.cookie;
    var arr = str.split('; ');
    for(var i=0; i<arr.length; i++) {
        var c = arr[i].split('=');
        if(c[0] == name) {
            return c[1];
        }
    }
    return false;
}
//Ajax请求
function setPostmeta(varname, postid, target) {
    var cookie = getCookie(varname);
    if(cookie) return;
    jQuery.ajax({
        cache: false,
        url: ajax_object.ajax_url,
        type: 'POST',
        data: {
            'action': 'add_views',
            'post_id': postid,
        },
        dataType: 'JSON',
        async: true,
        success:function(result) {
            if(result.status == 'success') {
                if(target) target.text(result.views);
                var exdate = new Date();
                exdate.setDate(exdate.getDate() + 360);
                document.cookie = varname + '=' + result.views + '; expires=' + exdate.toGMTString() + '; path=/';
            }
        }
    });
}

functions.php中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//加载JS以及设置Ajax对象
function bzg_load_scripts() {
    if(!is_single()) return;
    wp_enqueue_script('views', get_theme_file_uri('/js/views.js'), 'jquery');
    wp_localize_script('views', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'bzg_load_scripts');

//获取文章阅读数
function bzg_post_views($postid='') {
    global $post;
    if(!$postid && isset($post->ID)) {
        $postid = $post->ID;
    }
    if(!$postid) return 0;

    $views = get_post_meta($postid, 'views', true);
    echo $views ? $views : 0;
}

//Ajax添加阅读数
function bzg_set_post_views() {
    if(!isset($_POST['post_id'])) return;
    $post_id = (int) $_POST['post_id'];
    if(get_post_status($post_id) === false) return;

    $views = get_post_meta($post_id, 'views', true);
    if(!$views) $views = 0;
    $views = $views+1;
    update_post_meta($post_id, 'views', $views);

    wp_send_json(array(
        'status' => 'success',
        'views' => $views,
    ));
}
add_action('wp_ajax_add_views', 'bzg_set_post_views');
add_action('wp_ajax_nopriv_add_views', 'bzg_set_post_views');

single.php中调用JS函数:

1
2
3
4
5
<script type="text/javascript">
    var target = jQuery(".views");
    var post_id = <?php echo $id; ?>;
    setPostmeta("views_" + post_id, post_id, target);
</script>

target是显示文章阅读数的标签,在需要显示文章阅读数的地方这样调用:

1
<span class="views">阅读:<?php bzg_post_views(); ?></span>

缺点是最新的阅读数不能实时显示,毕竟CDN缓存了页面,不过计数是正常写入到数据库的。

原文链接:https://xiaohost.com/2279.html,转载请注明出处。
0