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.