nonoyet

的美丽世界

记一次处理wordpress去除youtube iframe_api的历程

  • 首页 » 记一次处理wordpress去除youtube iframe_api的历程

记一次处理wordpress去除youtube iframe_api的历程

By nonoyet
image-21 记一次处理wordpress去除youtube iframe_api的历程

自从安装上wordpress之后一直都存在一个问题,就是发布的文章打开后一直都在加载中,就像上面这个圈圈一直在那里转,感觉十分不爽,查看页面加载内容,找到了问题所在,如下js存在youtube iframe_api加载问题.

image-22 记一次处理wordpress去除youtube iframe_api的历程

原来是这个js一直加载不出来,那在看看这个js是在哪里加载的,查看页面源码,发现在head中有这么一句

image-23 记一次处理wordpress去除youtube iframe_api的历程

原来是在这里,页面一开始就自动请求了这个youtube的js,应该是播放器之类的东西吧,由于我是后端开发,对于前端的东西一知半解,总之删除就对了,至于删除后的影响在看看运行效果就可以了.

这个东西在哪里呢?

先进入wordpress的主目录

image-24 记一次处理wordpress去除youtube iframe_api的历程

在进入到主题

image-25 记一次处理wordpress去除youtube iframe_api的历程

再进入自己使用的主题,我这里使用的honeywaves这个主题,如果没猜错的话,我遇到的问题应该跟主题无关,所有主题都会存在这个问题,来验证下吧

image-26 记一次处理wordpress去除youtube iframe_api的历程

这是我的主题,发现有个header.php,进入看看吧

image-27 记一次处理wordpress去除youtube iframe_api的历程

但是没有发现这句代码呢?

image-28 记一次处理wordpress去除youtube iframe_api的历程

由于不懂PHP的, 试着排查下,于是删除了最可能的一句代码

image-29 记一次处理wordpress去除youtube iframe_api的历程

对,就是删掉了这句,再去看看前端显示效果吧

首先发现自己的前端页面完全乱套了,简直不忍直视,但是页面一直在加载中的问题却没有了

image-30 记一次处理wordpress去除youtube iframe_api的历程

,在来看看页面的源码是否已经没有了

image-31 记一次处理wordpress去除youtube iframe_api的历程

果然没有了,但是发现head中少了很多东西,那说明确实是我找到的这个代码中有某种操作导致的,找到问题就好说,来解决问题

既然跟head有关,又应该是公共的(猜的),那肯定就在公共部分引用的,好吧,于是我就先找了

image-32 记一次处理wordpress去除youtube iframe_api的历程

然后大概率是在js中,所以进了js目录

image-33 记一次处理wordpress去除youtube iframe_api的历程
image-34 记一次处理wordpress去除youtube iframe_api的历程

在来找找跟head有关的js,找到了2个,一个是压缩的,一个没压缩,如果存在问题的话都是一样的,看看这个文件呢,是否存在youtuebe相关的内容

image-35 记一次处理wordpress去除youtube iframe_api的历程

瞧瞧我们发现了什么,这不是在head最开头添加了那句一问题代码,原来在这里,找到问题,那就处理吧,先备份文件,再将问题代码删掉试试,别忘了将压缩和非压缩的都处理掉,改好了保存,看看效果呢

image-36 记一次处理wordpress去除youtube iframe_api的历程
image-37 记一次处理wordpress去除youtube iframe_api的历程

怎么还存在?

image-39 记一次处理wordpress去除youtube iframe_api的历程

难道是js改了后需要重启?于是我又重启整个服务,包括服务器也重启试过了,问题依旧

image-40 记一次处理wordpress去除youtube iframe_api的历程

难道是缓存问题,于是又换了电脑,问题依旧

image-41 记一次处理wordpress去除youtube iframe_api的历程

我知道我失败了,说明不是这两个文件的问题,我冤枉你们了.构建出来的逻辑大厦轰然倒塌,问题又得推到重来,先记下吧,后面找到解决方法在贴出来

后续...

一直因为私事耽搁了没有处理,这两天花了点时间处理了,中间却发现自己犯了个大错.

既然是这个ifarme_api的问题,肯定存在项目目录下,于是我们搜索下这句代码的出处

grep -rn iframe_api ./

image-42 记一次处理wordpress去除youtube iframe_api的历程

发现没有,还有一个地方存在这个块代码,上面俩文件已经验证过了,没有作用,那么问题肯定出在下面这个文件中,来试试注释该文件中的代码看看

image-43 记一次处理wordpress去除youtube iframe_api的历程

研究完代码后注释了这一句就够了,在来看看页面访问效果

image-44 记一次处理wordpress去除youtube iframe_api的历程

再也没有出现这个问题了.算是解决了基本问题,原来是一个播放器的js代码问题,但是同时又发现了另外一个问题,我明明使用的是honeywaves这套模板,怎么会调用到honeypress这个模板呢?

image-45 记一次处理wordpress去除youtube iframe_api的历程
image-46 记一次处理wordpress去除youtube iframe_api的历程

如果要了解这个问题,还需要去看主题介绍:

image-47 记一次处理wordpress去除youtube iframe_api的历程

原来honeywaves是honeypress的子主题,存在依耐关系,包括部分公共js,这样就不难理解为什么这个js会在honeywaves主题中被调用了,而这个有问题的播放器的js属于honeypress,那么意味着使用该主题或其子主题都有可能会遇到与我相同的情况,所以我的猜测是错误的,我所遇到的问题只跟主题有关,不是所有的使用wordpress的都会遇到,囧..