»

WordPress纯静态化后,cookie记住评论者信息的评论框不能隐藏问题

    WordPress网站建设  
访客SEOWP Rocket服务器变量工作web.config数据库插件CDN的问题wordpresshtaccess重定向WordPress插件缓存浏览器前端爬虫windows主机腾讯云加速HTTP标头Wp Super Cache网络安全IIS百度云加速又拍云CDN

1-wordpres-static-html-c-omemments-hide-author-information

 

WordPress 采用 CDN 纯静态 html 加速以后,出现了一个很蛋疼的小问题:用 cookie 记住评论者的用户名、邮箱信息后,当评论者再次 刷新页面或再次浏览该页面时,上述信息时赤裸裸地保留在那里了,如图1所示,而我们之前的自动隐藏功能没有了,没有了。我们需要的是 图2 那种样子。

 

2-wordpres-static-html-c-omemments-hide-author-information

 

到底发生了什么?来看看 comments.php 文件里面的代码吧:

  1. <?php elseif ( '' !=$comment_author ): ?>  
  2.     <div class="author_avatar">  
  3.         <?php echo get_avatar($comment_author_email$size='64' ); ?>  
  4.             <?php printf ( '欢迎 <strong>%s</strong>', $comment_author); ?> 再次光临<br /><a href="javascript:toggleCommentAuthorInfo();" id="toggle-comment-author-info">修改信息</a>  
  5.                 <script type="text/javascript" charset="utf-8">  
  6.                     //<![CDATA[  
  7.                     var changeMsg = " 修改信息";  
  8.                     var closeMsg = " 关闭";  
  9.                     function toggleCommentAuthorInfo() {  
  10.                         jQuery('#comment-author-info').slideToggle('slow',  
  11.                         function() {  
  12.                             if (jQuery('#comment-author-info').css('display') == 'none') {  
  13.                                 jQuery('#toggle-comment-author-info').text(changeMsg);  
  14.                             } else {  
  15.                                 jQuery('#toggle-comment-author-info').text(closeMsg);  
  16.                             }  
  17.                         });  
  18.                     }  
  19.                     jQuery(document).ready(function() {  
  20.                         jQuery('#comment-author-info').hide();  
  21.                     });  
  22.                     //]]>  
  23.                       
  24.                 </script>  
  25.     </div>  
  26.     <?php endif; ?>  

 

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

<?php elseif ( '' !=$comment_author ): ?> 为后端 PHP 程序的判断,并不能在纯静态 html 网页中应用,所以评论者信息框就不会折叠起来了。因此,解决这个问题需要前端 JavaScript 代码。

 

张戈博客 在《WordPress记住评论用户信息的js版本,直接操作cookie无视缓存》一文中介绍了如何使用 cookies 记住用户信息,可以此基础上添加一些代码以解决这个问题:

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

 

  1. // *********************************************************  
  2. // 目的:    加载信息  
  3. // *********************************************************  
  4. function LoadRememberInfo() {  
  5.     var strName=GetCookie("author");  
  6.     var strEmail=GetCookie("email");  
  7.     var strHomePage=GetCookie("url");  
  8.     var bolRemember=GetCookie("chkRemember");  
  9.     var a_vlaue= document.getElementById("author");  
  10.     if (a_vlaue != null){  
  11.         if(bolRemember=="true"){  //如果勾选了“记住我”  
  12.             if(strName){document.getElementById("author").value=decodeURIComponent(strName);}; // 从 cookie获取填写昵称  
  13.             if(strEmail){document.getElementById("email").value=strEmail;}; //从 cookie获取填写邮箱  
  14.             if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);}; //从 cookie获取填写网址  
  15.             if(bolRemember){document.getElementById("saveme").checked=bolRemember;};  
  16. // ***********************增加的部分************************** //  
  17.             document.getElementById("reply-title").style.display="none";  // 隐藏“发表评论”一行的文字  
  18.             jQuery(document).ready(function(){  // 隐藏评论者用户名、邮箱和网址信息部分  
  19.                 jQuery('#comment-author-info').hide();  
  20.             });  
  21.             // 增加 记住cookie 后的用户名 ,其中头像自己上传了一个统一的,而没有根据邮箱地址拉取  
  22.                         // sub_reply-title 为“发表评论”一行下面的文字的id  
  23.             document.getElementById("sub_reply-title").innerHTML="<div class='author_avatar'><img alt='avatar' src='https://www.timezls.com/头像图片地址' class='avatar' width='45' height='45'><span>欢迎 <b>" + document.getElementById("author").value + "</b> 再次光临<br /><a href='javascript:toggleCommentAuthorInfo();' id='toggle-comment-author-info' style='float:left;color:#00a0b1;'>修改信息</a></span></div>";  
  24.         }  
  25. // ***********************增加的部分************************** //  
  26.         if(GetCookie("username")){  
  27.             document.getElementById("author").value=unescape(GetCookie("username"));  
  28.         }  
  29.     }  
  30. }  

 

张戈博客代码的最后面,添加如下代码:

  1. // 点击 href='javascript:toggleCommentAuthorInfo();' 后展开和隐藏评论者信息框  
  2. function toggleCommentAuthorInfo() {  
  3.     var changeMsg = " 修改信息";  
  4.     var closeMsg = " 关闭";  
  5.     jQuery('#comment-author-info').slideToggle('slow', function(){  
  6.     if ( jQuery('#comment-author-info').css('display') == 'none' ) {  // 如果评论者信息填写框被隐藏  
  7.         jQuery('#toggle-comment-author-info').text(changeMsg); //则改变标签内容为“修改信息”  
  8.     } else {  
  9.         jQuery('#toggle-comment-author-info').text(closeMsg); //否则显示为"关闭"  
  10.         }  
  11.     });  
  12. }  

 

现在,网页的静态化所遇到的问题解决了(图3 所示)。

本文禁止全文转载。任何形式转载请联系作者(时光在路上 www.timezls.com) Copyright © 2023. All Rights Reserved

3-wordpres-static-html-c-omemments-hide-author-information

 

本文禁止无授权转载 - 时光在路上 www.timezls.com 保留所有权利

代码分享链接: pan.baidu.com/share/init?surl=nv2Yhx3   密码: 125x

时光在路上扫码阅读、分享
  • 版权声明:该文章由 时光在路上 发表,共 4204字。除非特别标注来源,否则为原创。详见《版权声明》部分。
  • 转载请注明:文章标题和文章链接 - 时光在路上 - 也可直接“复制本文链接” 或 使用右边二维码分享本文 →