一个分享WordPress、Zblog、Emlog、Typecho等主流博客的教程网站!
当前位置:网站首页 > 博客教程 > WordPress教程 > 正文

免插件实现wordpress调用历史浏览文章列表

作者:xlnxin发布时间:2021-04-15分类:WordPress教程浏览:469


导读:在网站显示访客的文章浏览历史记录便于访客知道自己阅读过哪些文章,对提高网站的用户体验具有显著的作用。以前介绍过WordPress文章日志浏览历史插件wp-recently...

在网站显示访客的文章浏览历史记录便于访客知道自己阅读过哪些文章,对提高网站的用户体验具有显著的作用。以前介绍过WordPress文章日志浏览历史插件wp-recently-viewed可以实现该功能,但是如果不想通过插件该如何实现?方法是通过提取插件的代码集成到主题中实现。

操作步骤:

1、创建一个history.js文件,文件编码为UTF-8无BOM格式编码,保存在当前主题的js文件夹(没有就创建);

2、在history.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
ViewHistory = function() {
 
	this.config = {
		limit: 10,
		storageKey: 'viewHistory',
		primaryKey: 'url'
	};
 
	this.cache = {
		localStorage:  null,
		userData:  null,
		attr:  null
	};
};
 
ViewHistory.prototype = {
 
	init: function(config) {
		this.config = config || this.config;
		var _self = this;
 
		// define localStorage
		if (!window.localStorage && (this.cache.userData = document.body) && this.cache.userData.addBehavior && this.cache.userData.addBehavior('#default#userdata')) {
			this.cache.userData.load((this.cache.attr = 'localStorage'));
 
			this.cache.localStorage = {
				'getItem': function(key) {
					return _self.cache.userData.getAttribute(key);
				},
				'setItem': function(key, value) {
					_self.cache.userData.setAttribute(key, value);
					_self.cache.userData.save(_self.cache.attr);
				}
			};
 
		} else {
			this.cache.localStorage = window.localStorage;
		}
	},
 
	addHistory: function(item) {
		var items = this.getHistories();
		for(var i=0, len=items.length; i<len; i++) {
			if(item[this.config.primaryKey] && items[i][this.config.primaryKey] && item[this.config.primaryKey] === items[i][this.config.primaryKey]) {
				items.splice(i, 1);
				break;
			}
		}
 
		items.push(item);
 
		if(this.config.limit > 0 && items.length > this.config.limit) {
			items.splice(0, 1);
		}
 
		var json = JSON.stringify(items);
		this.cache.localStorage.setItem(this.config.storageKey, json);
	},
 
	getHistories: function() {
		var history = this.cache.localStorage.getItem(this.config.storageKey);
		if(history) {
			return JSON.parse(history);
		}
		return [];
	}
};
 
if(typeof localStorage !== 'undefined' && typeof JSON !== 'undefined') {
    var viewHistory = new ViewHistory();
    viewHistory.init({
        limit: 5,
        storageKey: 'viewHistory',
        primaryKey: 'url'
    });
}
 
var wrap = document.getElementById('recently_viewed');
// 如果 ViewHistory 的实例存在,则可以将页面信息写入。
if(viewHistory) {
    var page = {
        "title": document.getElementsByTagName('title')[0].innerHTML,
        "url": location.href // 这是 primaryKey
        // "time": new Date()
        // "author": ...
        // 这里可以写入更多相关内容作为浏览记录中的信息
    };
    viewHistory.addHistory(page);
} 
// 如果 ViewHistory 的实例存在,并且外层节点存在,则可显示历史浏览记录
if(viewHistory && wrap) {
    // 获取浏览记录
    var histories = viewHistory.getHistories();
 
    // 组装列表
    var list = document.createElement('ul');
    if(histories && histories.length > 0) {
        for(var i=histories.length-1; i>=0; i--) {
            var historyItem = histories[i];
 
            var item = document.createElement('li');
            var itemLink = document.createElement('a');
            itemLink.href = historyItem.url;
            itemLink.innerHTML = historyItem.title;
 
            item.appendChild(itemLink);
            list.appendChild(item);
        }
 
        // 插入页面特定位置
        wrap.appendChild(list);
    }
}

3、编辑主题的header.php文件,在</head>前面添加以下代码调用刚刚创建的文件:

1
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/history.js"></script>

4、在要调用历史浏览文章列表的位置添加代码:

1
<div id="recently_viewed"></div>

保存文件后,在该位置就会调用自己的浏览历史记录。

标签:wordpresshtmldiv主题插件