在 WooCommerce CSS 之后加载子主题 CSS

我试图避免使用！important来覆盖WooCommerce样式。现在我已经将WooCommerce样式排队并尝试在我的子模板之后排队，但似乎没有任何效果。

// Dequeue Woocommerce Style
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
// Dequeue Parent themes
function understrap_remove_scripts() {
wp_dequeue_style( 'understrap-styles' );
wp_deregister_style( 'understrap-styles' );
wp_dequeue_script( 'understrap-scripts' );
wp_deregister_script( 'understrap-scripts' );
// Removes the parent themes stylesheet and scripts from inc/enqueue.php
}
add_action( 'wp_enqueue_scripts', 'understrap_remove_scripts', 20 );
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
// Get the theme data
$the_theme = wp_get_theme();
wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . '/css/child-theme.min.css', array(), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), false);
wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . '/js/child-theme.min.js', array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'woocommerce_theme_styles' );
function woocommerce_theme_styles() {
wp_enqueue_style('woocommerce_smallscreen', plugins_url() .'/woocommerce/assets/css/woocommerce-smallscreen.css');
wp_enqueue_style('woocommerce_css', plugins_url() .'/woocommerce/assets/css/woocommerce.css');
wp_enqueue_style('woocommerce_layout', plugins_url() .'/woocommerce/assets/css/woocommerce-layout.css');
}

这是网络的实时版本：http://ufctrashtalk.com

我做错了什么？

谢谢！！

您在问题中提到您正在尝试覆盖一些 WooCommerce css 规则，但您刚刚从加载此行代码中删除了所有 WooCommerce 样式表：

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

如果要将它们保留在页面中，请删除上面提供的代码行。

实现目标的两种方法 - 在WooCommerce默认样式表之后加载样式表。首先，你不需要这部分代码：

add_action( 'wp_enqueue_scripts', 'woocommerce_theme_styles' );
function woocommerce_theme_styles() {
wp_enqueue_style('woocommerce_smallscreen', plugins_url() .'/woocommerce/assets/css/woocommerce-smallscreen.css');
wp_enqueue_style('woocommerce_css', plugins_url() .'/woocommerce/assets/css/woocommerce.css');
wp_enqueue_style('woocommerce_layout', plugins_url() .'/woocommerce/assets/css/woocommerce-layout.css');
}

即使默认情况下，如果您删除上述功能，WooCommerce 也会在主题文件之前加载其文件。它来自WordPress功能。首先加载所有插件，然后才加载主题。

WooCommerce默认在插件处于活动状态时加载它们。woocommerce.css样式表可能不会加载，而是加载twenty-seventeen.css，如果您网站的主题是Twenty Seventeen.

提高add_action()的优先级：

add_action( 'some-hook', 'some_function', 20 );

这里 20 是优先级。默认情况下，它是 10。增加优先级稍后会触发你的函数，这意味着你的.css、.js文件稍后会加载到 DOM 中(毕竟.css、.js文件，这是以默认优先级或更低的优先级调用的)。您的函数将是：

//priority 20 is higer, then WooCommerce ones( 10 )
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 20 );
function theme_enqueue_styles() {
// Get the theme data
$the_theme = wp_get_theme();
wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . '/css/child-theme.min.css', array(), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), false);
wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . '/js/child-theme.min.js', array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}

这将在所有 wooCommerce 文件之后加载您的child-theme.min.css文件。

对wp_enqueue_style()函数使用依赖项。例如，如果您只想在样式表之后加载样式表woocommerce-smallscreen.css请使用它的处理程序作为文件的依赖项：

wp_enqueue_style( 'some-handler', 'some-url-of-file', array('depends-on', 'another-dependence') );

因此，您可以使用woocommerce-smallscreen.css处理程序woocommerce-smallscreen文件

：

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
// Get the theme data
$the_theme = wp_get_theme();
//Here we use dependences
wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . '/css/child-theme.min.css', array('woocommerce-smallscreen'), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), false);
wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . '/js/child-theme.min.js', array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}

注意：如果您的样式表依赖项未加载的文件(不存在，插件未激活)，那么您的文件也不会加载，因为依赖项损坏。

因此，在其中一个步骤之后，您的样式表将在WooCommerce之后加载。但即使在它之后，你的css规则也不会覆盖WooCommerce的规则，因为你使用的是较弱的规则，而WooCommerce使用最强的规则。前任。：

哜哟：.woocommerce a.button{}

您的：.button.add_to_cart_button{}

尝试使用它：.woocommerce a.button{}，它将被覆盖。您也可以检查此问题。

不知道为什么你取消排队的WooCommerce样式，但这应该可以解决你的问题：

// Dequeue Woocommerce Style
// add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
// Dequeue Parent themes
function understrap_remove_scripts() {
// wp_enqueue_style('woocommerce_smallscreen', plugins_url() .'/woocommerce/assets/css/woocommerce-smallscreen.css');
// wp_enqueue_style('woocommerce_css', plugins_url() .'/woocommerce/assets/css/woocommerce.css');
// wp_enqueue_style('woocommerce_layout', plugins_url() .'/woocommerce/assets/css/woocommerce-layout.css');
// Removes the parent themes stylesheet and scripts from inc/enqueue.php
wp_dequeue_style( 'understrap-styles' );
wp_deregister_style( 'understrap-styles' );
wp_dequeue_script( 'understrap-scripts' );
wp_deregister_script( 'understrap-scripts' );
// Get the theme data
$the_theme = wp_get_theme();
wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . '/css/child-theme.min.css', array(), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), false);
wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . '/js/child-theme.min.js', array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'ufctrashtalk_scripts' );

如果它不能解决问题，请取消注释注释功能，除非您有理由，否则我怀疑这是必要的。

要控制.css文件的加载顺序，您只需要指定 wp_enqueue_style() 的 $deps 参数

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )

WordPress用于创建要使用的.css文件的有序列表的算法非常简单，只有46行。

/**
* Determines dependencies.
*
* Recursively builds an array of items to process taking
* dependencies into account. Does NOT catch infinite loops.
*
* @since 2.1.0
* @since 2.6.0 Moved from `WP_Scripts`.
* @since 2.8.0 Added the `$group` parameter.
*
* @param mixed     $handles   Item handle and argument (string) or item handles and arguments (array of strings).
* @param bool      $recursion Internal flag that function is calling itself.
* @param int|false $group     Group level: (int) level, (false) no groups.
* @return bool True on success, false on failure.
*/
public function all_deps( $handles, $recursion = false, $group = false ) {
if ( !$handles = (array) $handles )
return false;
foreach ( $handles as $handle ) {
$handle_parts = explode('?', $handle);
$handle = $handle_parts[0];
$queued = in_array($handle, $this->to_do, true);
if ( in_array($handle, $this->done, true) ) // Already done
continue;
$moved     = $this->set_group( $handle, $recursion, $group );
$new_group = $this->groups[ $handle ];
if ( $queued && !$moved ) // already queued and in the right group
continue;
$keep_going = true;
if ( !isset($this->registered[$handle]) )
$keep_going = false; // Item doesn't exist.
elseif ( $this->registered[$handle]->deps && array_diff($this->registered[$handle]->deps, array_keys($this->registered)) )
$keep_going = false; // Item requires dependencies that don't exist.
elseif ( $this->registered[$handle]->deps && !$this->all_deps( $this->registered[$handle]->deps, true, $new_group ) )
$keep_going = false; // Item requires dependencies that don't exist.
if ( ! $keep_going ) { // Either item or its dependencies don't exist.
if ( $recursion )
return false; // Abort this branch.
else
continue; // We're at the top level. Move on to the next one.
}
if ( $queued ) // Already grabbed it and its dependencies.
continue;
if ( isset($handle_parts[1]) )
$this->args[$handle] = $handle_parts[1];
$this->to_do[] = $handle;
}
return true;
}

删除所有错误检查，这将简化为

public function all_deps( $handles, $recursion = false, $group = false ) {
foreach ( $handles as $handle ) {
$this->registered[$handle]->deps && !$this->all_deps( $this->registered[$handle]->deps, true, $new_group ) )
$this->to_do[] = $handle;
}
}

有序列表是数组 $this->to_do[]。要理解这一点，请注意all_deps()是一个递归函数，首先处理依赖关系

$this->all_deps( $this->registered[$handle]->deps, true, $new_group )

只有在处理依赖项后，它才会将项目添加到 $this->to_do[]

$this->to_do[] = $handle;

因此，.css文件排队的顺序不如依赖关系重要，您只需要依赖关系即可实现所需的.css文件的相对顺序。

作为最后的手段，您可以在WordPress使用它使用过滤器"print_styles_array"发送.css文件之前修改此$this->to_do[]数组。

add_filter( 'print_styles_array', function( $todo) {
error_log( print_r( $todo, true ) );
return $todo;
} );

在这里，我仅使用它来转储 $this-to_do[] 数组，但您可以在返回之前对其进行修改。

相关内容

最新更新

热门标签：