WordPress 从不需要的页面禁用 WooCommerce 样式和脚本

WooCommerce 在每个页面上加载三个核心CSS样式表，并在WordPress站点上安装时发布。可以通过从不需要它的页面和内容中删除样式和脚本来节省一些页面加载时间。

它还从用于其功能的库中加载了许多其他javascript和CSS样式。

以下是如何以不同方式加载这些文件，以便它们仅出现在需要的页面上，从而加快非WooCommerce内容的页面加载时间。

一、禁用 CSS 样式

• woocommerce-layout.css中
• woocommerce-smallscreen.css
• woocommerce.css

这些文件是从 /wp-content/plugins/woocommerce/assets/css/ 加载。

1、禁用所有样式

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

如果您正在构建自定义商城主题，这是推荐的过程。删除默认的WooCommerce样式表并加载使用自己的样式表，将在WooCommerce核心更新期间保护样式。

2、禁用特定样式

如果您想禁用特定的样式表，你可以使用以下代码:

/**
 * 在主题激活时设置WooCommerce图像尺寸
 */
// 逐个删除每个样式
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;
}

然后像这样排列你自己的样式表：

/**
 * 加载自己的样式表
 */
function wp_enqueue_woocommerce_style(){
	wp_register_style( 'mytheme-woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
	
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'mytheme-woocommerce' );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

二、禁用所有 CSS 样式和 JS 脚本

Woo提供了一个过滤器，可以删除所有3个或单独的一个。

/**
 * 禁用 WooCommerce 所有的 CSS 样式和 JS 脚本
 */
add_action( 'template_redirect', 'remove_woocommerce_styles_scripts', 999 );
function remove_woocommerce_styles_scripts() {
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
            remove_action('wp_enqueue_scripts', [WC_Frontend_Scripts::class, 'load_scripts']);
	    remove_action('wp_print_scripts', [WC_Frontend_Scripts::class, 'localize_printed_scripts'], 5);
	    remove_action('wp_print_footer_scripts', [WC_Frontend_Scripts::class, 'localize_printed_scripts'], 5);
        }
    }
}

使用这段代码就不需要使用其它代码，在不是 WooCommerce 的相关页面，购物车和结算的其它页面都将禁用所有 CSS 样式和 JS 脚本，这样对于其它页面的加载速度会有很大的提高。