Sari la conținut
Teme

Stilurile temei child din WordPress nu se încarcă

Fișierul style.css al temei child nu se încarcă pentru că WordPress nu îl adaugă în coadă în locul tău. Foaia de stil a temei child trebuie înregistrată manual în

Publicat

Fișierul style.css al temei tale child nu se încarcă pentru că WordPress nu îl adaugă în coadă (enqueue) în locul tău. Foaia de stil a temei child trebuie înregistrată manual în functions.php-ul temei child, iar acel enqueue are aproape întotdeauna una dintre două probleme: fie lipsește cu totul, fie se încarcă fără a declara foaia de stil a temei parinte ca dependență, așa că regulile tale ajung în locul greșit din cascadă și sunt suprascrise. Corectezi enqueue-ul și stilurile revin. Vechiul truc cu @import pe care probabil l-ai copiat dintr-un tutorial din 2013 este soluția greșită.

De ce se întâmplă

O temă child clasică înseamnă două fișiere obligatorii: un style.css cu un bloc de antet care numește tema parinte și un functions.php. Linia Template: din antet îi spune WordPress-ului de la ce temă parinte să moștenească șabloanele. Acesta este singurul lucru pe care WordPress îl face automat. Citește antetul, configurează fallback-ul de șabloane și se oprește. Nu adaugă niciodată în coadă fișierul style.css al temei child pe front-end.

Între timp, tema parinte adaugă în coadă propria foaie de stil din propriul functions.php, atașată la hook-ul wp_enqueue_scripts. functions.php-ul temei child rulează primul, apoi cel al temei parinte, apoi se declanșează tot ce e pe acel hook. Dacă tema ta child nu apelează niciodată wp_enqueue_style pentru propriul fișier, browserul nu îl solicită niciodată. Pagina arată ca tema parinte în stare brută, pentru că exact asta este.

Al doilea tip de eșec este mai subtil. Adaugi în coadă foaia de stil a temei child, aceasta se încarcă, dar suprascrierile tale nu fac nimic. Este o problemă de ordine de încărcare. Când două reguli au aceeași specificitate, câștigă cea care se încarcă ultima. Dacă CSS-ul temei child se încarcă înaintea celui al temei parinte, tema parinte câștigă la fiecare egalitate. Array-ul de dependențe din wp_enqueue_style este ceea ce forțează ordinea.

Încă un lucru pe care oamenii îl greșesc: get_template_directory_uri() indică folderul temei parinte, iar get_stylesheet_directory_uri() indică folderul temei active (child). Dacă le inversezi, adaugi în coadă style.css-ul temei parinte a doua oară și nu atingi niciodată pe cel al temei child.

Soluția, pas cu pas

Mai întâi, confirmă ce se încarcă de fapt. Deschide pagina defectă, vezi sursa (view source) și caută numele folderului temei tale child. WordPress randează stilurile adăugate în coadă ca <link id="handle-css" href="..."> — id-ul este handle-ul tău plus -css. Dacă style.css-ul temei child nu apare deloc în <head>, înseamnă că enqueue-ul nu rulează. Dacă apare, dar stilurile nu se aplică, este o problemă de dependență/ordine. Această singură verificare îți spune care dintre cele două probleme o ai.

Al doilea, găsește handle-ul real al temei parinte. Majoritatea temelor moderne (Astra, GeneratePress, temele Twenty-*) își adaugă deja propria foaie de stil în coadă sub un handle specific — astra-theme-css, generate-style-css, twenty-twenty-four-style și așa mai departe. Ai nevoie de acel șir exact. Fă grep în tema parinte sau citește-l din <link id="...-css"> din view source (elimină -css-ul de la final).

Al treilea, scrie enqueue-ul. Pentru cazul obișnuit în care tema parinte își încarcă deja propria foaie de stil, nu re-adaugi în coadă tema parinte. Adaugi doar tema child și listezi handle-ul temei parinte ca dependență, astfel încât a ta să se încarce după el:

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

Dacă tema parinte nu își adaugă propria foaie de stil în coadă (unele teme mai vechi sau minimaliste se bazează pe @import), atunci adaugă-le pe amândouă în coadă și fă ca tema child să depindă de tema parinte:

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

Argumentul wp_get_theme()->get('Version') este mecanismul tău de invalidare a cache-ului (cache-buster). Incrementezi linia Version: din antetul style.css-ului temei child și browserele reîncarcă fișierul. Dacă îl omiți, vei edita CSS și vei jura că nu se schimbă nimic, când de fapt e doar din cache.

Dacă functions.php are o eroare de sintaxă, întregul fișier moare în tăcere și niciunul dintre enqueue-urile tale nu rulează — iar asta arată exact ca „stilurile nu se încarcă”. Activează WP_DEBUG sau lipește debug.log-ul în decodorul nostru de jurnale de erori WordPress pentru a depista rapid eroarea fatală.

Ce să nu faci

Nu folosi @import. Sfatul din era Codex era să pui @import url("../parenttheme/style.css"); în partea de sus a style.css-ului temei child. Funcționează, dar este lent — browserul nu poate începe să descarce CSS-ul temei parinte până nu a parsat CSS-ul temei child, așa că cele două cereri rulează în serie în loc de paralel. Chiar manualul oficial WordPress recomandă de ani de zile să nu faci asta. Dacă tutorialul tău ți-a spus să faci asta, acel tutorial este motivul pentru care stilurile tale sunt problematice.

Nu codifica manual handle-ul 'parent-style' și nu adăuga în coadă fișierul temei parinte orbește. Faimosul snippet din Codex face exact asta și este greșit pentru orice temă care își înregistrează deja foaia de stil sub un handle diferit. Ajungi să încarci CSS-ul temei parinte de două ori, iar dependența ta indică un handle care s-ar putea să nu existe.

Nu apela wp_enqueue_style la nivelul superior al fișierului functions.php. Trebuie să ruleze în interiorul unei funcții atașate la wp_enqueue_scripts. Apelat prea devreme, nu face nimic.

Nu copia întregul functions.php al temei parinte în tema child. Ambele se încarcă; cel al temei child rulează primul. Copierea provoacă declarații de funcții duplicate și o eroare fatală.

O precizare: toate acestea se referă la teme clasice (bazate pe șabloane PHP). Dacă tema ta parinte este o temă bloc (block theme), stilizarea circulă în principal prin theme.json și prin editorul de site (Site Editor), iar suprascrierile din style.css se comportă diferit — aici aș avea mai puțină încredere și aș testa direct, în loc să presupun că acest enqueue este soluția.

Tot blocat?

Confirmă că linia Template: din antetul style.css-ului temei child se potrivește exact cu numele folderului temei parinte, cu majuscule/minuscule respectate — nu cu numele afișat al temei parinte. Apoi reverifică sursa (view source): handle-ul prezent, încărcat după tema parinte, șirul de versiune din query incrementat. Dacă <link>-ul este acolo, se încarcă ultimul și CSS-ul tot nu se aplică, atunci nu mai este o problemă de enqueue — este specificitate, iar soluția se mută în regulile propriu-zise.

FAQ

Întrebări

De ce nu se încarcă style.css al temei copil WordPress?

WordPress nu pune niciodată în coadă style.css al unei teme copil în locul tău. Citește linia Template: din antet, configurează mecanismul de rezervă pentru șabloane și se oprește acolo. Foaia de stil trebuie înregistrată de tine, apelând wp_enqueue_style într-o funcție agățată de wp_enqueue_scripts în functions.php al temei copil.

De ce îmi suprascrie tema părinte CSS-ul temei copil?

Foaia ta copil se încarcă înaintea celei părinte, deci tema părinte câștigă orice egalitate între reguli cu aceeași specificitate. Transmite identificatorul real al temei părinte în tabloul de dependențe al funcției wp_enqueue_style, ca fișierul copil să se încarce ultimul. Verifică întâi în sursa paginii că foaia copil chiar apare în head.

Cum aflu identificatorul foii de stil a temei părinte?

Citește-l din sursa paginii. WordPress redă stilurile puse în coadă ca etichetă link cu id=„identificator-css”, deci ia acel id și taie sufixul -css. Poți și să cauți cu grep prin fișierele temei părinte. Exemple frecvente sunt astra-theme-css, generate-style-css și twenty-twenty-four-style.

Mai trebuie să folosesc @import în style.css al unei teme copil?

Nu. Funcționează, dar este lent: browserul nu poate începe descărcarea CSS-ului părinte până nu a analizat CSS-ul copil, deci cele două cereri merg în serie în loc de paralel. Manualul oficial WordPress îl descurajează de ani buni. Pune în coadă tema copil cu o dependență în schimb.

Care este diferența dintre get_template_directory_uri și get_stylesheet_directory_uri?

get_template_directory_uri() indică folderul temei părinte, iar get_stylesheet_directory_uri() indică folderul temei copil active. Dacă le inversezi, pui în coadă style.css al părintelui a doua oară fără să încarci vreodată pe cel copil, ceea ce arată exact ca o temă copil ale cărei stiluri nu funcționează.