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

Posted 2023-02-24

【中文标题】如何在父主题css之后加载wordpress子主题css

【英文标题】：How to load wordpress child theme css after parent theme css

【发布时间】：2017-06-15 18:08:10

【问题描述】：

在主主题 css 之前加载的我的 wordpress 子主题 css 文件中。 下面给出了我的子主题 css functions.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。

【参考方案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/

【讨论】：

谢谢。有用。有没有设置最高优先级的替代解决方案？

找到父主题的优先级，将其出列，然后无优先级地重新添加，然后调用样式表

感谢您的好评

【参考方案2】：

根据文档 (https://codex.wordpress.org/Child_Themes)， 将父样式设置为子样式的依赖项，并将其加载到您的functions.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')
    );