Как переопределить выбранные стили с помощью дочерней темы

Я создаю дочернюю тему (Мой первый за последние 3 года) темы WooCommerce, и у меня возникают некоторые проблемы с тем, что некоторые стили макета выделены в родительской теме, и мне нужно добавить !important для всех стилей, которые я хочу переопределить.

Это текущий код очереди в родительских темах functions.php;

 if ( ! is_admin() ) { add_action( 'wp_enqueue_scripts', 'woo_load_frontend_css', 20 ); } if ( ! function_exists( 'woo_load_frontend_css' ) ) { function woo_load_frontend_css () { wp_register_style( 'theme-stylesheet', get_stylesheet_uri() ); wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' ); wp_enqueue_style( 'theme-stylesheet' ); wp_enqueue_style( 'woo-layout' ); } // End woo_load_frontend_css() } 

Что мне нужно сделать, это загрузить layout.css тему css ПОСЛЕ файла layout.css загруженного родительской темой.

У меня была та же проблема, и ответ эпилептика поставил меня на правильный путь.

Я использую «функцию» wootheme, и ему нужно загрузить родительский стиль. Css перед другим родительским css, называемым layout.css. Таким образом, этот порядок необходимо сохранить при загрузке стиля child.css дочерней темы.

Поэтому в основном, чтобы избежать использования !important переопределить все стили, нам нужно загрузить файлы стиля в следующем порядке:

  1. Родительская тема style.css
  2. Родительская тема layout.css
  3. Детский стиль theme.css

Для этого нам нужно изменить:

  1. Детский стиль theme.css
  2. Функции детской темы.php

Детский стиль theme.css

Измените этот файл, чтобы импортировать файлы css родительской темы в правильном порядке:

 @import url("../function/style.css"); @import url("../function/css/layout.css"); 

Функции детской темы.php

Затем добавьте это в свои функции. Php, чтобы избежать повторной загрузки layout.css (woo-layout) и избежать загрузки css (theme.css) дочерней темы:

 if ( ! function_exists( 'woo_load_frontend_css' ) ) { function woo_load_frontend_css () { // comment this, as we will be loading this css with a different priority //wp_register_style( 'theme-stylesheet', get_stylesheet_uri() ); // we can register the style here for future manipulation... wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' ); // comment this, as we will be loading this css with a different priority //wp_enqueue_style( 'theme-stylesheet' ); // ... but we will not be enqueuing it, instead we will import it in the child theme's style.css //wp_enqueue_style( 'woo-layout' ); } // End woo_load_frontend_css() } 

Вы можете также загрузить пустую функцию, подобную этой, чтобы добиться такого же эффекта:

 if ( ! function_exists( 'woo_load_frontend_css' ) ) { function woo_load_frontend_css () { } // End woo_load_frontend_css() } 

Затем зарегистрируйте и добавьте css вашей дочерней темы, добавив это в файл functions.php вашей дочерней темы сразу после предыдущей function woo_load_frontend_css :

 function cherrypick_child_enqueue_css() { wp_register_style( 'theme-stylesheet', get_stylesheet_uri() ); wp_enqueue_style( 'theme-stylesheet' ); } add_action( 'wp_enqueue_scripts', 'cherrypick_child_enqueue_css', 99 ); // using priority 99 we make sure the child theme style.css will be loaded after all other css 

Теперь все файлы стилей будут загружены в правильном порядке.

Поскольку функция Woo завершается if( ! function_exists('function_name') ) вы можете переопределить эту функцию в файле functions.php вашей дочерней темы.

Добавьте функцию в файл, а затем настройте порядок очередей, чтобы загрузить style.css после layout.css .

 if ( ! function_exists( 'woo_load_frontend_css' ) ) { function woo_load_frontend_css () { wp_register_style( 'theme-stylesheet', get_stylesheet_uri() ); wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' ); wp_enqueue_style( 'woo-layout' ); //load stylesheet after layout. wp_enqueue_style( 'theme-stylesheet' ); } // End woo_load_frontend_css() }