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

Question

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

12 февр. 2015 г., 00:18:52

Просмотры: 34.6K

Голосов: 11

Я перевел свой сайт 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' );
}

Dharkov

113

css дочерняя тема

Комментарии

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

Milo

12 февр. 2015 г. 02:18:15

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

Dharkov

12 февр. 2015 г. 03:06:00

похоже, что таблица стилей вашей дочерней темы загружается очень рано, вы добавляете её через enqueue или вставляете тег link напрямую в header? она должна быть добавлена через enqueue, чтобы загружаться после родительской таблицы стилей, тогда вы сможете использовать те же CSS-селекторы для переопределения родительских стилей без !important или повышенной специфичности. смотрите ответ rambillo ниже.

Milo

12 февр. 2015 г. 03:35:29

Все ответы на вопрос

Комментарии

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

Dharkov

13 февр. 2015 г. 19:36:52

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

roberthuttinger

8 мар. 2016 г. 20:53:37

Создайте пример на codepen, и мы посмотрим.

rambillo

10 мар. 2016 г. 08:02:17

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

mefiX

18 окт. 2016 г. 22:41:19

roberthuttinger, ты решил эту проблему?

Cognibuild

19 апр. 2020 г. 04:49:05

Краткий ответ: первый параметр каждой функции wp_enqueue_style() не должен оставаться как 'parent-style' и 'child-style'. Их следует переименовать, чтобы они соответствовали названию родительской темы и её дочерней темы.

Проблема

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

Ожидание

Страница Codex о дочерних темах правильно указывает, что если ничего не делать, CSS дочерней темы будет подключён автоматически. Так и происходит, но только его. Работа с CSS немного отличается: вы хотите переопределять, а не заменять. Это логично (так же работают другие файлы темы), но стоило бы добавить примечание.

Решение

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

function theme_enqueue_scripts() {
    //ПЕРВОЕ
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...здесь может быть кастомная очередь .js и .css для плагинов JavaScript и подобного

    //ПОСЛЕДНЕЕ
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

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

Удачной охоты за селекторами ;)

Henrik Erlandsson

502

8 апр. 2016 г. 17:02:01

Комментарии

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

quasi

8 дек. 2019 г. 15:09:07

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

Вместо:

.wp-caption {
     background: #2d2d2d !important;
}

Используйте:

.entry .wp-caption {
     background: #2d2d2d;
}

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

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

Twodogstar

1

12 февр. 2015 г. 02:06:55

Решение, предложенное Rambillo, у меня не сработало. Я сделал так, и теперь всё работает:

function my_theme_enqueue_styles() {
        wp_enqueue_style( 'name-child-style', get_stylesheet_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', PHP_INT_MAX );

Azodium

101

11 февр. 2022 г. 17:08:51

rambillo 357 · Accepted Answer · 2015-02-12T03:17:34Z

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

// Сначала подключаем стили родительской темы, затем дочерней/кастомные стили
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. Это приводит к тому, что в разделе head сначала загружается родительская тема, а за ней - дочерняя. Благодаря этому любые одинаковые стили в дочерней теме перезапишут версию из родительской темы.