@import стилей Дочерней темы через PHP

Использование дочерних тем в WordPress — правильный способ изменить существующую тему, однако директива CSS @import работает медленно, поэтому её стоит избегать.

200мс уходит на загрузку файла стилей дочерней темы и 200мс на загрузку CSS родительской темы. И эта последовательность неизменна. А у современных браузеров для загрузки обоих файлов должно уходить примерно 200мс, из-за наличия параллельной загрузки, но для этого оба файла должны начать загружаться в одно время. Однако из-за вложенности вызова одного в дрогой этого не может произойти никогда...

Выдержка из Google:

Браузер должен загрузить, разобрать и выполнить first.css до того, как обнаружится, что нужно загрузить ещё и second.css

Это означает, что с использованием @import вместо 200мс у браузера всегда уйдет 400мс для загрузки обоих файлов.

Вот типичный style.css дочерней темы:

/**
 * Theme Name: My Child Theme
 * Template: parent-theme
 */
@import url(../parent-theme/style.css);

/* CSS Стили дочерней темы */
.foo{
	// styles
}

@import! через php

Можно отказаться от использования @import через возможности файла functions.php и функцию wp_enqueue_style():

// Быстрее чем @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

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

1. Сначала подключается functions.php дочерней темы. В нем мы ставим в очередь style.css родительской темы.

2. Затем подключается functions.php родительской темы. В нем ставится в очередь style.css дочерней темы.

В результате, в HTML код страницы подключатся стили в нужном порядке:

<link rel='stylesheet' id='parent-theme-css'  href='http://example.com/wp-content/themes/parent-theme/style.css' type='text/css' />
<link rel='stylesheet' id='child-theme-css'  href='http://example.com/wp-content/themes/child-theme/style.css' type='text/css' />

Т.е. тут нет необходимости учитывать зависимость стилей дочерней темы от родительской — нужный порядок будет достигнут автоматически.

Готово!

Если файл стилей дочерней темы не подключится автоматически из родительской темы

Это значит что родительская тема написана не грамотно и стоит задумать о смене темы. Но если тему менять не вариант, то можно попробовать подключить стили дочерней темы в дочернем functions.php с учетом зависимости от родительских стилей.

Для этого нужно открыть файл functions.php родительской темы и найти там, где подключается файл стилей. Скорее всего тема подключает этот файл без учета дочерней темы, т.е. тема не поддерживает дочерние темы, т.е. не использует функцию get_stylesheet_uri(), а использует get_template_directory_uri(), примерно так:

wp_enqueue_style( 'mytheme-style', get_template_directory_uri() .'/style.css' );

Нам нужно указать ID mytheme-style в зависимости при подключении дочернего файла стилей. Получится что дочерний файл стилей будет зависеть от mytheme-style и будет подключен только после того, как подключится родительский - mytheme-style.

Таким образом, в файле functions.php дочерней темы нужно использовать след. код:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles(){
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', ['mytheme-style'] );
}

В результате в HTML подключатся стили в нужном порядке.

Зависимости от других файлов темы

Например, в родительской теме файл обнуления (сброса) стилей - normalize.css подключается отдельно, а он должен подключиться в самом начале, до остальных стилей. Эту зависимость нужно сохранить.

Допустим в functions.php родительской темы, мы имеем такой код:

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
function my_theme_scripts() {
	// сброс стилей, до основных стилей
	wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );

	// стили темы (дочерней или текущей)
	wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}

Теперь, если в дочерней мы подключим стили родительской темы:

// Быстрее чем @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

То в результате мы получим следующий порядок в HTML:

1. parent-style
2. normalize
3. child-style

А нужно:

1. normalize
2. parent-style
3. child-style

Исправить это можно указав зависимость при подключении parent-style в дочерней теме. Зависимость нужно указать от ID normalize. Т.е. в дочерней теме нам нужно подключить стили родительской темы:

// не так
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

// а так
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', ['normalize'] );

В результате сразу после normalize.css будут подключены стили родительской темы, а затем стили дочерней. То что нужно!

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