Style szablonu potomnego w WordPressie się nie ładują

Twój plik style.css szablonu potomnego się nie ładuje, bo WordPress nie kolejkuje go za Ciebie. Arkusz stylów szablonu potomnego trzeba zarejestrować ręcznie w pliku functions.php tego szablonu, a w tym kolejkowaniu prawie zawsze siedzi jeden z dwóch błędów: albo go w ogóle nie ma, albo ładuje się bez zadeklarowania arkusza rodzica jako zależności, przez co Twoje reguły trafiają w złe miejsce w kaskadzie i zostają nadpisane. Napraw kolejkowanie, a style wrócą. Stara sztuczka z @import, którą pewnie skopiowałeś z poradnika z 2013 roku, to niewłaściwe rozwiązanie.

Dlaczego tak się dzieje

Klasyczny szablon potomny to dwa wymagane pliki: style.css z blokiem nagłówka wskazującym rodzica oraz functions.php. Linia Template: w nagłówku mówi WordPressowi, z którego rodzica ma dziedziczyć szablony. To jedyna rzecz, którą WordPress robi automatycznie. Czyta nagłówek, ustawia mechanizm dziedziczenia szablonów i na tym kończy. Nigdy nie kolejkuje Twojego potomnego style.css na froncie strony.

Szablon nadrzędny tymczasem kolejkuje swój arkusz stylów ze swojego functions.php, podpięty pod wp_enqueue_scripts. Twój potomny functions.php uruchamia się pierwszy, potem rodzica, a potem odpala wszystko z tego haka. Jeśli Twój szablon potomny nigdy nie wywoła wp_enqueue_style dla własnego pliku, przeglądarka nigdy o niego nie zapyta. Strona wygląda jak surowy szablon nadrzędny, bo dokładnie nim jest.

Drugi błąd jest subtelniejszy. Kolejkujesz arkusz potomny, ładuje się, ale Twoje nadpisania nic nie robią. To problem z kolejnością ładowania. Gdy dwie reguły mają równą specyficzność, wygrywa ta, która ładuje się ostatnia. Jeśli Twój potomny CSS ładuje się przed arkuszem rodzica, rodzic wygrywa każdy remis. To tablica zależności w wp_enqueue_style wymusza kolejność.

Jeszcze jedna rzecz, którą ludzie mylą: get_template_directory_uri() wskazuje na folder szablonu nadrzędnego, a get_stylesheet_directory_uri() wskazuje na folder szablonu aktywnego (potomnego). Zamień je miejscami, a zakolejkujesz style.css rodzica po raz drugi i nigdy nie tkniesz potomnego.

Naprawa, krok po kroku

Najpierw sprawdź, co faktycznie się ładuje. Otwórz zepsutą stronę, wyświetl źródło i wyszukaj nazwę folderu swojego szablonu potomnego. WordPress renderuje zakolejkowane style jako <link id="handle-css" href="..."> — id to Twój uchwyt plus -css. Jeśli Twojego potomnego style.css w ogóle nie ma w <head>, kolejkowanie się nie uruchamia. Jeśli jest, ale style nie są stosowane, to problem z zależnością lub kolejnością. To jedno sprawdzenie mówi Ci, który z dwóch błędów masz.

Po drugie, znajdź prawdziwy uchwyt rodzica. Większość nowoczesnych szablonów (Astra, GeneratePress, szablony Twenty-*) już kolejkuje własny arkusz stylów pod konkretnym uchwytem — astra-theme-css, generate-style-css, twenty-twenty-four-style i tak dalej. Potrzebujesz dokładnie tego ciągu znaków. Przeszukaj (grep) szablon nadrzędny albo odczytaj go z <link id="...-css"> w źródle strony (odrzuć końcówkę -css).

Po trzecie, napisz kolejkowanie. W typowym przypadku, gdy rodzic już ładuje swój własny arkusz stylów, nie kolejkujesz rodzica ponownie. Kolejkujesz tylko potomny i wskazujesz uchwyt rodzica jako zależność, żeby Twój ładował się po nim:

<?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' )
    );
}

Jeśli szablon nadrzędny nie kolejkuje własnego arkusza stylów (niektóre starsze lub minimalistyczne szablony polegają na @import), to zakolejkuj oba i spraw, by potomny zależał od rodzica:

<?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' )
    );
}

Argument wp_get_theme()->get('Version') to Twój sposób na obejście cache. Podbij linię Version: w nagłówku potomnego style.css, a przeglądarki pobiorą plik na nowo. Pomiń to, a będziesz edytować CSS i kląć, że nic się nie zmienia, podczas gdy to po prostu cache.

Jeśli w functions.php jest błąd składni, cały plik po cichu umiera i żadne z Twoich kolejkowań się nie uruchamia — a to wygląda dokładnie jak “style się nie ładują”. Włącz WP_DEBUG albo wklej swój debug.log do naszego dekodera logów błędów WordPressa, żeby szybko namierzyć błąd krytyczny.

Czego nie robić

Nie używaj @import. Rada z czasów Codexa mówiła, żeby wstawić @import url("../parenttheme/style.css"); na górze potomnego style.css. Działa, ale jest wolne — przeglądarka nie może zacząć pobierać CSS rodzica, dopóki nie sparsuje CSS potomnego, więc oba żądania idą szeregowo zamiast równolegle. Oficjalny podręcznik WordPressa od lat to odradza. Jeśli Twój poradnik kazał Ci tak zrobić, to właśnie przez ten poradnik Twoje style są rozjechane.

Nie wpisuj na sztywno uchwytu 'parent-style' i nie kolejkuj pliku rodzica w ciemno. Słynny snippet z Codexa robi dokładnie to i jest błędny dla każdego szablonu, który już rejestruje swój arkusz stylów pod innym uchwytem. Kończysz z podwójnym ładowaniem CSS rodzica, a Twoja zależność wskazuje na uchwyt, który może w ogóle nie istnieć.

Nie wywołuj wp_enqueue_style na najwyższym poziomie functions.php. Musi to działać wewnątrz funkcji podpiętej pod wp_enqueue_scripts. Wywołane za wcześnie, nic nie robi.

Nie kopiuj całego functions.php rodzica do szablonu potomnego. Oba się ładują; potomny uruchamia się pierwszy. Skopiowanie go powoduje zduplikowane deklaracje funkcji i błąd krytyczny.

Jedno zastrzeżenie: to wszystko dotyczy szablonów klasycznych (opartych na szablonach PHP). Jeśli Twój rodzic to szablon blokowy, stylowanie płynie głównie przez theme.json i Edytor Witryny, a nadpisania w style.css zachowują się inaczej — temu ufałbym mniej i testowałbym bezpośrednio, zamiast zakładać, że to kolejkowanie jest rozwiązaniem.

Wciąż nie działa?

Upewnij się, że linia Template: w nagłówku potomnego style.css dokładnie odpowiada nazwie folderu rodzica, z rozróżnieniem wielkości liter — a nie nazwie wyświetlanej rodzica. Potem ponownie sprawdź źródło strony: uchwyt obecny, ładuje się po rodzicu, parametr wersji w zapytaniu podbity. Jeśli <link> tam jest, ładuje się ostatni, a CSS nadal nie działa, to już nie jest problem z kolejkowaniem — to specyficzność, a naprawa przenosi się w same reguły.