Crearea unei teme copil (child theme)

Modulul 5: Teme și module (pluginuri) · Timp de citire: 9 minute

Obiectiv de învățare: După această lecție veți putea crea o temă copil (child theme) și veți ști când aveți nevoie de una și când nu.

Concepte-cheie: temă copil (child theme), temă părinte, Template: în style.css, functions.php, wp_enqueue_style, suprascrierea unui șablon, theme.json într-o temă copil, Create Block Theme

Problema pe care o rezolvă o temă copil (child theme)

Să presupunem că doriți să modificați puțin antetul temei dumneavoastră clasice și, pentru asta, modificați fișierul header.php din folderul temei. Funcționează. Trei săptămâni mai târziu apare o actualizare a temei, pe care o lăsați să se instaleze automat (așa cum se procedează corect, lecția 7.2). Actualizarea înlocuiește toate fișierele temei, iar modificarea dumneavoastră dispare.

O temă copil (child theme) este o temă mică ce spune: „folosește tot ce are cealaltă temă (tema părinte), cu excepția a ceea ce am eu propriu.” Modificările dumneavoastră le puneți în tema copil. Tema părinte continuați să o actualizați normal, iar modificările dumneavoastră rămân neatinse.

Când aveți nevoie și când nu

Aveți nevoie de o temă copil dacă doriți să modificați sau să completați fișierele unei teme:

• doriți un șablon diferit (la o temă clasică un fișier PHP, la o temă cu blocuri un șablon HTML);
• doriți propriul CSS, prea extins pentru căsuța de CSS;
• doriți propriul cod PHP legat de aspectul grafic (un format suplimentar de imagine, o locație suplimentară de meniu).

Nu aveți nevoie de o temă copil dacă:

• modificați o temă cu blocuri în Editorul de site-uri: aceste modificări sunt salvate în baza de date și supraviețuiesc unei actualizări (lecția 5.1);
• adăugați doar puțin CSS prin CSS suplimentar (în Personalizator, la o temă clasică, sau la Stiluri în Editorul de site-uri);
• doriți să adăugați o funcție care nu are legătură cu aspectul grafic (un formular, o integrare). Aceasta se pune într-un modul (plugin), ca să supraviețuiască unei schimbări de temă.

O temă copil pentru o temă clasică

O temă copil este un folder în wp-content/themes/ cu cel puțin un fișier: style.css. Să presupunem că tema dumneavoastră părinte se află în wp-content/themes/hoofdthema/. Creați atunci un folder wp-content/themes/hoofdthema-child/ cu acest style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Personalizări proprii pentru example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* CSS-ul dvs. propriu apare mai jos. */
.site-header { border-bottom: 3px solid #e8a33d; }

Cel mai important rând este Template:. Acolo trebuie trecut numele folderului temei părinte (nu numele afișat în panoul de administrare). Dacă nu corespunde exact (litere mari/mici, cratime), WordPress va afișa la Aspect > Teme un mesaj că lipsește tema părinte.

Pe lângă aceasta, creați un fișier functions.php pentru a încărca foile de stil. Modul corect:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Dacă tema părinte își încarcă singură propria foaie de stil diferă de la o temă la alta. Consultați documentația temei dumneavoastră părinte; unele vă cer ca în tema copil să încărcați și foaia de stil a părintelui folosind get_template_directory_uri() . '/style.css'. Dacă site-ul dumneavoastră apare fără nicio formatare după activare, înseamnă că foaia de stil a părintelui nu este încărcată.

Dacă doriți să modificați un șablon, copiați acel fișier (de exemplu header.php) din tema părinte în tema copil și modificați copia. WordPress caută mai întâi în tema copil, apoi în tema părinte. Nu copiați toate fișierele: în acest caz nu veți mai beneficia de îmbunătățirile aduse de tema părinte.

functions.php al temei copil nu înlocuiește pe cel al temei părinte, ci este încărcat înainte de acesta. Ambele sunt executate.

O temă copil pentru o temă cu blocuri

La o temă cu blocuri funcționează la fel, cu fișiere de blocuri:

• style.css cu același antet și Template:;
• eventual un propriu fișier theme.json: acesta este combinat cu cel al temei părinte, deci introduceți doar ce doriți să modificați (de exemplu paleta de culori);
• eventual șabloane în templates/ și parts/ care le înlocuiesc pe cele ale temei părinte.

La o temă cu blocuri, un fișier functions.php adesea nu este necesar, deoarece WordPress încarcă singur stilurile din theme.json.

Există un modul (plugin) oficial, Create Block Theme, care creează pentru dumneavoastră, din Editorul de site-uri, o temă copil, inclusiv modificările dumneavoastră din baza de date. Util dacă ați modificat o temă cu blocuri și doriți să salvați acele modificări în fișiere (de exemplu pentru a le transfera pe o altă site).

Cum o instalați pe site-ul dumneavoastră

1. Creați folderul și fișierele pe propriul dumneavoastră calculator și verificați numele folderului temei părinte.
2. Încărcați folderul în wp-content/themes/ cu File Manager sau prin SFTP. Sau arhivați folderul ca zip și încărcați-l la Aspect > Teme > Temă nouă > Încarcă tema.
3. Mergeți la Aspect > Teme. Tema dumneavoastră copil apare în listă. Activați-o.
4. Verificați site-ul dumneavoastră: meniurile și widgeturile pot necesita reconectare la trecerea la o temă copil; setările din Personalizator se aplică per temă, deci trebuie reintroduse sau exportate cu un modul (plugin).
5. Tema părinte trebuie să rămână instalată. Nu o ștergeți; tema copil nu funcționează fără ea.

Faceți acest lucru mai întâi, de preferință, într-un mediu de testare (staging) (lecția 8.3), deoarece schimbarea temei pe o site live aglomerată poate provoca unele neplăceri temporare.

Rezumat

• O temă copil (child theme) păstrează modificările dumneavoastră la fișierele temei în afara temei părinte, astfel încât actualizările nu le suprascriu.
• Nu aveți nevoie de ea pentru modificări în Editorul de site-uri sau un pic de CSS suplimentar; funcțiile aparțin unui modul (plugin).
• Minim necesar: un folder cu style.css în care Template: indică exact folderul temei părinte.
• Copiați doar șabloanele pe care le modificați cu adevărat; functions.php al temei copil se adaugă lângă cel al temei părinte.
• Tema părinte rămâne instalată și continuă să fie actualizată.

Test (quiz)

Exercițiu

Exercițiu A5.2: Verificarea temei dumneavoastră copil. Creați o temă copil pentru tema dumneavoastră, pe site-ul dumneavoastră de test sau în mediul de testare (staging) (lecția 8.3), și activați-o. Completați adresa site-ului și numele folderului temei copil. Programul va solicita wp-content/themes/<folder>/style.css și va verifica: fișierul există, conține un Theme Name: și un Template:, fișierul style.css al temei părinte din acel folder există de asemenea, iar pagina principală face referire la tema copil (deci aceasta este activă).

Exercițiu D5.2: Ce ați modificat și de ce? Notați ce fișiere se află în tema dumneavoastră copil, ce ați modificat în fiecare fișier și de ce acest lucru nu era posibil în Editorul de site-uri, în CSS suplimentar sau într-un modul (plugin). Bifați faptul că tema părinte este încă instalată și are actualizări automate.

Lecturi suplimentare

Aceste articole descriu pașii în panourile WebOké; în alte panouri funcționează similar.

• Manual DirectAdmin 11.1: Deschiderea File Manager: directoarele din pachetul dumneavoastră
• Manual DirectAdmin 11.2: Încărcarea și descărcarea fișierelor
• Manual DirectAdmin 11.7: Conectarea cu FileZilla (FTP, FTPS și SFTP)
• Teme copil (child themes) (developer.wordpress.org, în engleză): https://developer.wordpress.org/themes/advanced-topics/child-themes/