Как подключить несколько файлов стилей к дочерней теме?

Юрий, как вариант надо в (child)style.css прописать не просто новую ширину, а условие

@media... min-width: 800px {
            #easywp-header-wrapper {
                   width: 1260px.....
            }
}

так будет правильно? по «кодексу WordPress»? или лучше скопировать то что было из parent в mobile снова?

• Ответ изменён 5 лет назад пользователем jurvrn.

tuxfighter (@tuxfighter), Юрий (@yube) просьба посмотреть не накрутил ли я тут чего непонятного в перечне стилей и обещаю тему на этом закрыть и соответствует ли моим делениям стилей? а то может я думаю что всё правильно работает, а оно непонятным образом соединяется….

описание стилей и их порядок в потоке:

'parent-style-css'  /wp-content/themes/easywp/style.css
'easywp-maincss-css'  /wp-content/themes/jurvrn-on-easywp/style.css
'font-awesome-css'  /wp-content/themes/easywp/css/font-awesome.min.css
'addon-style-css' /wp-content/themes/jurvrn-on-easywp/style-addon.css

последовательность и порядок стилей в function.php (может не нужно дублировать? или наоборот нужно в каждой строке объявления стилей указывать массив полностью?):

 wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css', array(  ) );
wp_enqueue_style( 'addon-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style-addon.css', array(  'parent-style','easywp-maincss','font-awesome' ) );
 wp_enqueue_style( 'mobile-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style-mobile.css', array('addon-style', 'parent-style','easywp-maincss','font-awesome' ) );

tuxfighter,
— изначально ширина темы 1150 (в parent-style) файл style.css в папке родительской темы,
— в дочерней теме я увеличиваю ширину до 1260 (в child-style) файл style.css, но уже в папке дочерней темы
— для устройств мобильных в parent-style есть @media правило что ширина приобретает 100%. Но так как включилась уже ширина из child-style, то она так и остается 1260 для мобильных устройств, не реагирует на @media из parent-style.
— Для мобильных устройств есть файл styile-mobile.css в папке дочерней темы.
Вопрос: что лучше — сделать условие на ширину в 100% по условию `@media… min-width: 800px {
#easywp-header-wrapper {
width: 1260px…..
}
}` в дочернем стиле (то есть будет ширина для ПК браться из дочернего стиля, а для мобильных ширина в 100% будет браться из родительского стиля или
продублировать мобильный стиль для ширины в 100% из родительского стиля скопировав его в мобильный стиль style-mobile.css? Он будет выполнятся первым и если ширина экрана будет маленькой сработает он, если большой экран — сработает стиль дочерней темы (на 1260px), ну а стиль родительской темы как бы и не сработает.

tuxfighter (@tuxfighter),
смысл кода — что при ширине экрана больше 800px — ширина блока будет 1260px, а если меньше то тогда 100%. (а там нужно max-widht) — ошибся

P.S. надо сделать чтобы style-mobile.css срабатывал раньше стилей из виджетов. Например это можно увидеть для элемента .butggton его код для мобильных устройств загружается после стилей из самого виджета

сайт jurvrn.ru

• Ответ изменён 5 лет назад пользователем jurvrn.
• Ответ изменён 5 лет назад пользователем jurvrn.