Дочерние темы CSS приоритетные проблемы без использования!

Я изменил свой сайт WordPress, чтобы использовать дочерние темы, но стиль родительской темы имеет приоритет над любыми изменениями, которые я делаю в CSS дочерней темы. Я могу обойти это, используя !important, однако, это нестабильное решение, и дочерние темы должны работать как первый ресурс сайта.

Например, на моем сайте граница, которая включает в себя .wp-captionтот же цвет, что и фон, использующий !importantтег, но без него работать не будет.

Связано ли это с файлом functions.php?

Это содержимое моего файла PHP:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

css child-theme

— Dharkov
источник

как вы добавляете style.css вашей дочерней темы?

— Майло

Я использую систему, которую WordPress рекомендует в этом посте: codex.wordpress.org/Child_Themes

— Dharkov

похоже, ваша таблица стилей дочерней темы загружается очень рано, вы ставите ее в очередь или добавляете тег ссылки непосредственно в заголовок? он должен быть поставлен в очередь после родительской таблицы стилей, чтобы вы могли использовать те же селекторы CSS для переопределения родительского элемента без! важной или более высокой специфичности. см ответ Рамбильо ниже.

— Мило

Ответы:

Попробуйте поставить в очередь CSS вашей дочерней темы следующим образом:

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Обратите внимание на несколько вещей:

1) PHP_INT_MAX в качестве приоритета, чтобы он выполнялся последним

2) get_stylesheet_directory_uri () против get_template_directory_uri (), который будет указывать на папку шаблонов дочерней темы вместо родителей.

Я также добавил туда подпапку, /styles/потому что я обычно держу свой CSS в подпапке моей темы.

3) затем следует, array( 'parent-style' )чтобы дочерний CSS имел родительский CSS в качестве зависимости, в результате чего родительская тема сначала помещается в заголовок, а дочерняя тема - CSS. Из-за этого все, что также появляется в дочерней теме, которая уже находится в родительской теме, перезапишет версию родительской темы.

— rambillo
источник

Большое спасибо, новый массив работает отлично, он также чище и понятнее.

— Дарков

все еще не работает .. так странно. 40 минут и 20 уроков по крайней мере на тему двенадцать. Невозможно получить стили для переопределения. body, select { color: red !important; font-size:200% !important; }

— roberthuttinger

Идите вперед и опубликуйте кодовую ручку, и мы посмотрим.

— Рамбильо

PHP_INT_MAX решил это в моем случае. Это заставляет CSS ребенка быть загруженным после родительского.

— mefiX

Вы когда-нибудь решали эту проблему?

— gjnave

Ответ TLDR: первый параметр каждого wp_enqueue_style()не должен быть оставлен как «родительский стиль» и «дочерний стиль». Они должны быть переименованы, чтобы соответствовать названию родительской темы и ее дочернему элементу.

проблема

Если вы не переименуете параметры, вы получите дочернюю тему, помещенную в очередь во второй раз, что может привести к тому, что правила дважды появятся в Firebug, и изменение значений в неправильной не окажет никакого видимого эффекта, что может заставить вас думать, что ваши дочерние правила не переопределить родителя.

Ожидание

На странице Кодекса о дочерних темах правильно сказано, что если вы ничего не делаете, дочерний CSS-код автоматически связывается. Да, но только это. Рабочий процесс CSS немного отличается: вы хотите переопределить, а не заменить. Это логично (работает как другие файлы темы), но они могли иметь примечание.

Решение

Переименуйте параметры. Я делаю это, как показано ниже, чтобы получить (немного) больше контроля, обратите внимание, что вы должны заменить twentysixteen и twentysixteen-child именами вашей темы и дочерней темы:

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(Также обратите внимание, что вы не получаете контроль над порядком ссылок некоторых (всех?) Плагинов WP в этом действии. Они становятся связанными после.)

Удачного селектора-охоты;)

— Хенрик Эрландссон
источник

Мне кажется, что это правильный ответ, потому что он правильно использует платформу Wordpress, ничего не форсируя.

— квази

Вы можете использовать более конкретный селектор в CSS вашей дочерней темы, чтобы он имел приоритет.

Так что вместо:

.wp-caption {
     фон: # 2d2d2d! важный;
}

Использование:

.entry .wp-caption {
     фон: # 2d2d2d;
}

Вы также должны быть уверены, что поставьте в очередь таблицу стилей вашей дочерней темы в вашем файле functions.php, если вы еще этого не сделали.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

— Twodogstar
источник