如何在父主题 css 之后加载 wordpress 子主题 css

Question

在我的wordpress子主题css文件加载之前的主要主题css文件。我的子主题css函数.php文件如下

function my_theme_enqueue_styles(){
  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

我想在父主题 css 之后加载子主题 css。

Answer 1

添加优先级。这里的 99 很高，所以它可能是最后一个，但一些插件可能会以更高的优先级添加 css，尽管这种情况很少见。

function my_theme_enqueue_styles(){
  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );

请参阅：https://developer.wordpress.org/reference/functions/add_action/

Answer 2

根据文档 （https://codex.wordpress.org/Child_Themes），将父样式设置为子样式的依赖项，并将其加载到函数中.php：

<?php
function my_theme_enqueue_styles() {
    // You'll find this somewhere in the parent theme in a wp_enqueue_style('parent-style').
    $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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

但请注意，某些主题使用多个样式表。如果发生这种情况，您可以像这样将任意和所有它们添加到函数中：

    $parent_style = 'parent-style';
    $parent_style2 = 'other-parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( $parent_style2, get_template_directory_uri() . '/inc/css/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style, $parent_style2 ),
        wp_get_theme()->get('Version')
    );

Answer 3

表示子主题 get_stylesheet_directory_uri（）

对于父主题 get_template_directory_uri（）

function my_theme_enqueue_styles() { 
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'owl-carousel-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.carousel.min.css' );
wp_enqueue_style( 'owl-theme-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.theme.default.min.css' );

wp_enqueue_script( 'owl-carousel-js', get_stylesheet_directory_uri() . '/assets/owlcarousel/owl.carousel.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );