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

wls1036
English

背景

两年前,为了有个地方能记录自己一些技术心得,于是用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

阅读 779

yaya平台
记录yaya平台技术细节

幸福是奋斗出来的

249 声望
72 粉丝
0 条评论
你知道吗?

幸福是奋斗出来的

249 声望
72 粉丝
文章目录
宣传栏