当前位置:首页 > 建站 > 正文内容

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

xuwenyan2年前 (2021-04-25)建站366

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也生效了。

    文章作者:xuwenyan
    版权声明:本文为本站原创文章,转载请注明出处,非常感谢,如版权漏申明或您觉得任何有异议的地方欢迎与本站取得联系。

    扫描二维码推送至手机访问。

    版权声明:本文由艺文笔记发布,如需转载请注明出处。

    本文链接:https://www.xuwenyan.com/archives/1824

    分享给朋友:

    “Word Press子主题如何替换父主题的js和css” 的相关文章

    如何在Word Press添加图片放大显示?

    如何在Word Press添加图片放大显示?

    使用word press时,我们文章中的图片常会因为尺寸过大而导致预览图被压缩看不清楚,因此我们需要一个可以点击图片就能放大图片查看的功能,这在其它网站是很常见的一个功能。那么如何实现在Word Press添加图片放大显示? 第一步,准备fancybox插件 我们需要用到fancybox插件...

    Word Press如何按分类在文章页面增加上一篇下一篇翻篇按钮

    Word Press如何按分类在文章页面增加上一篇下一篇翻篇按钮

    我们在阅读别人的Word Press博客文章时会发现,底部常常有上一篇、下一篇按钮,这两个按钮对于对你博客文章感兴趣的读者来说是非常友好的。那么如何在Word Press添加上一篇、下一篇翻篇按钮呢? 你只需要在single.php中你认为显示效果比较好的地方添加以下代码即可: <pr...

    如何实现Word Press文章底部相关文章推荐?

    如何实现Word Press文章底部相关文章推荐?

    如何实现Word Press相关文章推荐?推荐一个比较好用的插件:Yet Another Related Posts Plugin (YARPP),可以在管理后台插件商城搜索到。 使用这款插件后,就可以自动在你的文章底部自动添加相关的文章推荐了,有助提高博客文章的阅读量。 插件功能:...

    Word Press如何实现显示摘要、增加阅读更多按钮

    Word Press如何实现显示摘要、增加阅读更多按钮

    Word Press如何实现显示摘要、增加阅读更多按钮。前提条件是主题必须支持,如果主题不支持得通过别的方法实现,下面的方法只在主题支持的前提下有用。 手动添加摘要显示 在你需要显示的摘要内容后加入一个'更多'控件即可,每个主题添加更多控件的方式可能不同,下面是我添加的方法,大家可以参...

    linux如何修改用户密码(passwd)

    linux如何修改用户密码(passwd)

    linux如何修改用户密码(passwd)? root密码 1:在终端输入 passwd 2:根据提示输入 New password 3:根据提示输入 Retype new password 非root密码 1:在终端输入 passwd userName (us...

    Linux如何通过命令终端修改文件内容?

    Linux如何通过命令终端修改文件内容?

    Linux如何通过命令终端修改文件内容? 比如在/test/test.txt文件中增加一行 hello linux world ! 命令是:vi,vim vi 编辑器,相当于记事本,有编辑功能,但较弱vim 复杂的编辑器,相当于windows的 editplus, notepad...