@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_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 стилів, які повинні підключитися до основних стилів.