Перейти к содержимому
Шаблоны

Стили дочерней темы WordPress не загружаются

Файл style.css вашей дочерней темы не загружается, потому что WordPress не подключает его автоматически. Таблицу стилей дочерней темы нужно зарегистрировать вручную в

Опубликовано

Файл style.css вашей дочерней темы не загружается, потому что WordPress не подключает его за вас. Таблицу стилей дочерней темы нужно регистрировать вручную в functions.php дочерней темы, и в этом подключении почти всегда одна из двух ошибок: его либо нет вообще, либо оно выполняется без указания родительской таблицы стилей в качестве зависимости, так что ваши правила попадают не туда в каскаде и перекрываются. Исправьте подключение — и стили вернутся. Старый трюк с @import, который вы наверняка скопировали из туториала 2013 года, — это неправильное решение.

Почему так происходит

Классическая дочерняя тема состоит из двух обязательных файлов: style.css с блоком заголовка, где указана родительская тема, и functions.php. Строка Template: в заголовке говорит WordPress, от какой родительской темы наследовать шаблоны. И это единственное, что WordPress делает автоматически. Он читает заголовок, настраивает откат к родительским шаблонам — и на этом останавливается. Он никогда не подключает ваш дочерний style.css на фронтенде.

Родительская тема, в свою очередь, подключает свою таблицу стилей из своего functions.php, привязанного к хуку wp_enqueue_scripts. Ваш дочерний functions.php выполняется первым, потом родительский, а затем срабатывает всё, что висит на этом хуке. Если ваша дочерняя тема ни разу не вызывает wp_enqueue_style для собственного файла, браузер его просто не запрашивает. Страница выглядит как голая родительская тема — потому что это она и есть.

Второй сбой тоньше. Вы подключаете дочернюю таблицу стилей, она загружается, но ваши переопределения ничего не делают. Это проблема порядка загрузки. Когда у двух правил одинаковая специфичность, побеждает то, что загрузилось последним. Если ваш дочерний CSS загружается раньше родительского, родительский выигрывает в каждой такой ничьей. Массив зависимостей в wp_enqueue_style — это как раз то, что задаёт порядок.

Ещё одно, в чём часто ошибаются: get_template_directory_uri() указывает на папку родительской темы, а get_stylesheet_directory_uri() — на папку активной (дочерней) темы. Перепутаете их — и подключите родительский style.css второй раз, а дочерний так и не тронете.

Исправление, по шагам

Сначала выясните, что на самом деле загружается. Откройте сломанную страницу, посмотрите исходный код и найдите имя папки вашей дочерней темы. WordPress выводит подключённые стили как <link id="handle-css" href="..."> — где id — это ваш дескриптор (handle) плюс -css. Если дочернего style.css нет в <head> вообще — подключение не выполняется. Если он есть, но стили не применяются — это проблема зависимости или порядка. Одна эта проверка сразу говорит, какая из двух ошибок у вас.

Затем найдите настоящий дескриптор родительской темы. Большинство современных тем (Astra, GeneratePress, темы серии Twenty-*) уже подключают свою таблицу стилей под конкретным дескриптором — astra-theme-css, generate-style-css, twenty-twenty-four-style и так далее. Вам нужна именно эта точная строка. Найдите её поиском (grep) в родительской теме или считайте из <link id="...-css"> в исходном коде (отбросив хвостовое -css).

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

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );

function child_enqueue_styles() {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'astra-theme-css' ), // <-- the parent's REAL handle
        wp_get_theme()->get( 'Version' )
    );
}

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

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );

function child_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_get_theme()->get( 'Version' )
    );
}

Аргумент wp_get_theme()->get('Version') — это ваш сброс кеша. Поднимите номер в строке Version: в заголовке дочернего style.css — и браузеры перезагрузят файл. Пропустите его — и будете править CSS и клясться, что ничего не меняется, хотя это всего лишь кеш.

Если в functions.php есть синтаксическая ошибка, весь файл молча падает и ни одно из ваших подключений не выполняется — а выглядит это ровно как «стили не загружаются». Включите WP_DEBUG или вставьте ваш debug.log в наш декодер логов ошибок WordPress, чтобы быстро найти фатальную ошибку.

Чего делать не стоит

Не используйте @import. Совет эпохи Codex состоял в том, чтобы поставить @import url("../parenttheme/style.css"); в начале дочернего style.css. Это работает, но медленно — браузер не может начать скачивать родительский CSS, пока не разберёт дочерний, так что оба запроса идут последовательно, а не параллельно. В собственном хендбуке WordPress уже много лет не рекомендуют так делать. Если ваш туториал велел вам сделать именно это — вот почему стили тормозят.

Не прописывайте жёстко дескриптор 'parent-style' и не подключайте родительский файл вслепую. Знаменитый сниппет из Codex делает именно это, и он неверен для любой темы, которая уже регистрирует свою таблицу стилей под другим дескриптором. В итоге вы загружаете родительский CSS дважды, а ваша зависимость указывает на дескриптор, которого может и не существовать.

Не вызывайте wp_enqueue_style на верхнем уровне functions.php. Он должен выполняться внутри функции, привязанной к хуку wp_enqueue_scripts. Вызванный слишком рано, он ничего не делает.

Не копируйте весь родительский functions.php в дочернюю тему. Оба файла загружаются; дочерний выполняется первым. Копирование приводит к повторному объявлению функций и фатальной ошибке.

Одна оговорка: всё это касается классических тем (на PHP-шаблонах). Если ваша родительская тема — блочная, оформление идёт в основном через theme.json и редактор сайта, а переопределения в style.css ведут себя иначе — этому я бы доверял меньше и проверял напрямую, а не считал, что это подключение и есть решение.

Всё ещё не получается?

Убедитесь, что строка Template: в заголовке дочернего style.css точно совпадает с именем папки родительской темы, с учётом регистра — а не с отображаемым названием родительской темы. Затем перепроверьте исходный код: дескриптор на месте, загружается после родительского, версия в query-строке поднята. Если <link> есть, загружается последним, а CSS всё равно не применяется — это уже не проблема подключения, а специфичность, и решение переходит в сами правила.