»

解决WordPress评论系统中点击“回复”按钮导致文本输入框上移的问题

    WordPress  
cookiesWordPress插件数据库爬虫访客windows主机浏览器SEOApache访问工作CDN防盗链IISCLB网站优化百度云加速wordpress查询htaccessCDN的问题建站重定向腾讯云加速WP Rocket

今天手贱,把Word Press更新到了最新的5.1版本,更新方法是将根目录下wp-adminwp-includes 两个文件夹下的文件直接用新版本替换。

更新以后,发现了一个令我很不爽的现象:

  • 回复别人在我博客的评论时候(非后台回复),文本输入框都会跳跃到所有评论的最上面(如图1所示),而原来的情况是:文本输入框在需要回复的评论的下面(如图2所示)直接显示。
  • 升级以后,点击“回复”按钮,网址后面又添加了类似正样的字符串:?replytocom=656#respond ,Google Adsense认为这个网址与原来不带字符串的网址是两个不同的网址,因为没有抓取“新页面”,导致带字符串的网址不显示广告。
  • 点击“回复”按钮后弹出文本输入框的速度变慢了。

get-comment-reply-link-1

图1

 

get-comment-reply-link-2

图2

 

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

对于第一个现象,网页html 代码类似于如下形式:

  1. <a rel="nofollow" class="comment-reply-link" href="/2017/03/wordpress-c-omments-administrator-identifier.html?replytocom=656#respond" data-commentid="656" data-postid="3663" data-belowelement="div-comment-656" data-respondelement="respond" aria-label="回复给xiaopi">回复</a>  

而以前的 html 代码类似于如下形式:

  1. <a rel="nofollow" class="comment-reply-link" href="/2017/03/wordpress-c-omments-administrator-identifier.html?replytocom=656#respond" data-commentid="656" data-postid="3663" data-belowelement="div-comment-656" data-respondelement="respond" aria-label="回复给xiaopi">回复</a>  

好像并没有发现有什么不同。

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

 

到底发生了什么?

搜了一下,原来WordPress 自 5.0-alpha-42360 以后修改了 get_comment_reply_link() 函数和操作评论表单的 comment-reply.js 文件。系统会向评论回复链接的 <a> 标签中添加 data-commentiddata-postid 等属性,并取消了把 addComment.moveForm() 放在内联 onclick 属性里输出的方式,转而作为点击事件添加到 comment-reply.js 中。

可恶呀!

决定修改回原来的样子,在begin 主题functions.php 里面有一个zmingcx_scripts 函数,在最后一个 } 之前加上如下啊代码即可解决问题:

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

  1. if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {  
  2.     wp_enqueue_script( 'comment-reply' );  
  3.     }  

问题得到了解决。

上述代码的目的就是嵌套评论时引入系统的评论相关js代码:<script src='/wp-includes/js/comment-reply.min.js?ver=5.1.1'></script>

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

 

出现同样问题的朋友,如果你不是用的begin 主题,可以用如下方法引入 comment-reply.min.js:在主题的 header.php 加上如下代码(注意文件地址可能不太一样,自己修改一下):

  1. if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {  
  2.     < script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=5.1.1'></script >    
  3.  }  

不妨试一试这个方法。但不能保证适用于其他主题或不同版本。代码下载链接: pan.baidu.com/s/1dyw0_1cnkFECGSskxdW7cA 提取码: ypmn  

另一种通用方法可以参考boke112导航的文章:boke112.com/6563.html

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