1

如何从不需要 WooCommerce 的页面中删除 WooCommerce CSS 样式和 js 脚本

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

它还从它用于其功能的库中加载了一堆其他 javascripts 和 CSS 样式。

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

woocommerce-layout.css woocommerce-smallscreen.css woocommerce.css 这些是从 /wp-content/plugins/woocommerce/assets/css/ 加载的

Woo 已经使用过滤器来删除所有 3 个或删除单个过滤器。

// 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; } // Or just remove them all in one line add_filter( 'woocommerce_enqueue_styles', '__return_false' ); 你可以这样做，只需添加自己的 CSS 样式

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' ); function wp_enqueue_woocommerce_style(){ wp_register_style( 'mytheme-woocommerce', get_stylesheet_directory_uri() . '/css/woocommerce.css' );

if ( class_exists( 'woocommerce' ) ) {
	wp_enqueue_style( 'mytheme-woocommerce' );
}

} 这很棒，但它仍会在每个页面上加载，如果您将 WooCommerce 保留在默认页面上，则可以有条件地加载 CSS 文件。

add_action('wp_enqueue_scripts','wpb_load_woocommerce'); function wpb_load_woocommerce() { if( is_page(array( 'shop', 'cart', 'checkout' ) ) or 'product' == get_post_type() ) { wp_enqueue_style( 'wpb-woo', get_stylesheet_directory_uri() . '/css/woocommerce.css', '', '3', 'all'); } } 另一种仅在 WooCommerce 产品和商店页面上加载 CSS 样式和 Javascripts 的好方法是在所有其他页面上将它们出列。

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); } } }

这里所有的 Woo 样式和脚本都是通过在页面加载之前挂钩到’template_redirect’ 的最后一个钩子并删除所有样式和脚本的初始 Woo add_action 来删除的。