How do I build a wordpress blog analysis platform in one day

background

Two years ago, in order to have a place to record some of my technical experience, I used wordpress to build a personal site to now, hundreds of blog posts have been written, but there has been an unresolved problem, that is, how to count the number of blog visits. , Also installed the wordpress statistics plug-in WP Statistics but the actual effect is not good, the reason is

• I care about the number of visits to each article every day
• Caring about the visitor’s city
• Concerned about the source of the visit
• Care about search keywords

You can find these data in the plug-in, but the plug-in is also mixed with a lot of unnecessary data, and it is not organized in the format I expected. In short, it is not easy to use. Later, I tried Baidu Statistics not as good as WP Statistics. Based on the above situation, I consider developing a blog traffic analysis platform by myself.

Program

Data to be recorded

For the purpose of realizing the core functions, there are not too many fields recorded on the fields. The mysql table structure is as follows

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: visitor ip
• location: visitor location
• title: article title
• post_id: post id
• referrer: referrer
• visit_time: visit time, default current time

Location problem

How to get the location based on ip, Baidu has interface , but the interface needs a timestamp field, which should be hashed according to a certain rule. After for a while, it can’t be cracked, so I gave up, and finally chose 160aefd31eab7b Pacific Network interface, not only The formats are diverse and there are no restrictions.

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

Technology selection

My main language is java, and my identity is also java development, but the classmates who have read my blog should know that I also have some knowledge of the front-end. Although I am not proficient, it is enough to write and write a management system. The front-end chooses vue. The reason is simple and easy to learn, ui chooses vuetifyjs , vuetifyjs is the first contact with the answer , compared with domestic ant design and element ui, it feels more ingenious, in short Amway, I also gave this framework to open an admin framework, which will be mentioned later. Of course, java is preferred for the backend, but considering that the server configuration is stretched, Alibaba Cloud ECS 1 core 1G has already run a wordpress, it is difficult to run a jvm, not to choose PHP as the back-end development language, so that you can use the existing Apache PHP, because PHP is also currently learning, so there may be some unreasonable writing methods in the code, everyone should bear it, and I hope PHP experts can point out the problem.

Process

The approximate process is as follows

• Insert a paragraph of js in the wordpress page
• js will create a script tag, drawing on the idea of jsonp, script tag can bypass cross-domain issues
• The script will request the background and bring some key information, such as title and refresher, as the request parameters of the script to the background.
• Record request information in the background

Introduce js code

You need to modify the wordpress page code and introduce a piece of js, which transfers data to the backend. Basically, most website analysis implementation principles are similar. There are many precautions. Here, it is recommended to modify the header.php file in the theme directory. The specific path is wp- content/themes/{theme name}/header.php, the imported code is as follows

<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 is the back-end data receiving interface

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 itself comes with a database operation class wpdb and curl class WP_Http_Curl, which can be called directly
• Obtaining ip returns GBK, which needs to be converted to UTF-8

In this way, through the cooperation of js and server.php, the access to the data is successfully entered, and then the management interface is to be developed for display.

front end

The front end is an admin framework developed based on vuetifyjs, let’s take a look at the effect first

The framework includes the following basic functions

• Login page
• Menu configuration
• Application information configuration
• Single page access capability
• Encapsulated query night
• and many more

Take the above page as an example. The page displays real-time access data. The front-end code is as follows

<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>

Although the code is short, it contains all the functions that the query page should have, including

• Pagination
• Global fuzzy search
• Single field fuzzy search
• Advanced Search
• Download excel
• Refresh
• Custom button
• and many more

Therefore, it can be guaranteed that the development of all pages will be completed within one day. Three pages have been developed this time

• Real-time access to data
• Article access ranking

• Daily visit statistics

Backend interface

The back-end interface is developed using php, and the developed interface is directly uploaded to the wordpress source directory (here I created a log directory), the back-end includes the following interfaces

• Login interface
• Real-time access to data interface
• Article access ranking interface
• Statistics interface per visit

System access

The system has been developed, interested students can click here access the system, the user name password is guest/guest If you have better suggestions and comments, please leave a message

Source code

All codes have been uploaded to github , welcome to start