Php 在CSS之后加载子主题CSS

我在尽量避免使用！重要的是要覆盖这些样式。现在，我已经将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');
}

以下是网站的实时版本：

我做错了什么

---

谢谢

不确定为什么要将这些样式取消排队，但这应该可以解决您的问题：

// 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' );

---

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

你在问题中提到你试图覆盖一些WooCommerce css规则，但你只是删除了所有WooCommerce样式表，不加载这行代码：

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

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

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

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.css

样式表可能不会被加载，如果您的站点主题是

tweertenven

，则加载

tweertenven.css

优先考虑您的更高级别：

这里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' );
    }
}

这将在所有文件之后加载

子主题.min.css

文件

对函数使用依赖项。例如，如果您只想在

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

注意：如果没有加载样式表依赖项的文件（不存在，插件未激活），那么由于依赖项已断开，您的文件也不会加载

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

WooCommerce:

.WooCommerce a.button{}

您的：

.button。添加到购物车按钮{}

---

尝试使用以下命令：

.woocommerce a.button{}

，它将被覆盖。您还可以检查。

要控制.css文件的加载顺序，只需指定wp\u enqueue\u style（）的$deps参数

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[]。要理解这一点，请注意所有_deps（）都是递归函数，并且首先处理依赖关系

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

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

$this->to_do[] = $handle;

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

在WordPress使用此$this->to_do[]数组发送.css文件之前，您可以使用过滤器“print_styles_array”修改此$this->to_do[]数组

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

---

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

为了覆盖您的css，必须在其他css之后加载。您似乎要将它们出列，将您的子css排队，然后将它们排队。我不知道wordpress。但是我会删除排队，只是在没有Woocomece排队的情况下让你的孩子排队。我不想让所有Woocome样式都排队，因为我需要大部分CSS。我只想覆盖一些部分而不使用！重要的。谢谢不要让任何人排队。把你的加在后面就行了。这样，您的ccs应该在woocommerce之后加载，并覆盖您在文件中指定的规则。即使您在woocommerce之前将样式保留在队列中，您也应该能够在不使用

的情况下覆盖woocommerce样式！重要信息

。假设woocommerce styles.wc_checkout button`如果你想改变它的样式，你可以在你的css目标中更具体一些，它会通过选择

.wc_checkout来改变woocommerce样式。任何div class按钮

谢谢你的回答，但它一直不起作用。我已经尝试了这两种解决方案，并且在我的孩子CSS之后仍然加载WooCommerce。您可以在这里看到：-如果您选中“立即购买”按钮。@user3081614不这样认为。代码经过测试，可以正常工作。首先，在看过你的网站后，我注意到

woocommerce

样式表没有加载。您正在使用

add_过滤器（'woocommerce_enqueue_styles'，'uuu return_empty_array'）。移除它。然后再试一次。请删除“出列”样式，以便您可以对其进行测试。如果你删除了！从CSS属性中，您将看到它将加载CSS。谢谢你的帮助！例如，您能提供一些元素吗？如果没有
，这些元素不会从主题文件中重写！重要信息
？正常。因此，您的sass转换为
子主题.min.css
文件，对吗？但问题是，在woocommerce中，对目标元素使用更详细的规则，而您没有。例如，
.woo span.a
{something}你的：
.a
，它是不可忽略的，你把代码放在哪里，它会被详细的规则覆盖
$this->to_do[] = $handle;

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