子主题中的多个CSS文件使用入队样式

时间:2016-03-07 作者:user90158

我对WP是全新的,我读了很多帖子,尝试了不同的例子,让WP\\u Enueu\\u风格适合我,但没有效果。

我正在使用refur wp主题,我根据wp文档制作了孩子。然后我复制了样式。css文件,并将其放在我的子目录中,并使用下面显示的wp文档中给出的wp\\u enqueue\\u样式函数。我更改了子目录中文本的颜色,它在我的网站上完美地显示出来。现在我正在尝试为不同的页面添加不同的css文件。

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

}
?>
因此,这就是我在尝试实现不同功能时迷失的地方。css文件。我创建了一个名为form的新css文件。css并将其粘贴在子主题目录中。然后我把这个代码放进去,让它使用表单。css而不是样式。css如果页面是

<?php
add_action( \'wp_enqueue_scripts\', \'theme_enqueue_styles\' );
function theme_enqueue_styles() {

if ( is_page( \'home\' ) {
    wp_enqueue_style( \'parent-style\', get_template_directory_uri(), \'/style.css\' );
    }
elseif ( is_page( \'form\') {
    wp_enqueue_style( \'form-style\', get_template_directory_uri() .  \'/form.css\' );
    }
}
?>
我不确定我做错了什么,我对“表单样式”和“父样式”句柄以及它们如何在文件命名中发挥作用感到有点困惑。因为我弄乱了“家长式”的名字,破坏了网站。

到目前为止,我对子主题的理解是,如果有什么不同,则子主题目录中的css会覆盖父主题css。排队是将css加载到网站的一种方式,而不是使用导入。但是,如果它是一个子css目录,为什么要将其命名为父样式呢?如果我的父主题有一对。名为font的css文件和一个仅控制两件事的css文件,如果我没有在子级中覆盖它,我需要将该依赖项(如wp文档子主题示例所示)放入队列中吗?

谢谢你,我已经看了这么多的例子,我只是不知道我做错了什么。

1 个回复
最合适的回答,由SO网友:Charles 整理而成

您的functions.php 应首先加载parent 而不是child CSS文件。它的实际功能是:加载parent 样式表,然后它将加载child 样式表,最后它将加载form.css.
must 保持style.css 在您的child theme 否则Wordpress将无法识别它!

正如你所提到的child style.css 将/应该覆盖parent style.css 在样式表中进行更改时
通过创建child-theme 我们保留parent-theme 按原样以及需要升级时(只有parent theme 在这种情况下将升级child-theme 将仍然存在。

请记住,这也适用于其他theme 文件。(例如,您想在single.php 你应该在child-theme file,通过复制原件single.phpparent theme 进入您的child theme文件夹在这里,您可以进行这些更改

看一看here 详细说明。

注意:在文件中编辑/添加一些之前,请始终进行备份

Updated after comment from OP
因为我是盲人,没有阅读完整的问题)

function wpse220011_theme_enqueue_styles() {

    $parent_style = \'parent-style\';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' );
    wp_enqueue_style( \'child-style\', get_stylesheet_directory_uri() . \'/style.css\', array( $parent_style ) );
    // Load extra styling for Form pages
    if( is_page( \'form\' ) ) {
        wp_enqueue_style( \'form-style\', get_stylesheet_directory_uri() . \'style-form.css\', array() );
    }
    // Load extra styling for single posts
    if( is_single() ) {
        wp_enqueue_style( \'single-post-style\', get_stylesheet_directory_uri() . \'style-single.css\', array() );
    }

}
add_action( \'wp_enqueue_scripts\', \'wpse220011_theme_enqueue_styles\' );
以上只是一个例子!

意识到额外的style sheets 代码中使用的是加载在现有style.css 的确如此extra 代码style.css 文件,您要在其中更改/隐藏并生成的代码(假设如示例所示)style-form.css 您的更改display: none; 将显示为元素根本不存在,或者visibility: hidden; 但是,元素仍将占用与以前相同的空间我没有添加if( is_page( \'home\') 因为您的示例显示它正在使用(基本)styles.css 已经是这样了,为什么还要再加载呢?!

相关推荐