WordPress给网站添加js版记住评论者信息的功能和评论信息一键输入

做网站闲鱼觉得一定要有好的用户体验，不然很难留住访客。有的时候闲鱼在逛网站的时候常常看到文章评论要么要注册才能评论，要么要QQ登录才能评论等等，这样感觉体验真不好，麻烦的去过一次就不会再去第二次。所以闲鱼觉得如果可以，开放评论就好了，当然填写必要的信息就可以，用户名，邮箱等等。但是如果每次评论都要填写一遍是不是更麻烦了呢？这里就要说说本文提到的方法了。

添加js版记住功能

这个是直接使用cookie来记住评论者信息的，不但解决了评论需要多次输入信息，还能无视缓存完美解决。

添加js代码

代码是在张戈那里学习到的，将以下代码加入到WordPress的 js 当中即可，比如加入到 comments-ajax.js的最后；如果没有comments-ajax.js，可以将以下代码保存为 saveinfo.js ，前台引入。

  1. //设置Cookie  
  2. function SetCookie(sName, sValue,iExpireDays) {  
  3.     if (iExpireDays){  
  4.         var dExpire = new Date();  
  5.         dExpire.setTime(dExpire.getTime()+parseInt(iExpireDays*24*60*60*1000));  
  6.         document.cookie = sName + "=" + escape(sValue) + "; expires=" + dExpire.toGMTString()+ "; path=/;domain=.macrr.com";  
  7.     }  
  8.     else{  
  9.         document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=.macrr.com";  
  10.     }  
  11. }  
  12. // 目的：    返回Cookie  
  13. function GetCookie(sName) {  
  14.     var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)"));  
  15.     if(arr !=null){return unescape(arr[2])};  
  16.     return null;  
  17.   
  18. }  
  19. //加载用户信息  
  20. function LoadRememberInfo() {  
  21.     var strName=GetCookie("author");  
  22.     var strEmail=GetCookie("email");  
  23.     var strHomePage=GetCookie("url");  
  24.     var bolRemember=GetCookie("chkRemember");  
  25.     var a_vlaue= document.getElementById("author");  
  26.     if (a_vlaue != null){  
  27.         if(bolRemember=="true"){  
  28.                     //通过decodeURIComponent对内容解码  
  29.             if(strName){document.getElementById("author").value=decodeURIComponent(strName);};  
  30.             if(strEmail){document.getElementById("email").value=strEmail;};  
  31.                      //通过decodeURIComponent对内容解码  
  32.             if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);};  
  33.             if(bolRemember){document.getElementById("saveme").checked=bolRemember;};  
  34.         }  
  35.   
  36.         if(GetCookie("username")){  
  37.             document.getElementById("author").value=unescape(GetCookie("username"));  
  38.         }  
  39.     }     
  40. }  
  41. //通过jQuery ready在页面加载时自动从cookies中载入已保存的用户信息  
  42. jQuery(document).ready(function($){  
  43.        LoadRememberInfo();  
  44. //给评论提交按钮绑定信息保存函数  
  45.     $("#respond #submit").click(function(){  
  46.        SaveRememberInfo();  
  47.     });  
  48. //给评论重置按钮绑定信息移除函数  
  49.     $("#respond #reset").click(function(){  
  50.         RemoveRememberInfo();  
  51.     });  
  52. });  
  53. //保存信息函数  
  54. function SaveRememberInfo() {  
  55.     var strName=document.getElementById("author").value;  
  56.     var strEmail=document.getElementById("email").value;  
  57.     var strHomePage=document.getElementById("url").value;  
  58.     var bolRemember=document.getElementById("saveme").checked;  
  59.         //通过encodeURIComponent对内容进行url编码  
  60.     SetCookie("author",encodeURIComponent(strName),365);  
  61.     SetCookie("email",strEmail,365);  
  62.         //通过encodeURIComponent对内容进行url编码  
  63.     SetCookie("url",encodeURIComponent(strHomePage),365);  
  64.     SetCookie("chkRemember",bolRemember,365);  
  65.   
  66. }  
  67. //移除信息函数  
  68. function RemoveRememberInfo() {  
  69.     SetCookie("author",'',365);  
  70.     SetCookie("email",'',365);  
  71.     SetCookie("url",'',365);  
  72.     SetCookie("chkRemember",'false',365);  
  73. }  

添加前台样式

修改comments.php，找到你觉得添加记住我按钮的合适位置,添加以下代码。

  1. <input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">记住我</label></p>  

这样就能实现记住评论者信息的功能了，访客只要第一次填写了信息，下次再评论的时候就无需再次填写了。

注意事项：
①、使用前请务必正确修改js代码中的domian值，否则无法操作cookies；
②、已记住的网站，如需修改更新用户信息，只需输入新的信息，重新提交一次即可刷新cookie；
③、可以将js代码与网站的其他js合并，减少页面的js请求，比如与comments-ajax.js合并。

评论信息一键填入

上面的方法是实现了访客来自己网站能记住信息，有好的体验效果。但是并不是每个网站都会添加这个功能，我们去别人网站要评论的时候，就要一次次填写，很麻烦。这里就简单说下怎么更方便，一键填写评论信息。

    1、打开闲鱼弄的这个页面：评论信息一键填写；
    2、按照内容依次填好个人信息，点击生成，复制JS代码；

Wordpress给网站添加js版记住评论者信息的功能和评论信息一键输入

    3、将页面添加到收藏夹里，把地址改为复制的js代码，保存即可，评论填写信息时，点击一下这个收藏链接，就会一键填写信息了。

Wordpress给网站添加js版记住评论者信息的功能和评论信息一键输入

在其他地方看到很多对于这方面的扩展，教程更加详细多样，闲鱼就不多说了，看来很多都是要不断琢磨的。

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论：10   其中：访客  9   博主  1

    • 挖站否 挖站否 0 来自天朝的朋友 谷歌浏览器 Windows 10 安徽省阜阳市 电信
      回复 2018年1月2日 上午9:39  9楼

      打开闲鱼弄的这个页面：评论信息一键填写；无法打开 了。。。

      • 微凉 微凉 2 来自天朝的朋友 谷歌浏览器 Android 4.4.4 M463C Build/KTU84P 北京市 移动
        回复 2017年6月18日 上午9:49  8楼

        新技能get.

        • 胡渝个人博客 胡渝个人博客 1 来自天朝的朋友 Netscape Navigator Windows XP 重庆市 联通
          回复 2016年10月8日 上午9:45  7楼

          不错啊

          • Koolight Koolight 5 来自天朝的朋友 Safari浏览器 Android 4.4.2 PE-CL00 Build/HuaweiPE-CL00 湖北省 联通
            回复 2016年9月26日 上午12:07  6楼

            很不错的，直接保存个书签，懒人方法！

            • 堆爱 堆爱 3 来自天朝的朋友 QQ浏览器 iPhone iPhone OS 9_3_4 like Mac OS X) AppleWebKit 广东省东莞市 电信
              回复 2016年8月9日 下午1:54  5楼

              花样好多啊！

              • 叶子 叶子 2 来自天朝的朋友 谷歌浏览器 Windows 7 山东省 电信
                回复 2016年7月15日 下午10:50  4楼

                是的，我反正很烦那种要注册的评论。

                • 蒸汽回收机 蒸汽回收机 1 来自天朝的朋友 搜狗浏览器 Windows 7 北京市 联通云BGP数据中心
                  回复 2016年7月12日 下午2:58  地板

                  我那个貌似没弄就有这个功能

                  • BanYuner BanYuner 4 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 联通云BGP数据中心
                    回复 2016年7月12日 下午2:58  板凳

                    已经习惯自己一次性填写了

                    • 宋清风博客 宋清风博客 2 来自天朝的朋友 谷歌浏览器 Windows 7 广东省东莞市 电信
                      回复 2016年7月10日 下午1:48  沙发

                      哦不关我事，我用emlog 其实我想问一下，博主咱换个友链嘛~~

                        • 闲鱼 闲鱼 【博主】 来自天朝的朋友 搜狗浏览器 Windows 7 广东省东莞市 电信
                          回复 2016年7月10日 下午2:18  1层

                          @宋清风博客 可以啊，不过麻烦在友情链接页面申请