Перейти до вмісту
Шаблони

Стилі дочірнього шаблону 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> взагалі, то підключення не виконується. Якщо він там є, але стилі не застосовуються — це проблема залежності/порядку. Ця одна перевірка підказує, яка з двох помилок у вас.

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

По-третє, напишіть підключення. Для поширеного випадку, коли батьківський шаблон уже завантажує власну таблицю стилів, ви не підключаєте батьківський повторно. Ви підключаєте лише дочірній, а handle батьківського вказуєте як залежність, щоб ваш завантажувався після нього:

<?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 уже роками не рекомендує так робити. Якщо ваш туторіал казав вам зробити саме це — то саме через цей туторіал ваші стилі глючать.

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

Не викликайте wp_enqueue_style на верхньому рівні functions.php. Він має виконуватися всередині функції, прикріпленої до хука wp_enqueue_scripts. Викликаний надто рано, він нічого не робить.

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

Одне застереження: усе це стосується класичних (з PHP-шаблонами) шаблонів. Якщо ваш батьківський шаблон — блоковий, стилізація здебільшого проходить через theme.json та Редактор сайту, і перевизначення в style.css поводяться інакше — я б довіряв цьому менше й перевіряв безпосередньо, а не припускав, що це підключення і є розвʼязанням.

Досі не виходить?

Переконайтеся, що рядок Template: у заголовку style.css дочірнього шаблону точно збігається з назвою теки батьківського шаблону, з урахуванням регістру — а не з відображуваною назвою батьківського шаблону. Потім знову перегляньте вихідний код: handle присутній, завантажується після батьківського, рядок запиту з версією піднятий. Якщо <link> на місці, завантажується останнім, а CSS усе одно не застосовується — це вже не проблема підключення, а специфічність, і виправлення переходить у самі правила.