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

  • Решено jurvrn

    (@jurvrn)


    Создал дочернюю тему, в ней есть основной стиль дочерней темы (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 мес., 2 нед. назад пользователем  jurvrn.
    • Тема изменена 2 мес., 2 нед. назад пользователем  Yui.
Просмотр 15 ответов — с 16 по 30 (всего 38)
  • Модератор Юрий

    (@yube)

    У Вас style-mobile.css и так подключается последним. После него только гуглефонты родительская подключает. Что не так?

    Юрий, да ‘mobile-style-css’ грузится последним, но не применяется именно для отдельных элементов, например #easywp-header-wrapper… Почему же??
    его значение берется из child-style (1260px), не из style-mobile, где указано при @media… должна быть 100% ширина

    • Ответ изменён 2 мес., 2 нед. назад пользователем  jurvrn.
    • Ответ изменён 2 мес., 2 нед. назад пользователем  jurvrn.
    Модератор Юрий

    (@yube)

    например #easywp-header-wrapper… Почему же??

    Потому что в style-mobile.css нет правил для этого селектора.

    Юрий, оно есть для мобильного устройства в parent-стайл. Но это значение я поменял для основного сайта в child-style (увеличил ширину), как же его применить опять из основного стиля родительской темы?
    то есть была ширина 1150 (parent), я сделал 1260(child), для мобильного она 100% (parent), но при мобильном виде продолжает браться из child (1260px)…..

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

    
    @media... min-width: 800px {
                #easywp-header-wrapper {
                       width: 1260px.....
                }
    }
    • Ответ изменён 2 мес., 2 нед. назад пользователем  jurvrn.
    • Ответ изменён 2 мес., 2 нед. назад пользователем  jurvrn.
    Модератор Юрий

    (@yube)

    Определено в одном, переопределено в другом, а я жду чего-то от третьего. Круто, чё 🙂

    как же его применить опять из основного стиля родительской темы?

    Отменить нельзя, можно только еще раз переопределить, скопировав правила из родительского.

    [oftop]Когда этот титанический труд будет закончен, его итог можно будет использовать как средство пытки молодых кодеров — заставлять разбираться что там к чему, почему, как и зачем.[/oftop]

    ниудиржалсо

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

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

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

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

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

    оффтоп — я и есть молодой кодер, которого мучают )

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

    прошу прощения что обращаюсь по @

    не страшно, эти сообщения меня достали еще в первые полгода и теперь все с этого домена сразу идет в спам

    прошу помочь с отладкой в плане правильной логики и быстродействия.

    начните с объединения всех файлов стилей в один.

    начните с объединения всех файлов стилей в один.

    знаю, мне об этом уже говорили, но на данном этапе «разработки» мне удобнее делить стили, иначе я в них путаюсь
    оффтоп — я и есть молодой кодер, которого мучают )

    поэтому что лучше — условие на ширину в дочернем стиле или заново переписать, продублировать стили из родительского стиля в мобильном стиле?

    • Ответ изменён 2 мес., 2 нед. назад пользователем  jurvrn.
    Модератор Юрий

    (@yube)

    по «кодексу WordPress»?

    WP тут вообще никаким боком. Это CSS в чистом виде.

    поэтому что лучше — условие на ширину в дочернем стиле или заново переписать, продублировать стили из родительского стиля в мобильном стиле?

    если стиль есть в родительской теме, он не переопределен в дочерней, то зачем его еще где-то дублировать??

    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), ну а стиль родительской темы как бы и не сработает.

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

    я вообще против использования min-width
    ИМХО это не правильно. это противоречит обычным стилям для десктопа

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

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

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

    сайт jurvrn.ru

    • Ответ изменён 2 мес., 2 нед. назад пользователем  jurvrn.
    • Ответ изменён 2 мес., 2 нед. назад пользователем  jurvrn.
Просмотр 15 ответов — с 16 по 30 (всего 38)