Как подключить несколько файлов стилей к дочерней теме?
-
Создал дочернюю тему, в ней есть основной стиль дочерней темы (style.css) и два дополнительных стиля (style-addon.css и style-mobile.css).
Почему-то второй стиль (style-mobile.css) не подключается (не срабатывает). В нем только код с @media (для удобства редактирования)
Пробовал два варианта (проще и сложнее):
1) https://rextester.com/SYLEDO51708
2) http://sandbox.onlinephpfunctions.com/code/d9b85dff3dd1ffad0e01067148f0f1b497d956b5Работу кода можно посмотреть здесь https://i.yapx.ru/FIRQq.png
Не меняется параметр #easywp-outer-wrapper
-
В
wp_enqueue_style()
нужно третьим параметром указать зависимость от основной таблицы стилей, чтобыstyle-mobile.css
загружался послеstyle.css
, а не до него:wp_enqueue_style( 'style-mobile', get_stylesheet_directory_uri() . '/style-mobile.css', array( 'parent-style' ) );
Sergey (@sergeybiryukov) спасибо, но не сработало (( я не точно объяснил
Есть ещё дочерний основной style.css, надо вперед него загрузить (это тот style, который первым загружается автоматически родительской темой, в нем у меня изменения только элементов родительского стиля)
это видно по#easywp-outer-wrapper { width: 1260px;
это берется из дочернего «style», а должно быть «100%» из style-mobile.css
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style-addon', get_stylesheet_directory_uri() . '/style-addon.css'); wp_enqueue_style( 'style-mobile', get_stylesheet_directory_uri() . '/style-mobile.css', array( 'parent-style' ) );
попытался изменить на вот это — не получилось
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style-addon', get_stylesheet_directory_uri() . '/style-addon.css'); wp_enqueue_style( 'style-mobile', get_stylesheet_directory_uri() . '/style-mobile.css', array( 'child-style' ) );
сайт jurvrn.ru
это берется из дочернего «style», а должно быть «100%» из style-mobile.css
Потому что jurvrn-on-easywp/style.css’ подключается после jurvrn-on-easywp/style-mobile.css. Для того и существуют зависимости, чтобы можно было установить правильный порядок подключения. Сделайте style-mobile.css зависимым от style.css.
Юрий (@yube), не получается если так (добавил 1 строку и изменил в 4 строке)
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style-addon', get_stylesheet_directory_uri() . '/style-addon.css'); wp_enqueue_style( 'style-mobile', get_stylesheet_directory_uri() . '/style-mobile.css', array( 'child-style' ) );
получается что мне надо чтобы загружались: первым style-mobile -> style(child) -> style-addon ->style(parent) в конце
wp_enqueue_style( ‘style-mobile’, get_stylesheet_directory_uri() . ‘/style-mobile.css’, array( ‘child-style’ ) );
/wp-content/themes/jurvrn-on-easywp/style.css у Вас дважды подключен. Стоить посмотреть в родительской подключение стилей.
Попробуйте убрать в дочерней подключение её style.css и сделать доп.стили зависимыми от easywp-maincss.
как-то так
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style-addon', get_stylesheet_directory_uri() . '/style-addon.css'); wp_enqueue_style( 'style-mobile', get_stylesheet_directory_uri() . '/style-mobile.css', array( 'easywp-maincss' ) );
Юрий (@yube), я видел что один из плагинов использует
easywp-maincss
, но не разобрался как туда подключить мои…. Вот он.if ( !function_exists( 'chld_thm_cfg_locale_css' ) ): function chld_thm_cfg_locale_css( $uri ){ if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) ) $uri = get_template_directory_uri() . '/rtl.css'; return $uri; } endif; add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' ); if ( !function_exists( 'chld_thm_cfg_parent_css' ) ): function chld_thm_cfg_parent_css() { wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) ); } endif; add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 ); if ( !function_exists( 'child_theme_configurator_css' ) ): function child_theme_configurator_css() { wp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'chld_thm_cfg_parent','easywp-maincss','font-awesome' ) ); } endif; add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css', 10 );
Просьба теперь сделать для моих стилей. Мне надо чтобы загружались: первым style-mobile -> style(child) -> style-addon ->style(parent) в конце
я видел что один из плагинов использует easywp-maincss
Сколько плагинов уже внесли свой вклад в functions.php? Боюсь, у Вас там уже такая мешанина, что проще сделать с нуля. Могу ошибаться, я не телепат, я только читаю то, что Вы пишете.
Просьба теперь сделать для моих стилей.
Просьба отклонена. Ваш сайт, Ваши стили, Вам и делать.
style(parent) в конце
То есть, чтобы правила в нем имели самый высокий приоритет? Интересное решение.
[offtop]
Вы вообще в курсе, что упоминание ника с @ отсылает сообщение упоминаемому? А у некоторых эти сообщения приходят на телефон. Очень приятно, знаете ли, после полуночи узнавать, что кто-то без тебя не может угадать слово, зная все буквы 🙂Юрий, простите не знал что на телефон. Отложим до утра.
Сколько плагинов уже внесли свой вклад в functions.php?
там только один вариант кода по подключению стилей — «короткий». Другого кода никакого нет. «Сложный» код — это я брал при создании проб дочерней темы одним из плагинов.
Просьба отклонена. Ваш сайт, Ваши стили, Вам и делать.
я попробую сам, направление я понял, но если не получиться установить приоритет — обращусь за помощью.
style(parent) в конце
То есть, чтобы правила в нем имели самый высокий приоритет?
наоборот — самый низкий, стили в порядке убывания значимости style-mobile -> style(child) -> style-addon ->style(parent)
P.S.(1) какой код лучше взять за основу «простой, короткий» или «длинный, сложный» ?
1) style(из child) — изменяет имеющиеся элементы из style(parent).
2) style-addon — содержит стили добавленных элементов, которых нет ни в style(из child), ни в style(parent).
3) style-mobile — содержит элементы и из style(child) и из style(parent), но с кодом @media (то есть только для мобильных устройств).Какая логика подключения должна быть? Например чтобы измененные шрифты не скакали на экране сначала нужно подключить style(child), а потом только style(parent).
P.S.(2) ‘parent-style’ и ‘easywp-maincss’ — это одно и тоже?
наоборот — самый низкий, стили в порядке убывания значимости style-mobile -> style(child) -> style-addon ->style(parent)
Ну вообщето все уроки по css начинаються с того, что объясняют — применяться будет самое последнее правило.
Т.е. в вашем случае, то что хоть один стиль из style-mobile применится — вообще никаких шансов. А вот style(parent) — перебъет все остальное.P.S.(1) какой код лучше взять за основу «простой, короткий» или «длинный, сложный» ?
Понятный Вам.
Например чтобы измененные шрифты не скакали на экране
Это вообще отдельный, довольно сложный вопрос.
сначала нужно подключить style(child), а потом только style(parent).
Всегда сначала родитель, потом ребенок. Иначе теряется смысл.
‘parent-style’ и ‘easywp-maincss’ — это одно и тоже?
Это хендлеры. Они разные, но могут указывать на один и тот же файл. Нажмите Ctrl+U и посмотрите 🙂
p.s. Имейте в виду, что сначала выполняется functions.php дочерней Темы, а затем functions.php родительской, которая тоже, скорее всего, подключает скрипты и стили, и эти подключения надо учитывать, а иногда и бороться с ними.
tuxfighter, Юрий, буду пробовать… Но подскажите 1) в каком порядке применяются стили в списке array и нужно ли этот список array иметь в каждой функции подключения шрифта?
2)применяться будет самое последнее правило.
это я знаю, поэтому показал имееноо примнение. Значит подключаться они должны так: первым самый «ненужный» (parent), а последним нужный (mobile). Как поставить style-mobile.css последним в очередь загрузки?
Понятный Вам.
в плане очередности ни один не понятен….
Это вообще отдельный, довольно сложный вопрос.
вот если бы первым загрузился стиль с измененным шрифтом, а потом «отменить» применение параметра шрифта уже в следующем…
Всегда сначала родитель, потом ребенок. Иначе теряется смысл.
если child содержит измененные параметры шрифтов то он и должен загружаться последним, чтобы быть в коде последним, но тогда видны изменения будут… придется править в самом родительском стиле….
«‘easywp-maincss’» — это дочерний основной стиль —
href='http://jurvrn.ru/wp-content/themes/jurvrn-on-easywp/style.css'
Самое главное :
вот что получилось https://rextester.com/YZT90577
'mobile-style-css'
грузится последним, но не применяется именно для отдельных элементов, например#easywp-header-wrapper
… Почему же??первым самый «ненужный» (parent),
Наоборот! Самый нужный, т.к. в нем содержится бо́льшая часть определений. Если, конечно, Вы его не скопировали целиком в дочерний.
Как поставить style-mobile.css последним в очередь загрузки?
Сделать его зависимым от того, который должен загрузиться перед ним, который в свою очередь сделать зависимым зависимым от того, который должен загрузиться перед ним, который в свою очередь …
Юрий,
Если, конечно, Вы его не скопировали целиком в дочерний.
не копировал
Сделать его зависимым от того, который должен загрузиться перед ним, который в свою очередь сделать зависимым зависимым от того, который должен загрузиться перед ним, который в свою очередь
попытался это сделать, но видимо не совсем понимаю логику работы кода…
просьба подкорректировать
https://rextester.com/YZT90577
- Тема «Как подключить несколько файлов стилей к дочерней теме?» закрыта для новых ответов.