店面子主题仍然加载父主题 CSS

Question

我对 Storefront 子主题有疑问。我创建了一个店面子主题，就像他们在这里建议的那样：https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/

子主题工作正常，我可以编写我的 CSS，在 functions.php 中编写我的代码并覆盖模板文件，但子主题仍然加载父主题 CSS。

如何在未加载父主题 CSS 的情况下创建子主题？

Answer 1

将这些功能添加到您的子主题的 functions.php。

此代码将禁止加载 Storefront 默认 CSS。

来源：https://github.com/stuartduff/storefront-child-theme

/**
 * Storefront automatically loads the core CSS even if using a child theme as it is more efficient
 * than @importing it in the child theme style.css file.
 *
 * Uncomment the line below if you'd like to disable the Storefront Core CSS.
 *
 * If you don't plan to dequeue the Storefront Core CSS you can remove the subsequent line and as well
 * as the sf_child_theme_dequeue_style() function declaration.
 */

add_action( 'wp_enqueue_scripts', 'sf_child_theme_dequeue_style', 999 );

/**
 * Dequeue the Storefront Parent theme core CSS
 */
function sf_child_theme_dequeue_style() {
    wp_dequeue_style( 'storefront-style' );
    wp_dequeue_style( 'storefront-woocommerce-style' );
}

此外，您可以禁用 WooCommerce 标准样式表，

来源：https://docs.woocommerce.com/document/disable-the-default-stylesheet/

/**
 * Set WooCommerce image dimensions upon theme activation
 */
// Remove each style one by one

add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );

function jk_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );     // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
    return $enqueue_styles;
}

Answer 2

截至 Storefront 2.5.8, released 07 July 2020, the means by which to dequeue the Storefront parent theme stylesheet/s have necessarily changed due to Pull request #1369。

此提交建立 Storefront 样式表的 (handle-name | path/to/file.css):

storefront-style | wp-content/themes/storefront/style.css 和
storefront-icons | wp-content/themes/storefront/assets/css/base/icons.css

作为 storefront-woocommerce-style 的显式依赖项 | wp-content/themes/storefront/assets/css/woocommerce/woocommerce.css.

进行此更改是为了让子主题可以将 storefront-woocommerce-style 定义为依赖项，而不会有破坏其他 Storefront 样式表顺序的风险，也无需为排队的依赖项设置更高的优先级减轻此类破损 - 每期 #1299.

由于这种依赖性，任何简单地使 storefront-style 样式表（或 storefront-icons）出列的尝试现在都将不起作用（无论优先级设置如何）。你必须先 redefine/reset storefront-woocommerce-style 的依赖，然后高优先级，任何删除的依赖都可以出列。

根据以下示例；

首先将只有图标作为依赖项的 woocommerce 样式排入队列，
然后将您的子样式入队，并且
店面样式最后出列。

在这个例子中，我故意将我的子样式排在 woocommerce 之后，因为我已经覆盖了我自己的一些 woocommerce 样式（如果需要更低的优先级 - 我可以把它放在 dequeue_styles 函数 )。如果情况并非如此，并且我的子样式只是店面样式的直接替代品，我可以简单地将其作为 woocommerce 的另一个依赖项，使用图标样式 - array( 'storefront-child-style', 'storefront-icons' )。或者，如果您的子样式已替换 woocommerce 和店面样式，请从 woocommerce 中删除所有依赖项，然后使图标成为您的子样式的依赖项，然后将 woocommerce 与店面样式一起删除。等等等等……根据您的具体需要无限调整。

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_styles() {
    wp_enqueue_style( 'storefront-woocommerce-style', get_template_directory_uri() . '/assets/css/woocommerce/woocommerce.css', array( 'storefront-icons' ), $storefront_version );
    wp_enqueue_style( 'storefront-child-style', get_stylesheet_directory_uri() . '/style.css', '', $storefront_version );
}

add_action( 'wp_enqueue_scripts', 'dequeue_styles', 99 );
function dequeue_styles() {
    wp_dequeue_style( 'storefront-style' );
}

店面子主题仍然加载父主题 CSS

Storefront child theme still load parent CSS

css

wordpress

storefront