Импорт стилей дочерней темы через PHP

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

Почему @import неэффективен?

Когда браузер загружает стили, он должен сперва загрузить файл стилей дочерней темы, а затем файл стилей родительской темы. Например, если файл дочерней темы занимает 200 миллисекунд (мс) на загрузку, и файл родительской темы также занимает 200 мс, то в этом случае полная загрузка займет 400 мс. Это происходит потому, что браузер не может одновременно загрузить оба файла.

Пример typical style.css для дочерней темы:

/**
 * Theme Name: Моя Дочерняя Тема
 * Template: parent-theme
 */
@import url(../parent-theme/style.css);

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

Как импортировать стили быстрее с помощью 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 родительской темы, где добавляются стили дочерней темы.

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

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

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

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

Пример подключения стилей с учетом зависимостей

Если в functions.php родительской темы стиль подключается без учёта дочерней темы, вам необходимо протестировать это:

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

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

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() );
}

Если вы хотите подключить стили родительской темы в дочерней теме, используйте такой код:

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', ['normalize'] );

// Неправильный способ
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

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

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