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

操作步骤:

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

2、在history.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 [];
}
};

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>前面添加以下代码调用刚刚创建的文件:

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

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

<div id=”recently_viewed”></div>

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

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系客服,我们将尽快处理。

标 签: 实现 wordpress 调用 历史 浏览

上一篇: WordPress获取指定文章作者发布文章的总浏览数量教程

下一篇: WordPress如何删除示例页面

用户评论 (0)

暂无评论

昵 称
验证码 如果您无法识别验证码,请点图片更换

嘿,我来帮您!