关于wordpress:我是如何在一天之内搭建wordpress博客分析平台

背景

两年前，为了有个中央能记录本人一些技术心得，于是用 wordpress 搭建了集体站点到当初曾经写了上百篇的博文，但始终有个问题没有解决，就是如何统计博客的访问量，也装置了 wordpress 统计插件 WP Statistics 但理论用下来成果并不好，起因在于

• 我关怀每天每篇文章的访问量
• 关怀访问者所处的城市
• 关怀拜访起源
• 关怀搜寻关键词

这些数据你在插件里也能找到，但插件同时也混淆了很多不须要的数据，并且并没有依照我预期的格局组织好，总之就是不好用。前面又试了百度统计还不如 WP Statistics，基于以上这些状况，因而思考自开发一个博客流量剖析平台。

计划

须要记录的数据

本着实现外围性能为目标，在字段上并没有记录太多字段，mysql 表构造如下

CREATE TABLE wp_statistic (
    id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
    ip varchar(20),
    location varchar(200),
    title varchar(200),
    post_id int,
    referrer varchar(500),
    visit_time timestamp NULL DEFAULT CURRENT_TIMESTAMP
)

• ip：访问者 ip
• location：访问者地点
• title：文章题目
• post_id：文章 id
• referrer：援用
• visit_time：拜访工夫，默认以后工夫

地点问题

如何依据 ip 获取地点，百度有接口，但接口须要一个 timestamp 字段，该字段应该是以某种规定进行 hash，摸索了一段时间破解不了，遂放弃，最初抉择了太平洋网络接口，不仅格局多样，而且没有限度。

curl http://whois.pconline.com.cn/ip.jsp?ip=112.47.173.143
福建省泉州市 移通

技术选型

我自身主力语言是 java，身份也是 java 开发，但看过我博客的同学应该晓得，我对前端也有肯定的涉略，虽算不上精通，但写写管理系统还是足够的，前端抉择 vue，理由是简略好学，ui 抉择 vuetifyjs，vuetifyjs 是在尤雨溪在知乎上这篇答复第一次接触，相比国内的 ant design 和 element ui，给人感觉就是更具匠心，总之被安利了，本人也给予这个框架二开了一个 admin 的框架，前面会提到该方面内容。后端当然首选 java，但思考到服务器配置顾此失彼，阿里云 ECS 1 核 1G，曾经跑了一个 wordpress，很难再跑一个 jvm，不得与抉择 PHP 作为后端开发语言，这样能够利用现有的 Apache PHP，因为 PHP 也是现用现学，所以代码上可能有一些不合理的写法大家多担待，也心愿 PHP 高手可能指出问题。

流程

大略流程如下

• 在 wordpress 页面插入一段 js
• js 会创立一个 script 标签，借鉴了 jsonp 的思路，script 标签能够绕过跨域问题
• script 会申请后盾，将一些要害信息，比方 title 和 refrerer 作为 script 的申请参数带到后盾
• 后盾记录申请信息

引入 js 代码

须要批改 wordpress 页面代码，引入一段 js，该 js 将数据传入后盾，根本大多数网站剖析实现原理都是相似，有很多防备引入，这边举荐批改主题目录下 header.php 文件，具体门路为wp-content/themes/{主题名称}/header.php，引入的代码如下

<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");
  var src="/log/server.php"+"?title="+document.title+"&referrer="+document.referrer;
  hm.src = src;
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

/log/server.php是后端数据接管接口

server.php

<?php
require_once('../wp-config.php');
require_once('../wp-includes/wp-db.php');
require_once('../wp-includes/class-wp-http-curl.php');
header("Content-Type: text/html; charset=utf-8");
$title = $_GET["title"];
$referrer = $_GET["referrer"];
$ua = $_SERVER['HTTP_USER_AGENT'];
$ip = $_SERVER['REMOTE_ADDR'];
$wpdb = new wpdb(DB_USER, DB_PASSWORD, DB_NAME, DB_HOST);
$http = new WP_Http_Curl();
$resopnse = $http->request('http://whois.pconline.com.cn/ip.jsp?ip=' . $ip);
$location = iconv('GB2312', 'UTF-8', $resopnse['body']);
$wpdb->query($wpdb->prepare("INSERT INTO wp_statistic(ip,location,title,ua,referrer) VALUES (%s,%s,%s,%s,%s)", $ip, $location, $title, $ua, $referrer));
?>

• wordpress 自身自带了一个数据库操作类 wpdb 和 curl 类 WP_Http_Curl，间接调用就行
• 获取 ip 返回的是 GBK，须要转为 UTF-8

这样通过 js 和 server.php 的配合，拜访数据就胜利进来了，前面就是要开发治理界面用于展现。

前端

前端是应用基于 vuetifyjs 开发的一个 admin 框架，先看下成果

该框架包含以下基本功能

• 登录页
• 菜单配置
• 利用信息配置
• 单页面拜访能力
• 封装好的查问夜
• 等等

以下面页面为例，页面展现的是实时的拜访数据，前端代码如下

<template>
    <v-page-data-table
            title="实时拜访数据"
            key-name="id"
            :fields="fields"
            :height="535"
            hide-row-action
            query-api="REALTIME_QUERY">
        <template v-slot:referrer="{item}">
            <a target="_blank" :href="item.referrer" class="pointer-text" style="text-decoration: none">{{item.referrer}}</a>
        </template>
    </v-page-data-table>
</template>
<script>
    import realTimeFields from "./realTimeFields";
    export default {
        name: "RealtimeQuery",
        data() {
            return {fields: realTimeFields}
        }
    }
</script>

代码虽短，但查问页该有的性能都蕴含，包含

• 分页
• 全局含糊搜寻
• 单字段含糊搜寻
• 高级搜寻
• 下载 excel
• 刷新
• 自定义按钮
• 等等

因而能够保障在一天之内实现所有页面的开发，本次开发了三个页面

• 实时拜访数据
• 文章拜访排行

• 每日拜访统计

后端接口

后端接口应用 php 开发，开发好的接口间接上传到 wordpress 源码目录下（这里我创立了一个 log 目录），后端包含以下接口

• 登录接口
• 实时拜访数据接口
• 文章拜访排行接口
• 每次拜访统计接口

零碎拜访

零碎目前已开发，有趣味的同学能够点击这里拜访零碎，用户名明码为 guest/guest 如果你有更好的倡议和意见欢送留言

源码

所有代码都已上传至 github，欢送 start