WordPress 添加文章瀏覽歷史功能

本文目錄1通過代碼集成文章瀏覽歷史功能2使用外掛添加文章瀏覽歷史功能2.1wp-recently-viewed2.1.1特別說明2.2類似外掛 – Last Viewed Posts

讓網站記住讀者的瀏覽歷史，讓讀者很方便地知道他最近閱讀瞭你部落格的哪些文章。這一舉措，對於提高用戶體驗應該是不錯的方法。那麼，如何為你的WordPress站點添加這個功能？一起往下看吧！

2個多月前就在 neoease.com 看到 @MG12 的相關教程，也曾經在本地站點折騰過，還真的實現瞭。你可以按照 @MG12 文章歷史瀏覽記錄 這篇文章折騰。

通過代碼集成文章瀏覽歷史功能

折騰的時候是這樣操作的：

1.將下面的代碼另存為一個名為 view-history.js 的js文件（格式為 utf-8 無BOM）[代碼來自於 @MG12]

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

/**
 * @author: mg12 [http://www.neoease.com/]
 * @update: 2013/01/09
 *
 * IE6/7 need a third-party JSON library to polyfill this feature. [https://github.com/douglascrockford/JSON-js/blob/master/json2.js]
 */
 
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 [];
	}
};
 
/* <![CDATA[ */
//引用腳本並初始化對象
if(typeof localStorage !== 'undefined' && typeof JSON !== 'undefined') {
    var viewHistory = new ViewHistory();
    viewHistory.init({
        limit: 5,
        storageKey: 'viewHistory',
        primaryKey: 'url'
    });
}
/* ]]> */
 
/* <![CDATA[ */
// 如果 ViewHistory 的實例存在，則可以將頁面信息寫入。
if(viewHistory) {
    var page = {
        "title": document.getElementsByTagName('title')[0].innerHTML,
        "url": location.href // 這是 primaryKey
        // "time": new Date()
        // "author": ...
        // 這裡可以寫入更多相關內容作為瀏覽記錄中的信息
    };
    viewHistory.addHistory(page);
}
/* ]]> */
 
/* <![CDATA[ */
var wrap = document.getElementById('view-history');
 
// 如果 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 history = histories[i];
 
            var item = document.createElement('li');
            var link = document.createElement('a');
            link.href = history.url;
            link.innerHTML = history.title;
 
            item.appendChild(link);
            list.appendChild(item);
        }
 
        // 插入頁面特定位置
        wrap.appendChild(list);
    }
}
/* ]]> */

/**
* @author: mg12 [http://www.neoease.com/]
* @update: 2013/01/09
*
* IE6/7 need a third-party JSON library to polyfill this feature. [https://github.com/douglascrockford/JSON-js/blob/master/json2.js]
*/ 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 [];
}
}; /* <![CDATA[ */
//引用腳本並初始化對象
if(typeof localStorage !== ‘undefined’ && typeof JSON !== ‘undefined’) {
var viewHistory = new ViewHistory();
viewHistory.init({
limit: 5,
storageKey: ‘viewHistory’,
primaryKey: ‘url’
});
}
/* ]]> */ /* <![CDATA[ */
// 如果 ViewHistory 的實例存在，則可以將頁面信息寫入。
if(viewHistory) {
var page = {
"title": document.getElementsByTagName(‘title’)[0].innerHTML,
"url": location.href // 這是 primaryKey
// "time": new Date()
// "author": …
// 這裡可以寫入更多相關內容作為瀏覽記錄中的信息
};
viewHistory.addHistory(page);
}
/* ]]> */ /* <![CDATA[ */
var wrap = document.getElementById(‘view-history’);
// 如果 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 history = histories[i];
var item = document.createElement(‘li’);
var link = document.createElement(‘a’);
link.href = history.url;
link.innerHTML = history.title;
item.appendChild(link);
list.appendChild(item);
}
// 插入頁面特定位置
wrap.appendChild(list);
}
}
/* ]]> */

2.將 view-history.js  放到你主題下的 js 文件夾中，然後在主題的 footer.php 中使用下面的代碼調用：

1

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

<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>/js/view-history.js"></script>

3.如果你的主題支援小工具，你可以使用 [文本]小工具，添加標題為“瀏覽歷史”，內容為“<div id="view-history"></div>”，然後保存，如下所示：

wpdaxue.com-201303521

就可以看到效果瞭：

wpdaxue.com-201303522

如果你的主題不支援小工具，就自己在需要顯示的地方添加代碼，代碼中隻要包含 id="view-history" 就能顯示出瀏覽歷史，比如：

1
2

<h3>瀏覽歷史</h3>
<div id="view-history"></div>

<h3>瀏覽歷史</h3>
<div id="view-history"></div>

使用外掛添加文章瀏覽歷史功能

wp-recently-viewed

@露兜 同學也根據這個方法制作瞭一個外掛 wp-recently-viewed ，如果你不善於折騰代碼，直接使用外掛也是不錯的選擇。

1.下載 wp-recently-viewed ，安裝並啟用;

2.進入WordPress後臺 – 外觀 – 小工具，找到 瀏覽歷史，拖到右邊你想要顯示瀏覽歷史的地方，填寫標題並保存即可；

3.上面是通過小工具來顯示瀏覽歷史，如果你不喜歡小工具或者你的主題沒有小工具功能，而且你又懂得怎麼修改主題代碼，可以在你想要顯示瀏覽歷史的地方，插入以下HTML代碼：

1
2
3

<div id="recently_viewed">
  <h3>您剛剛看過</h3>
</div>

<div id="recently_viewed">
<h3>您剛剛看過</h3>
</div>

這樣，外掛的JS代碼就會自動在div內部追加瀏覽過的文章列表代碼；當然你也可以使用其他的html框架，隻要保證父級元素含有 id="recently_viewed" 就可以瞭，如你也可以這麼寫：

1

<li id="recently_viewed"></li>

<li id="recently_viewed"></li>

特別說明

有很多網友的文章標題後面帶有部落格名稱，這樣可能不太好看，如果你想去除標題中的部落格名稱，打開：wp-recently-viewed/js/add-history.js，查找：

1

"title": document.getElementsByTagName('title')[0].innerHTML,

"title": document.getElementsByTagName(‘title’)[0].innerHTML,

改為

1

"title": noname[0],

"title": noname[0],

然後再查找：

1

var page = {

var page = {

改成：

1
2
3

var ptitle= document.getElementsByTagName('title')[0].innerHTML;
var noname = ptitle.split(" - "); 
var page = {

var ptitle= document.getElementsByTagName(‘title’)[0].innerHTML;
var noname = ptitle.split(" – ");
var page = {

以上代碼第2行的 – 就是你的文章標題跟部落格名稱的分隔符，請根據實際情況進行修改。

類似外掛 – Last Viewed Posts

Last Viewed Posts 是老外寫的一個外掛，通過cookies保存讀者的瀏覽歷史。當然，每個讀者隻能看到自己的瀏覽歷史。

參考資料：

http://www.neoease.com/recently-viewed-items/

http://www.ludou.org/wordpress-recently-viewed.html

Related posts:

  1. WordPress最近文章瀏覽歷史：WP Recent Views（cookie版）
  2. WordPress添加文章打印和生成PDF的功能
  3. WordPress 文章評分外掛程式：Author Post Ratings
  4. WordPress入門 之 發佈新文章和管理文章
  5. WordPress文章收藏外掛程式：WP Favorite Posts
  6. 如何關閉WordPress 3.5 的 XML-RPC 離線發佈功能
  7. WordPress文章評分外掛程式：WP-PostRatings
  8. WordPress 給某些分類的文章添加密碼保護 Access Category Password

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *