Wordpress：处理子主题和父主题之间的 CSS 优先级

Posted 2023-03-05

【中文标题】Wordpress：处理子主题和父主题之间的 CSS 优先级

【英文标题】：Wordpress : Handle CSS priority between Child & Parent Theme

【发布时间】：2016-01-04 12:45:26

【问题描述】：

我开始在一个 wordpress 网站上工作。选择主题后，我决定使用子主题的方式对其进行自定义。

我遵循了使用这个的常用方法：

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css');
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );

使用它，效果不佳，因为我的父级已经有一个包含大量 CSS 样式表的入队函数，并且顺序很重要，特别是关于必须由父级样式表覆盖的引导 CSS。

从这里，2个解决方案：

复制并粘贴整个入队父函数（所以我们用子函数替换父函数。对我来说，Pro 是我们保持队列的原始顺序，Con 是我们完全跳过原始函数可以更新。

将此代码用作子入队函数：

   function theme_enqueue_styles() 
   wp_deregister_style('zerif_bootstrap_style');
   wp_enqueue_style('zerif_bootstrap_style', get_template_directory_uri() . '/css/bootstrap.css');
   wp_enqueue_style( 'zerif-style', get_template_directory_uri() . '/style.css'    );
   wp_enqueue_style( 'cleverdrive-style', get_stylesheet_uri(), array( 'zerif-style' ) );
   

在我的例子中，它看起来很好，但是如果 deregistered 样式的原始顺序很重要，我认为我们不保留它。

您认为，处理这种情况的最佳方法是什么？

谢谢你，

苏米

【问题讨论】：

你能不能尝试使用不同的函数在你的子主题中加入额外的 js 和 css 文件，但 wp_enqueue_scripts 具有更高的优先级或 wp_footer 钩子。这将使您的父主题功能正常工作，而子主题功能也可以正常工作。

嗨，它有效！简单高效，完美！谢谢你

然后将我的评论标记为有用，您的问题已解决。

我已经添加了答案，请将其标记为解决方案，以便对其他人有所帮助。

第一次使用***，我搜索了如何将这个主题解决，现在我知道了:-) Thx

【参考方案1】：

尝试使用不同的函数将额外的 js enter code here 和 css 文件加入您的子主题中，但 wp_enqueue_scripts 具有更高的优先级或 wp_footer 挂钩。这将使您的父主题功能正常工作，而子主题功能也可以正常工作。