覆盖 Wordpress 子主题中的样式答案

【问题标题】：Overriding Styles in Wordpress Child Theme覆盖 Wordpress 子主题中的样式
【发布时间】：2015-06-18 15:08:59
【问题描述】：

我正在努力定制这个主题：http://themeforest.net/item/ultimate-directory-responsive-wordpress-theme/8043893

根据我在许多网站上使用的协议，我创建了一个子主题。

在这个子主题中，我有一个 style.css 文件，其中包含以下代码：

@import url("../ultimate-directory/ud-assets/css/custom.css");
@import url("../ultimate-directory/style.css");

#header {
width: 100%;
border-bottom: 3px solid;
background-color: #fff !important;
}

我在子主题中也有一个带有此代码的functions.php文件`

<?php
  add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
  function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
  } 
?>

但是子主题中的 style.css 并没有覆盖父样式。我与主题开发人员来来回回，但他们没有提供解决方案。父主题有一个 style.css 但里面什么都没有，只是一条评论说所有样式都在 ud-assets 文件夹中的 css 文件夹中。我试图覆盖的样式表称为 custom.css，这就是我导入它但我的更改仍然被忽略的原因。

这是父主题 header.php 中的代码，它以我相信的样式调用：

$cp_preloader_status = get_option(THEME_NAME_S.'_enable_preloader'); 

if( $cp_preloader_status == 'enable' ){
?>
<?php $preloader = get_option(THEME_NAME_S.'_preloader_gif','1'); ?>
<style>
/* Loader */
.loader { background: url("<?php echo CP_THEME_PATH_URL; ?>/ud-assets/img/preloaders/<?php echo $preloader; ?>.gif") no-repeat scroll 50% 50% rgb(249, 249, 249);height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 99999;}

<?php if ( is_page( '563' ) || is_page( '1018' ) || is_page( '1021' ) || is_page( '966' ) || is_page( '812' ) || is_page( '825' ) || is_page( '827' ) || is_page( '961' ) ){ ?>
#main {
margin: 0 !important;   
}
<?php } ?>
</style>
<?php } ?>

【问题讨论】：

文件是否真的存在于您的中？
父 CSS 是如何入队的？
有没有调用childs function.php？
我尝试在子主题的 header.php 中添加指向子 style.css 的直接链接，但没有成功。
function.php 上面的代码在子主题中，所以不确定您所说的“调用”是什么意思

标签： css wordpress parent-child

【解决方案1】：

上面的代码没有加载任何 css 文件，但它提供了一些 css 规则。

您有几个选项可以实际覆盖父文件，这些文件可能比您尝试入队的文件加载得晚，因此后面的规则将适用（取决于特定的 css 规则和 !important 等的使用)。

添加您的操作以稍后加载（实际上您应该检查页面源以确定这是否是问题）
```
add_action( 'wp_enqueue_scripts', 'childtheme', 1000 );
```
如果您要进行细微更改，请为 css 选择器使用特定协议例如nav ul li.custom 将在带有自定义类的导航元素中选择 li。如果您想稍后设置嵌套 uls 的样式，请不要使用 nav ul li。

将所有样式出列并再次入队（最好不要加载超过 1 个 css 文件）

function dequeue_css(){

 global $wp_styles;

        foreach( $wp_styles->queue as $name ) :
                wp_deregister_style ($name);
                wp_dequeue_style ($name);           
        endforeach; 

        // now enqueue css files
}
add_action('wp_enqueue_scripts', 'dequeue_css',100);

【讨论】：