零基础建站培训介绍

当前位置:

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文件的

发表评论

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

相关教程

  • 在合肥请人做网站SEO不算贵,我公司也是做这个的,价钱方面找私人肯定比找公司便宜,看你怎么选罢了。特别好还是自己找个员工专门做这个,如果是长久
  • 如何做网站seo (12594 次学习)
    1、制定关键词这是进行SEO优化特别重要的一环,关键词分析包括:关键词关注量分析、竞争对手分析、关键词与网站相关性分析、关键词布置、关键词排名预
  • ECShop程序{insert name='ads' id=1 num=1}意思是ecshop获取广告名称为ads,且广告位id为1,该广告位置的广告数量为1.ecshop它能识别【insert】是广
  • 学基本面论坛制作案例 (11693 次学习)
    学基本面论坛(http://www.xuejibenmian.com/)是细致从事股票,证券培训的论坛网站。网站视频内容从一个从细致的角度讲解基本面,合理预期未来的影
  • 图片网站是一种常见的图片展示网站,那么自己怎么制作图片网站呢,下面介绍一下自己制作图片网站的方法。第一步:本地PHP环境的搭建1、下载本地环
  • 做网站收费标准 (11307 次学习)
    那么找人做网站一般要多少钱呢?下面是学做网站论坛做网站收费标准:网站类型宣传介绍型标准实用型社区门户型电子商城型适用普通企业站(
  • 在公司网站建设中客户需要提供什么材料?学做网站论坛为你介绍,希望对你进行网站建设客户有所帮助。第一、客户对网站制作需求了解你想做成什么样
  • 如你对电商网站了解的话,那就该很清楚此网站的设计不仅很复杂,也有很强的交互性,对不谙此道的人来讲,任务是相当的艰巨。在网站设计圈中,你从业许
  • WordPress后台分类目录是比较单调的,无法像文章那样给分类目录添加缩略图。这在自己做网站时很不方便,如何给Wordpress后台分类目录添加封面缩略图功
  • 如今是信息时代,互联网的发展使得网站制作成为一种时尚潮流。不仅企业会制作自己的网站,很多人也会制作个人网站。但是网站的制作并不是简单的事情,