零基础建站培训介绍

当前位置:

wordpress网站显示用户的浏览记录

网站显示用户的浏览记录功能在商城网站建设中经常见到,可以记录已浏览的商品的列表。使用wordpress建网站,同样也可以制作这样的显示用户的浏览记录功能。

方法/步骤

  1. 创建一个history.js文件,文件编码为UTF-8无BOM格式编码,保存在当前主题的images文件夹下;
  2. 在history.js文件里粘贴以下的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. Dreamweaver cs6软件打开当前模板的头部模板header.php,放上以下的JS引入代码:
    
    
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/history.js"></script>
  4. 在需要显示用户浏览记录的位置放上以下的DIV代码,即可显示用户的浏览记录了。
    
    
    <div id="recently_viewed"></div>
上一课: 下一课:

2条回应:“wordpress网站显示用户的浏览记录”

  1. 学习建网站学员 虚饰浮华说道:

    我用的主题没有header.php文件怎么办

    • 学习建网站学员 梅山网络公司说道:

      这个方法是对于wordpress网站的,wordpress网站都是有header.php文件的

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 大家都知道如果黑客入侵我们的网站后,他们是可以肆意的在上面搭载钓鱼页面,传播恶意软件,盗取敏感信息等,这特别不利于我们网站。垃圾内容和黑
  • 什么是百度MIP百度MIP (Baidu Mobile Instant Pages - 百度移动网页加速器), 是一套应用于移动网页的开放性技术标准。通过提供MIP-HTML规范、MIP-
  • 如果你的空间不理想或是需要升级服务器,这个时候很可能需要进行网站数据搬家,而数据搬家本身是一件很简单的事情。并且学建站网页专门有这样的课程教
  • HTML5 video是最新HTML5新增标签的视频播放标签。用于网页播放视频。【相关教程:html5入门教程】它的代码是[cce]<video src="abc.mp4" co
  • 网站显示用户的浏览记录功能在商城网站建设中经常见到,可以记录已浏览的商品的列表。使用wordpress建网站,同样也可以制作这样的显示用户的浏览记录
  • 默认情况下Wordpress后台文章列表只显示“文章标题”、“作者”、“所属分类”等基本信息,是不显示每篇文章的浏览量的。下面学做网站论坛论坛一下使用Wordp
  • 如今我们的网站、页面更加需要注重细节,不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV,以及用户以后是否会回访我们的网站
  • PHP判断控制搜索引擎蜘蛛与普通用户看到的内容不一样。如果只想判断百度蜘蛛,就可以使用以下的代码:[cce_php]if (ereg("http://www.baidu.c
  • 对于做网站来说,很头疼的问题就是网站做好后,不同浏览器出现不兼容的情况。主要原因就是由于不同浏览器对某些标签的属性初始值【margin,padding,fon
  • 很多网站都有一个很大的问题,在这个浏览器上显示正常,但在其它浏览器显示却错位。这就是网站浏览器不兼容。如果你在自己建网站时也遇到了不
  • 现在大多网站都会使用JS特效代码,如果浏览器中 禁用了javascript,那么就会导致网站显示不正常,如何去解决浏览器禁用javascript问题呢?浏览器禁用
  • 视频密码: wangzhanxue