如何使用子主题重写入队的样式

时间:2013-10-02 作者:Poisontonomes

我正在创建WooCommerce主题的子主题(这是我3年来的第一个主题),我遇到了一些问题,因为有些布局样式排在父主题中,我不得不添加!important 我要覆盖的所有样式。

这是父主题函数中的当前排队代码。php;

if ( ! is_admin() ) { add_action( \'wp_enqueue_scripts\', \'woo_load_frontend_css\', 20 ); }

if ( ! function_exists( \'woo_load_frontend_css\' ) ) {
function woo_load_frontend_css () {
    wp_register_style( \'theme-stylesheet\', get_stylesheet_uri() );
    wp_register_style( \'woo-layout\', get_template_directory_uri() . \'/css/layout.css\' );
    wp_enqueue_style( \'theme-stylesheet\' );
    wp_enqueue_style( \'woo-layout\' );
} // End woo_load_frontend_css()
}
我需要做的是在layout.css 父主题加载的文件。

2 个回复
SO网友:estepix

我也有同样的问题,epilektric的回答让我走上了正确的道路。

我正在使用“function”wootheme,它需要加载父样式。css位于另一个称为布局的父css之前。css。因此,在加载子主题的样式时,需要保持此顺序。css。

所以基本上,为了避免使用!important 要覆盖所有样式,我们需要按以下顺序加载样式文件:

父主题的样式。css父主题的布局。css子主题的样式。css要实现这一点,我们需要改变:

儿童主题的风格。css子主题的功能。php子主题的样式。css更改此文件以按正确顺序导入父主题的两个css文件:

@import url("../function/style.css");
@import url("../function/css/layout.css");
子主题的功能。php,然后将其添加到函数中。php以避免重新加载布局。css(woo布局)和避免加载子主题的css(style.css):

if ( ! function_exists( \'woo_load_frontend_css\' ) ) {
    function woo_load_frontend_css () {
        // comment this, as we will be loading this css with a different priority
        //wp_register_style( \'theme-stylesheet\', get_stylesheet_uri() );

        // we can register the style here for future manipulation...
        wp_register_style( \'woo-layout\', get_template_directory_uri() . \'/css/layout.css\' );

        // comment this, as we will be loading this css with a different priority
        //wp_enqueue_style( \'theme-stylesheet\' );

        // ... but we will not be enqueuing it, instead we will import it in the child theme\'s style.css
        //wp_enqueue_style( \'woo-layout\' );
    } // End woo_load_frontend_css()
}
您也可以像这样加载一个空函数以达到相同的效果:

if ( ! function_exists( \'woo_load_frontend_css\' ) ) {
    function woo_load_frontend_css () {

    } // End woo_load_frontend_css()
}
然后注册并添加子主题的css,将其添加到子主题的函数中。php文件位于上一个function woo_load_frontend_css:

function cherrypick_child_enqueue_css()
{
    wp_register_style( \'theme-stylesheet\', get_stylesheet_uri() );
    wp_enqueue_style( \'theme-stylesheet\' );
}
add_action( \'wp_enqueue_scripts\', \'cherrypick_child_enqueue_css\', 99 ); // using priority 99 we make sure the child theme style.css will be loaded after all other css
现在,所有样式表文件都将按正确的顺序加载。

SO网友:epilektric

因为Woo函数包含在if( ! function_exists(\'function_name\') ) 您可以重写子主题中的函数functions.php 文件

将函数添加到文件中,然后调整要加载的队列顺序style.css 之后layout.css.

if ( ! function_exists( \'woo_load_frontend_css\' ) ) {
    function woo_load_frontend_css () {
        wp_register_style( \'theme-stylesheet\', get_stylesheet_uri() );
        wp_register_style( \'woo-layout\', get_template_directory_uri() . \'/css/layout.css\' );

        wp_enqueue_style( \'woo-layout\' );

        //load stylesheet after layout.
        wp_enqueue_style( \'theme-stylesheet\' );

    } // End woo_load_frontend_css()
}

结束

相关推荐

WP_Query in functions.php

我有一些代码要转换成函数。它工作得很好,直到我将其包装到所述函数中: $args = array( \'posts_per_page\' => -1, \'post_type\' => \'asset\', \'category_name\' => $cat ); $cat_query = new WP_Query( $args );