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

@jurvrn · Регистрация: 09.07.2018

Студворк — интернет-сервис помощи студентам

Нужно подключить файл дополнительных стилей из дочерней темы.
Перепробовал несколько вариантов (3) не сработало. Может где-то ошибка в коде.
файл functions.php в паке дочерней темы

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
 
// 1 вариант подключить файл стилей из дочерней темы
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/stylemobile.css' );
}
 
// 2 вариант подключить файл стилей из ДТ
function my_styles_scripts() {
    wp_enqueue_style( 'easywp-child-4L', get_stylesheet_directory_uri() . '/style.css', array(), '', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_styles_scripts' );
 
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
 
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
 
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(  ) );
// 3 вариант подключить файл стилей из ДТ        
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'stylemobile.css', array(  ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
 
// END ENQUEUE PARENT ACTION

@HectorPrima · 26.07.2018, 05:15

Вариант 2 прекрасно работает.
Может у вас кеширование включено и страница не обновляется?

@wwowa · 26.07.2018, 09:22

Вот подключение стилей в дочерней теме. И там т там основной стиль естественно под одним именем style.css.

CSS
1
2
3
4
5
6
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
    );
}

Подключите дополнительный стиль по аналогии с child-style, соответственно добавив папочку, куда вы там его загнали.

Сообщение от jurvrn

PHP
1
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/stylemobile.css' )' );

Так подключаются стили из родительской темы. Зачем вы подключаете stylemobile.css какой то еще? Подключают только основной?? По моему вы немного запутались

@HectorPrima · 26.07.2018, 09:52

Расскажите зачем в дочерней теме подключать дефолтовый стиль (style.css) который и так автоматически грузится.
Вот эти два стиля подключаются без единой строчки кода в functions.php дочерней темы.

HTML5
1
2
<link rel='stylesheet' id='storefront-style-css'  href='http://woo/wp-content/themes/storefront/style.css?ver=2.3.3' type='text/css' media='all' />
<link rel='stylesheet' id='storefront-child-style-css'  href='http://woo/wp-content/themes/storefront-child/style.css?ver=2.3.3' type='text/css' media='all' />

@wwowa · 26.07.2018, 10:36

Сообщение от HectorPrima

Расскажите зачем в дочерней теме подключать дефолтовый стиль (style.css) который и так автоматически грузится.

Вот из кодекса Вордпрес про дочки

CSS
1
2
3
4
5
6
7
8
9
10
11
12
/*
Theme Name: Twenty Ten Child
Description: Дочерняя тема для темы Twenty Ten 
Author: Ваше имя
Template: twentyten
*/
 
@import url("../twentyten/style.css");
 
#site-title a {
    color: #009900;
}

Подключать импортом или через функции - дело личное. Работает без подключения или нет, я лишних вопросов не задаю. В кодексе написано, что надо - я подключаю. Чтобы потом лишних вопросов не возникло..

Добавлено через 8 минут

Сообщение от HectorPrima

2
<link rel='stylesheet'

И еще. Так стили в вордпрес не подключаются. Именно в функциях и никаких абсолютных путей.

@jurvrn · 26.07.2018, 11:14 **[ТС]**

wwowa, HectorPrima, ситуация такая: создал дочернюю тему через Child Theme Configurator. Создал файлы по умолчанию (т.е. style.css и functions.php).
Внёс все нужные изменения через сам этот плагин в style.css дочерней темы по основным элементам. Но вот участок кода, отвечающий за адаптивность внёс редактирую style.css напрямую в конец кода.
Но вот если вносить правки в ручном режиме напрямую в style.css то они не сохраняются при копировании дочерней темы (из самого плагина, видимо в базу не попадают).
Вышел на решение - создать дополнительный stylemobile.css (отвечающий за адаптивность кусок кода) и подключать его после дочернего style.css.
Но подключить мне теоретических знаний не хватает по функциям.
Тот что второй вариант - это и есть functions.php из дочерней темы, но там подключается только дочерний style.css. Кэши удаляю, станицу обновляю. Этому форум уже научил )

CSS
1
@import url("stylemobile.css");

-работает, но тоже не сохраняется при копировании средствами самого плагина.
Поэтому вижу решение через function.php подключить два стиля (как бы дополнительно к основному)
Вот код файла функций, созданный дочерней темой - просьба прямо туда внести изменения (мне грамотности в коде не хватает)

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
 
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
 
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 );
 
// END ENQUEUE PARENT ACTION

@HectorPrima · 27.07.2018, 02:09

Сообщение от wwowa

В кодексе написано

Не вопрос. Продолжайте.

Сообщение от wwowa

Так стили в вордпрес не подключаются

Это я показал что wordpress сгенерировал. Естественно я так стили не подключаю

@wwowa · 27.07.2018, 22:01

Сообщение от HectorPrima

Не вопрос. Продолжайте.

Я все-таки проверил

. Вы правы, подключение в функциях лишнее. Стили дублируются. Но такое подключение мне предложил плагин One-Click Child Theme. Кликнул и создалось все... И работает. Оказалось чуть лишнее создается....

Сообщение от HectorPrima

Вот эти два стиля подключаются без единой строчки кода

Но без @import стили родителя не подключаются.???? Сайт только со стилями дочки???

@jurvrn · 27.07.2018, 23:28 **[ТС]**

Плагин предупреждает

Your stylesheet has changed since the last time you used the Configurator. Please follow the steps for "CONFIGURE an existing Child Theme" under the "Parent/Child" Tab or you will lose these changes.

Но что делал не разобрался. Поэтому решил создать дополнительный файл стилей и подключить через функцию

@jurvrn · 30.07.2018, 13:10 **[ТС]**

HectorPrima, wwowa, вот код в теории вроде всё правильно - но не работает

PHP
1
2
3
4
5
6
7
8
9
<?php
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style') );
    wp_enqueue_style( 'child-style-mobile',get_stylesheet_directory_uri() . '/stylemobile.css',array('parent-style', 'child-style') );
}

@wwowa · 30.07.2018, 21:53

stylemobile.css - лежит в корневой директории дочерней темы??
У меня когда "по первости" тоже ничего не работало, я просто проверял пути выводом их через "эхо". Примерно так попробуйте, какой путь напишет

PHP
1
echo "get_stylesheet_directory_uri() . '/style.css"

конечно оберните там в "php" где нужно или еще что.. Я без подсказок ни строчки не напишу правильно((

@jurvrn · 30.07.2018, 22:16 **[ТС]**

Заработало когда я добавил в строку цифру 12.

PHP
1
add_action( 'wp_enqueue_scripts', 'theme_enqueueх_styles', 12 );

Что она значит? В интернете только один раз встретились такое решение. Кстати 11 тоже работает, а 10 не работает.
Да и еще: при редактировать темы через саму тему стиль style.css подгружается только частично, а stylemobile.css нормально. Как будто они перемешиваются как то в этом случае неправильно. Как будто stylemobile первым идет, а надо вроде как наоборот.

Добавлено через 32 секунды
wwowa, HectorPrima,

@wwowa · 31.07.2018, 09:34

Сообщение от jurvrn

Что она значит?

Это как раз и есть приоритет загрузки стилей. Что должно раньше загрузится. Естественно, последний загруженный стиль перебьет ранний. Отсюда могут быть проблемы. Вроде так, но я никогда этим приоритетом не пользовался и так все работает. Поэтому не особо в теме. Встречал в темах, ставят там 100, 200, чтобы наверняка последний загружался.
Так что подробней почитайте сами. А если заработало, то и пусть. Не мешай сайту работать

Кстати вот эти "дополнительные стили" в самой теме имеют второй приоритет, насколько я понимаю. Выше только стили прописанные в коде самих классов.

@jurvrn · 31.07.2018, 10:53 **[ТС]**

wwowa, HectorPrima, в итоге решил воспользоваться советом HectorPrima
и оставил "@import url("../easywp/style.css");" и оптимизированный HectorPrima functions.php

@jurvrn · 31.07.2018, 11:07 **[ТС]**

однако при редактировании темы через саму тему не все настройки из style.css дочерней темы подгружаются
скриншоты прилагаю

@HectorPrima · 31.07.2018, 12:23

Сообщение от jurvrn

дочерней темы подгружаются

Может другие какие плагины мешают т.к. у меня все выглядело отлично.
Так же как на странице (не в редакторе)
Тестировал на голом WP

@jurvrn · 31.07.2018, 12:28 **[ТС]**

HectorPrima, только когда редактирование темы включаю (левая часть скриншота). Просьба проверить у себя

@HectorPrima · 31.07.2018, 13:00

Сообщение от jurvrn

только когда редактирование темы включаю

Все понятно. Да у меня так же по разному отображается. Тут дела в самой теме Easywp
В файле easywp\admin\custom.php есть код

PHP
1
add_action( 'wp_head', 'easywp_customizer_css' );

он добавляет именно при настройке стили оригинальной темы прямо в код окна.
Для чего это нужно лень разбираться.
Можете попробовать к себе в function.php вставить код отключающий вышеописанный.

PHP
1
2
3
4
add_action( 'after_setup_theme', 'easywp_remove_opt' );
function easywp_remove_opt() {
    remove_action( 'wp_head', 'easywp_customizer_css' );
}

Вот что получается https://yadi.sk/i/UOG-BYbv3Zkaux

@jurvrn · 31.07.2018, 16:00 **[ТС]**

HectorPrima, ещё раз спасибо, разбираться не надо для чего это, всё работает как надо!
У меня будет ещё один глобальный вопрос вашего профессионального уровня - по добавлению свободного блока над блоком постов. Это создам другую тему.
Немного правда не понятно почему мой вопрос не удалось решить без импорта стиля через дочерний style.css (ведь импорт как бы замедляет загрузку). Поэтому хотелось через функцию...

Добавлено через 13 минут

Сообщение от HectorPrima

Можете попробовать к себе в function.php вставить код отключающий вышеописанный.

PHP
1
2
3
add_action( 'after_setup_theme', 'easywp_remove_opt' );
function easywp_remove_opt() {
 remove_action( 'wp_head', 'easywp_customizer_css' );

}

а куда его вставить - в начало или конец кода в файле?
Все таки не нравиться мне импорт... На вашем решении построил функцию в двух вариантах: просьба сказать какая лучше и правильнее будет работать -
1

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
 
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
 
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() ) . 'stylemobile.css', array( 'chld_thm_cfg_parent','easywp-maincss','font-awesome' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css', 20 );
 
// END ENQUEUE PARENT ACTION

2

PHP
1
2
3
4
5
6
7
8
9
<?php
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 20);
 
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style') );
    wp_enqueue_style( 'child-style-mobile',get_stylesheet_directory_uri() . '/stylemobile.css',array('parent-style', 'child-style') );
}

@HectorPrima · 01.08.2018, 02:56

Если уже сильно @import не нравится который вроде как сами разработчики советуют используйте свой первый вариант, т.к. во втором у вас дублируются стили в сгенерированом коде:

HTML5
1
2
<link rel='stylesheet' id='child-style-css'  href='http://wp3/wp-content/themes/easywp-child-1/style.css?ver=4.9.7' type='text/css' media='all' />
<link rel='stylesheet' id='easywp-maincss-css'  href='http://wp3/wp-content/themes/easywp-child-1/style.css' type='text/css' media='all' />

Сообщение от jurvrn

а куда его вставить - в начало или конец кода в файле?

Куда нибудь, в конец можете.

Сообщение от jurvrn

по добавлению свободного блока над блоком постов

Блок для вставки виджетов?

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@HectorPrima 716 / 473 / 258 Регистрация: 19.12.2014 Сообщений: 1,801
	26.07.2018, 05:15
	Вариант 2 прекрасно работает. Может у вас кеширование включено и страница не обновляется? 0

@jurvrn 3 / 3 / 4 Регистрация: 09.07.2018 Сообщений: 279
	31.07.2018, 10:53 [ТС]
	wwowa, HectorPrima, в итоге решил воспользоваться советом HectorPrima и оставил "@import url("../easywp/style.css");" и оптимизированный HectorPrima functions.php 0

@jurvrn 3 / 3 / 4 Регистрация: 09.07.2018 Сообщений: 279
	31.07.2018, 11:07 [ТС]
	однако при редактировании темы через саму тему не все настройки из style.css дочерней темы подгружаются скриншоты прилагаю Миниатюры 0

@jurvrn 3 / 3 / 4 Регистрация: 09.07.2018 Сообщений: 279
	31.07.2018, 12:28 [ТС]
	HectorPrima, только когда редактирование темы включаю (левая часть скриншота). Просьба проверить у себя 0

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

Решение