1. David Wu首页
  2. WordPress
  3. WordPress安装教程

解决WordPress文章编辑页面自动添加audio代码问题-WordPress开发教程

问题的出现近日,笔者两个基于 wordpress 建设的网站,因为坚持日更,每天在编辑文章的时候,发现一个奇怪的问题:就是在编辑文章的时候如果在文章编辑页面由可视化变为文本编辑模式

问题的出现

近日,笔者两个基于 wordpress 建设的网站,因为坚持日更,每天在编辑文章的时候,发现一个奇怪的问题:就是在编辑文章的时候如果在文章编辑页面由可视化变为文本编辑模式的时,在文章末尾会自动添加 html 代码,添加的代码如下:

<audio style="display: none;" controls="controls"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></audio>

或者是

<audio style="display: none;" controls="controls"></audio>

切换几次就会添加几次。导致文章发布后,文章末尾有时候会有很大一部分空白。开始笔者并没有在意,以为是 wordpress 编辑器本身的功能,为了美观,笔者只有切换到文本模式手动删除自动添加的 html 代码。问题如图所示:

解决WordPress文章编辑页面自动添加audio代码问题-WordPress开发教程

问题的进展

11 月 1 日,笔者心血来潮,对网站进行百度 MIP 页面改造,安装好插件之后,兴致勃勃的浏览 MIP 页面效果,这下把笔者惹毛了,MIP 页面文章底部赫然出现音频播放界面,试着点击提示:错误,发生未知错误。如下图所示:

解决WordPress文章编辑页面自动添加audio代码问题-WordPress开发教程

这就奇怪了,记得文章明明没有添加类似的代码,怎么会出现这个音频播放界面呢?于是进入 WordPress 后台,查看相关文章,在文本模式下竟然发现文章末尾有<audio style="display: none;" controls="controls"></audio>这行代码。在浏览器查看该文章显示是正常的,查看源代码,的确有这行代码,如图红色箭头部位:

解决WordPress文章编辑页面自动添加audio代码问题-WordPress开发教程

问题的分析

出现这个奇怪的问题后,笔者想到了肯定有是编辑文章的时候,自动添加的代码搞的鬼,但是仔细排查之后并未发现问题的端倪,作为不懂代码的门外汉,实在也不知道怎么处理这个问题。于是在懿古今主题交流群(477678587)发布了这个问题,寻求群主古今大侠和网友的帮助。

古今大侠很热心的帮助我一起分析该问题,并提出 4 个建议

是否安装插件导致

是否修改主题导致

是否上传图片方式导致

是否最新 wordpress 版本

在古今大侠的帮助下,一起对该问题进行详细的排查,然而问题就如臭虫般讨厌,无法找到踪迹,就算百度搜索也没有关于该问题的蛛丝马迹。最后古今大侠担心是 wordpress 程序本身的问题,他在本地进行了测试,发现从可视化变为文本编辑模式并不会出现笔者所述的情况。

于是笔者也试着在本地全新安装 4.9.8 版本 wordpress,心想这下该可以发现问题了吧。不曾想,点击写文章,从可视化转文本模式后,该死的代码又自动添加了。天啊,救救我吧,要崩溃了!

问题的解决

正当笔者陷入深深的烦恼之中后,古今大侠的一句话提醒了笔者,他说:“换个浏览器试试。”虽然心想这个跟浏览器会有什么关系呢?难不成浏览器还会自动添加代码不成?但是,还是醍醐灌顶,似乎想到了一个可能性:会不会是因为笔者用的 Chrome 浏览器插件导致该问题呢?

笔者检查了一下谷歌浏览器,发现就安装了“有道词典 Chrome 划词插件”,可是这个插件我已经关闭了划词翻译功能的呀,不管了先把该插件卸载试试。

解决WordPress文章编辑页面自动添加audio代码问题-WordPress开发教程

奇迹出现了,卸载掉“有道词典 Chrome 划词插件”后,再进入本地测试,发现文章编辑界面不会再自动插入该代码了。笔者立刻又进入网站后台进行测试,发现问题真的解决了。烦人的 Bug 臭虫消失了,哇哈哈!!!再也不用手动去删除这该死的自动添加的代码了。

结语

很奇怪的 wordpress 编辑器自动添加<audio style="display: none;" controls="controls"></audio>代码的问题,笔者使用 wordpress 近八年了第一次碰到,在古今大侠的帮助下,最终解决了该问题。再次感谢古今大侠的热心帮助,也希望能给碰到类似问题的朋友一些帮助。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/121833

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

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