Teme: teme cu blocuri și teme clasice

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

Obiectiv de învățare: După această lecție veți putea explica diferența dintre temele cu blocuri și temele clasice și alege o temă în mod chibzuit.

Concepte-cheie: temă, ierarhia șabloanelor, temă cu blocuri, șablon (template), parte de șablon (template part), theme.json, Editor de site-uri, temă clasică, șabloane PHP, Personalizator (Customizer), piese (widgets), constructor de pagini, lock-in (dependență de furnizor), folder de temă

Ce face o temă

O temă determină cum arată site-ul dumneavoastră și cum sunt structurate paginile: antetul cu logo și meniu, lățimea conținutului, fonturile și culorile, subsolul, modul în care arată o listă de articole sau un rezultat de căutare. Conținutul în sine (textele, paginile, imaginile dumneavoastră) se află în baza de date și rămâne neschimbat la schimbarea temei.

Fiecare temă se află într-un folder propriu sub wp-content/themes/, de exemplu wp-content/themes/twentytwentyfive/. În acel folder se află întotdeauna un fișier style.css cu un antet în partea de sus care descrie tema (nume, versiune, autor). Veți regăsi acest lucru în lecția 5.2.

Începând cu WordPress 5.9 (începutul lui 2022), există două tipuri de teme, iar acestea funcționează cu adevărat diferit.

Teme clasice

O temă clasică este alcătuită din fișiere PHP: header.php, footer.php, single.php, page.php, index.php și așa mai departe. Care fișier este folosit pentru care pagină urmează ierarhia șabloanelor (lecția 1.2). Modificările se fac:

• în Personalizator (Customizer) (Aspect > Personalizator): logo, culori, opțiuni oferite de temă;
• cu piese (widgets) (Aspect > Piese): blocuri în bara laterală sau în subsol;
• cu meniuri (Aspect > Meniuri, lecția 4.3);
• în cod, cu o temă copil (child theme) (lecția 5.2).

Multe teme cunoscute sunt (încă) clasice sau hibride. Funcționează perfect și vor fi susținute încă mulți ani.

Teme cu blocuri

O temă cu blocuri este construită din aceleași blocuri ca și conținutul dumneavoastră. Tema conține:

• șabloane (templates) ca fișiere HTML cu blocuri, în folderul templates/: index.html, single.html, page.html, 404.html;
• părți de șablon (template parts) în parts/: header.html, footer.html;
• un fișier theme.json cu setările de stil: paletă de culori, fonturi, dimensiuni de font, lățimea conținutului, spațiul dintre blocuri.

Un mic fragment din theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Modificările se fac în Editorul de site-uri (Aspect > Editor): editați antetul, subsolul și șabloanele cu blocuri, iar la Stiluri alegeți culorile, fonturile și spațierea pentru întregul site.

O diferență importantă pe care trebuie să o cunoașteți: ce modificați în Editorul de site-uri este salvat în baza de date, nu în fișierele temei. O actualizare a temei nu vă suprascrie astfel modificările. Dar asta mai înseamnă și că un șablon modificat din baza de date are prioritate în fața șablonului din temă. Dacă autorul lansează un șablon îmbunătățit, nu îl veți vedea atâta timp cât versiunea dumneavoastră modificată există. În Editorul de site-uri puteți „restaura” un șablon la versiunea din temă.

Constructori de pagini

Un constructor de pagini (precum Elementor, Divi sau WPBakery) este un modul (plugin) sau o temă cu propriul editor în care trageți elemente și dați formă paginilor. Sunt populari deoarece oferă multe posibilități fără cod. Fiți conștient de dezavantaje:

• Lock-in (dependență de furnizor): formatarea este stocată într-un format propriu (adesea shortcode-uri sau date proprii în wp_postmeta). Dacă dezactivați constructorul, din paginile dumneavoastră rămâne adesea o învălmășeală de coduri. A trece la altceva înseamnă de obicei reconstruirea totul de la zero.
• Mai greu: multe constructoare încarcă scripturi și foi de stil suplimentare pe fiecare pagină. Acest lucru poate încetini site-ul dumneavoastră (modulul 6).
• Încă o componentă de întreținut, cu propriile actualizări și propriile vulnerabilități.

Un constructor de pagini nu este o alegere greșită, dar faceți-o în cunoștință de cauză. Pentru multe site-uri, ceea ce vă doriți se poate obține și cu o temă cu blocuri și cu patternuri (modele).

Cum alegeți o temă

La ce să fiți atent, în această ordine:

1. Proveniența: directorul de teme al wordpress.org (verificat de voluntari) sau un autor cunoscut cu propriul site. Niciodată o copie „gratuită” a unei teme plătite de pe un site de descărcări: aceasta conține adesea o ușă din spate (lecția 5.3).
2. Întreținerea: când a fost actualizată ultima dată tema? O temă fără actualizări în ultimul an devine un risc.
3. Bloc sau clasic: se potrivește cu modul în care doriți să lucrați? O temă cu blocuri dacă doriți să puteți face modificări în Editorul de site-uri, o temă clasică dacă doriți să continuați un site existent în același mod.
4. Ce aduce în plus: o temă care „poate orice” (slider, portofoliu, formular de contact, SEO) vă leagă funcționalitățile de temă. Dacă schimbați tema mai târziu, le pierdeți. Funcționalitățile aparțin modulelor (pluginurilor), aspectul vizual aparține temei.
5. Accesibilitate și viteză: în directorul de teme al wordpress.org puteți filtra după caracteristica „Accessibility-ready”. Verificați demo-ul temei în PageSpeed Insights (lecția 6.1).
6. Limba: este tema tradusă în limba română, sau puteți adapta singur textele?

Schimbarea temei

La schimbarea temei, conținutul dumneavoastră rămâne, dar tot ce este în jur se schimbă. Nu faceți niciodată asta direct pe site-ul dumneavoastră live:

• Încercați mai întâi noua temă cu Previzualizare live (la Aspect > Teme), sau mai bine într-un mediu de testare (staging) (lecția 8.3).
• Verificați apoi meniurile (lecția 4.3), piesele (widgets), logo-ul, pagina principală și tipurile de articole pe care le oferea tema veche (lecția 4.2).
• Shortcode-urile temei vechi apar ca text simplu ([slider id="3"]) pe paginile dumneavoastră.

Rezumat

• O temă determină aspectul vizual și structura; conținutul se află separat în baza de date.
• Temele clasice sunt șabloane PHP, modificate cu Personalizatorul, piesele (widgets) și meniurile.
• Temele cu blocuri sunt construite din blocuri și theme.json și sunt modificate în Editorul de site-uri; aceste modificări se află în baza de date.
• Constructorii de pagini oferă multe posibilități, dar vă leagă de ei și vă pot îngreuna site-ul.
• Alegeți o temă pe baza provenienței, întreținerii și simplității; funcționalitățile aparțin modulelor (pluginurilor), nu temei.

Test (quiz)

Exercițiu

Exercițiul A5.1: Ce temă folosește site-ul dumneavoastră? Căutați în codul sursă al paginii dumneavoastră principale (Ctrl+U) șirul /wp-content/themes/ și completați numele folderului de temă care apare cel mai des. Dacă folosiți o temă copil (child theme) (lecția 5.2), completați folderul temei copil și pe cel al temei părinte. Precizați de asemenea dacă este o temă cu blocuri sau o temă clasică și cum ați stabilit acest lucru. Programul citește pagina principală și fișierul style.css al temei menționate și face o comparație.

Lecturi suplimentare

Pentru lucrul în WordPress în sine nu avem încă articole proprii; documentația oficială a WordPress este cuprinzătoare.

• Ce este o temă? (developer.wordpress.org, în engleză): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Teme pe wordpress.org: https://wordpress.org/themes/
• Editor de site-uri (wordpress.org, în engleză): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, în engleză): https://developer.wordpress.org/themes/global-settings-and-styles/