在Woocommerce CSS之后加载子主题CSS

Question

我正在努力避免使用！重要的是覆盖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

我做错了什么？

谢谢！

Answer 1

不确定为什么要推出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' );

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

Answer 2

您在问题中提到您试图覆盖某些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。

1. 优先考虑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文件。

2. 对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' );
       }
   }
   

   注意：如果未加载样式表依赖项的文件（不存在，插件未激活），则由于依赖性破坏，您的文件也不会被加载。

   < / LI>

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

   WooCommerce：.woocommerce a.button{}

   你的：.button.add_to_cart_button{}

   尝试使用此：.woocommerce a.button{}，它将被覆盖。您还可以查看this question。

Answer 3

要控制.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-＆gt; to_do []。要理解这一点，请观察all_deps（）是递归函数并首先处理依赖性

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

仅在处理依赖关系之后才将项目添加到$ this-＆gt; to_do []

$this->to_do[] = $handle;

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

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

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

这里我只使用它来转储$ this-to_do []数组，但你可以在返回之前修改它。