Поддержка Темы и шаблоны Как подключить несколько файлов стилей к дочерней теме?

  • Создал дочернюю тему, в ней есть основной стиль дочерней темы (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

    • Тема изменена 2 месяца, 3 недели назад пользователем jurvrn.
    • Тема изменена 2 месяца, 3 недели назад пользователем Yui.
Просмотр 15 ответов — с 1 по 15 (всего 38)
  • Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    В 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

    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.
    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.

    это берется из дочернего «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) в конце

    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.
    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.

    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’ — это одно и тоже?

    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.
    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.

    наоборот — самый низкий, стили в порядке убывания значимости 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… Почему же??

    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.
    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.
    • Ответ изменён 2 месяца, 3 недели назад пользователем jurvrn.

    первым самый «ненужный» (parent),

    Наоборот! Самый нужный, т.к. в нем содержится бо́льшая часть определений. Если, конечно, Вы его не скопировали целиком в дочерний.

    Как поставить style-mobile.css последним в очередь загрузки?

    Сделать его зависимым от того, который должен загрузиться перед ним, который в свою очередь сделать зависимым зависимым от того, который должен загрузиться перед ним, который в свою очередь …

    Юрий,

    Если, конечно, Вы его не скопировали целиком в дочерний.

    не копировал

    Сделать его зависимым от того, который должен загрузиться перед ним, который в свою очередь сделать зависимым зависимым от того, который должен загрузиться перед ним, который в свою очередь

    попытался это сделать, но видимо не совсем понимаю логику работы кода…
    просьба подкорректировать
    https://rextester.com/YZT90577

Просмотр 15 ответов — с 1 по 15 (всего 38)