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版记住评论者信息的功能和评论信息一键输入

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

本文最后更新于2017年11月22日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

历史上的今天:

  • 博客公众号
  • 关注本博客公众号
  • weinxin
  • 博客小程序
  • 关注本博客小程序
  • weinxin

发表评论

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

目前评论：12   其中：访客  11   博主  1

    • 青春染指流年
      回复 2020年3月1日 下午6:47  11楼

      不错，路过支持…

      • 淘宝直通车
        回复 2018年8月30日 下午4:00  10楼

        这个不错

        • 挖站否
          回复 2018年1月2日 上午9:39  9楼

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

          • 微凉
            回复 2017年6月18日 上午9:49  8楼

            新技能get.

            • 胡渝个人博客
              回复 2016年10月8日 上午9:45  7楼

              不错啊

              • Koolight
                回复 2016年9月26日 上午12:07  6楼

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

                • 堆爱
                  回复 2016年8月9日 下午1:54  5楼

                  花样好多啊！

                  • 叶子
                    回复 2016年7月15日 下午10:50  4楼

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

                    • 蒸汽回收机
                      回复 2016年7月12日 下午2:58  地板

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

                      • BanYuner
                        回复 2016年7月12日 下午2:58  板凳

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

                        • 宋清风博客
                          回复 2016年7月10日 下午1:48  沙发

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