Word Press子主题如何替换父主题的js和css

Word Press添加子主题之后,网上有很多教程教你如何去添加js、css,甚至是需要什么@import去导入父主题的css(官方教程也有提到)等等。当你按照教程配置完了之后,可能会出现各种各样的问题,我所遇到的问题就是子主题和父主题的js都同时被加载了,以至于我修改的功能异常。

是那些教程错了吗?也不是,他们的教程针对的是某一类主题,每个主题的作者不是同一个人,所以他们创建主题的代码也是不一样的。所以,你在创建完了子主题之后,一定要注意观察父主题的funtions.php里写了什么,这很重要。

下面就介绍一下我所遇到的问题,或许能给你们一点启示。

问题:子主题的js和父主题的js同时被加载

我想重定义一个js里面实现菜单点击展开合并的函数,原本是要点击菜单的小箭头才会响应,我想实现点击整个菜单也响应,因此我重写了js。

但是我在子主题重定义了js,按照网上教程添加了导入代码之后,我发现父主题的js也被加载了,并没有实现替换,也就是类似下图的这种方法。

这时候我就尴尬了,由于父主题的js和子主题的js都被加载了,所以两个菜单响应函数同时被响应(父主题的和子主题的),点击一下菜单,效果就是展开之后立马又合并了,也就是第一次响应实现了展开,第二次响应实现了合并。

我是怎么解决的

其实按上面的方法,只是重新导入了一个js文件,并不是替换父主题的js(我原以为只要路径格式一样,子主题的js会替换掉父主题的js)。

那么既然要替换,肯定是加上子主题的js,去掉父主题的js了,现在我子主题的js加上了,那么如何去掉父主题的js呢?父主题的js又是在哪里被加上去的呢?这是就是我说的要注意父主题的functions.php是怎么写的了。经过观察(全局搜索/custom.js),我发现我需要替换的js是在父主题的scripts.php里被加载进去的。

那这个scripts.php又是哪里加进去的呢?(再全局搜索scripts.php),终于我在functions.php里找到了。这就是解释了我的疑问。

疑问虽然解释了,但是怎么解决问题呢?要想去掉父主题的custom.js,就得覆盖scripts.php才行,但是scripts.php又是在functions.php导入的,按照官方说明functions.php并不像style.css一样是被覆盖的,而是同时生效的。

最后经过观察,其实custom.js是通过wp_enqueue_script这个函数导入的,但是这个函数并不是立马导入,它可能只是以busiporf-custom-js作为key存起来了,在最后才会统一导入。

那么其实我只需要再次用wp_enqueue_script函数以busiporf-custom-js作为key重新导入就可以了吧,果然问题得到解决:

最后

通过上面这个问题的解决,网上的教程可以给你提供思路,但由于主题的多样性,并非某个教程就能通吃的,但注意functions.php是可以解决很多问题。

比如开头我提到的,很多教程要求子主题style.css中要@import导入父主题的style.css,我就没有,但是却没有问题,这其实就是因为这个主题在scripts.php中导入了style.css了,而scripts.php因functions.php被继承到了子主题,所以即使我没有@import去导入,父主题的style.css也生效了。


本文为@艺文笔记原创文章,转载请注明出处:https://www.xuwenyan.com/archives/1824,非常感谢!
上一篇:  下一篇: