Temi: temi a blocchi e temi classici

Modulo 5: Temi e plugin · Tempo di lettura: 9 minuti

Obiettivo della lezione: Dopo questa lezione saprà spiegare la differenza tra temi a blocchi e temi classici e scegliere un tema in modo consapevole.

Concetti chiave: tema, gerarchia dei template, tema a blocchi, template, template part, theme.json, Editor del sito, tema classico, template PHP, Personalizza, widget, costruttore di pagine, lock-in, cartella del tema

Cosa fa un tema

Un tema determina l'aspetto del Suo sito e la struttura delle pagine: l'intestazione con logo e menu, la larghezza del contenuto, i caratteri e i colori, il piè di pagina, l'aspetto di un elenco di articoli o di un risultato di ricerca. Il contenuto stesso (i Suoi testi, pagine, immagini) si trova nel database e rimane invariato quando si cambia tema.

Ogni tema si trova in una cartella propria sotto wp-content/themes/, ad esempio wp-content/themes/twentytwentyfive/. In quella cartella è sempre presente un file style.css con un'intestazione in cima che descrive il tema (nome, versione, autore). Lo rivedrà nella lezione 5.2.

Dalla versione 5.9 di WordPress (inizio 2022) esistono due tipi di temi, e funzionano in modo davvero diverso.

Temi classici

Un tema classico è composto da file PHP: header.php, footer.php, single.php, page.php, index.php, e così via. Quale file viene utilizzato per quale pagina segue la gerarchia dei template (lezione 1.2). Le modifiche si effettuano:

• in Personalizza (Aspetto > Personalizza): logo, colori, opzioni offerte dal tema;
• con i widget (Aspetto > Widget): blocchi nella barra laterale o nel piè di pagina;
• con i menu (Aspetto > Menu, lezione 4.3);
• nel codice, con un tema child (lezione 5.2).

Molti temi conosciuti sono (ancora) classici o ibridi. Funzionano bene e saranno supportati ancora per anni.

Temi a blocchi

Un tema a blocchi è costruito con gli stessi blocchi utilizzati per il contenuto. Il tema è composto da:

• template (templates) come file HTML con blocchi, nella cartella templates/: index.html, single.html, page.html, 404.html;
• template part in parts/: header.html, footer.html;
• un file theme.json con le impostazioni di stile: tavolozza colori, caratteri, dimensioni dei caratteri, larghezza del contenuto, spaziatura tra i blocchi.

Un piccolo estratto di theme.json:

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

Le modifiche si effettuano nell'Editor del sito (Aspetto > Editor): modifica l'intestazione, il piè di pagina e i template con i blocchi, e in Stili sceglie colori, caratteri e spaziatura per l'intero sito.

Una differenza importante da conoscere: ciò che modifica nell'Editor del sito viene salvato nel database, non nei file del tema. Un aggiornamento del tema quindi non sovrascrive le Sue modifiche. Ma significa anche che un template modificato nel database ha priorità sul template del tema. Se l'autore rilascia un template migliorato, non lo vedrà finché esiste la Sua versione modificata. Nell'Editor del sito può "ripristinare" un template alla versione del tema.

Costruttori di pagine

Un costruttore di pagine (come Elementor, Divi o WPBakery) è un plugin o un tema con un proprio editor in cui si trascinano e si formattano le pagine. Sono popolari perché offrono molte possibilità senza scrivere codice. Sia consapevole degli svantaggi:

• Lock-in: la formattazione è salvata in un formato proprio (spesso shortcode o dati propri in wp_postmeta). Se disattiva il costruttore, delle Sue pagine rimane spesso un groviglio di codici. Cambiare significa quasi sempre ricostruire tutto da capo.
• Più pesante: molti costruttori caricano script e fogli di stile aggiuntivi su ogni pagina. Questo può rallentare il Suo sito (modulo 6).
• Un altro componente da tenere aggiornato, con aggiornamenti e vulnerabilità proprie.

Un costruttore di pagine non è una scelta sbagliata, ma la faccia in modo consapevole. Per molti siti, ciò che desidera può essere ottenuto anche con un tema a blocchi e dei pattern.

Come scegliere un tema

Cosa valutare, in quest'ordine:

1. Provenienza: la directory dei temi di wordpress.org (controllata da volontari) oppure un autore noto con un proprio sito. Mai una copia "gratuita" di un tema a pagamento da un sito di download: contiene spesso una backdoor (lezione 5.3).
2. Manutenzione: quando è stato aggiornato l'ultima volta il tema? Un tema senza aggiornamenti nell'ultimo anno diventa un rischio.
3. A blocchi o classico: si adatta al Suo modo di lavorare? Un tema a blocchi se desidera poter modificare tramite l'Editor del sito, un tema classico se vuole continuare un sito esistente nello stesso modo.
4. Cosa include: un tema che "fa tutto" (slider, portfolio, modulo di contatto, SEO) lega le funzioni al tema. Se in seguito cambia tema, le perde. Le funzioni appartengono ai plugin, la veste grafica al tema.
5. Accessibilità e velocità: nella directory dei temi di wordpress.org può filtrare in base alla caratteristica "Accessibility ready". Verifichi la demo del tema in PageSpeed Insights (lezione 6.1).
6. Lingua: il tema è tradotto nella Sua lingua, oppure può modificare i testi personalmente?

Cambiare tema

Cambiando tema il contenuto rimane invariato, ma tutto ciò che lo circonda cambia. Non lo faccia mai direttamente sul sito in produzione:

• Provi prima il nuovo tema con l'Anteprima in tempo reale (in Aspetto > Temi), o meglio ancora in un ambiente di staging (lezione 8.3).
• Controlli poi i menu (lezione 4.3), i widget, il logo, la homepage e i tipi di contenuto che forniva il vecchio tema (lezione 4.2).
• Gli shortcode del vecchio tema appariranno come testo isolato ([slider id="3"]) sulle Sue pagine.

Riepilogo

• Un tema determina la veste grafica e la struttura; il contenuto è indipendente e si trova nel database.
• I temi classici sono template PHP, personalizzabili con Personalizza, widget e menu.
• I temi a blocchi sono costruiti con blocchi e theme.json, e si personalizzano nell'Editor del sito; quelle modifiche si trovano nel database.
• I costruttori di pagine offrono molto, ma la vincolano e possono appesantire il Suo sito.
• Scelga un tema in base alla provenienza, alla manutenzione e alla semplicità; le funzioni appartengono ai plugin, non al tema.

Quiz

Esercizio

Esercizio A5.1: Quale tema utilizza il Suo sito? Cerchi nel codice sorgente della Sua homepage (Ctrl+U) la stringa /wp-content/themes/ e inserisca il nome della cartella del tema che compare più spesso. Se utilizza un tema child (lezione 5.2), inserisca la cartella del tema child e quella del tema parent. Indichi anche se si tratta di un tema a blocchi o di un tema classico, e come lo ha accertato. Il programma legge la homepage e il file style.css del tema indicato e confronta.

Per saperne di più

Per il lavoro all'interno di WordPress stesso non abbiamo ancora articoli nostri; la documentazione ufficiale di WordPress è comunque molto ampia.

• Cos'è un tema? (developer.wordpress.org, in inglese): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Temi su wordpress.org: https://wordpress.org/themes/
• Editor del sito (wordpress.org, in inglese): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, in inglese): https://developer.wordpress.org/themes/global-settings-and-styles/