Header e footer sono globali. Bene. Ma se ogni articolo, archivio e pagina di ricerca viene progettato a mano, il sito resta comunque un insieme di pezzi che prima o poi inizieranno a comportarsi diversamente.

Nella parte 8 costruiamo i template globali in Divi 5 con il Theme Builder. L’idea è progettare una volta la struttura e lasciare che WordPress inserisca automaticamente titolo, immagine, autore, data e contenuto corretto. Meno lavoro ripetuto, meno possibilità di dimenticare qualcosa.

Se stai ancora valutando il tema, puoi acquistare Divi dalla sezione della pagina. Se lo stai già usando, vai in Divi → Theme Builder.

Perché i template globali cambiano la gestione del sito

Un template decide come viene mostrato un tipo di contenuto. Puoi crearne uno per tutti gli articoli, uno per le categorie, uno per gli autori, uno per i risultati di ricerca e uno per la pagina 404. Il contenuto cambia; la struttura e lo stile restano coerenti.

Qui lavorano insieme tre sistemi. Le variabili di design conservano valori come colori e spaziature. I preset applicano quegli stessi valori ai moduli. Il contenuto dinamico recupera le informazioni reali da WordPress. Se separi bene questi livelli, cambiare il colore dei metadati o la spaziatura del titolo non richiede modifiche su cento articoli.

Crea un nuovo template, seleziona l’assegnazione “Tutti gli articoli” e aggiungi un corpo personalizzato. Prima di costruire qualsiasi cosa, assegna un nome chiaro al template e ai moduli principali. Tra sei mesi “Riga 12 copia 3” non ti dirà moltissimo.

Iniziamo dal template più importante.

Nella parte superiore inserisci il modulo Titolo del post o i moduli necessari a comporre titolo, immagine in evidenza e metadati. Usa contenuti dinamici: non scrivere un titolo finto dentro al template. Aggiungi poi il modulo Contenuto del post, che è il punto in cui WordPress mostrerà il corpo di ogni articolo.

Sotto puoi creare una sezione autore con immagine, nome e biografia dinamici. Prosegui con una sezione di articoli correlati e, quando utili, i commenti. Per la griglia degli articoli correlati puoi usare il Loop Builder; trovi un confronto utile fra Flexbox e Loop Builder nei layout avanzati.

Applica preset e variabili senza modificare manualmente ogni elemento. Poi prova il template con articoli reali: un titolo corto, uno lungo, un post senza immagine e uno con molte categorie. I contenuti dimostrativi tutti perfetti sono bravissimi a nascondere i problemi.

Creare template per archivi, autori e ricerca

Per una categoria usa un titolo dinamico dell’archivio e una griglia che recuperi soltanto i post appartenenti alla categoria corrente. Per l’archivio autore mostra nome, biografia e articoli associati. Nei risultati di ricerca, invece, il titolo deve riflettere la query e la griglia deve mostrare ciò che WordPress ha trovato.

Non serve che ogni template sia completamente diverso. Duplica una struttura coerente e cambia soltanto assegnazione e contenuto dinamico. Fai attenzione, però, alle condizioni: un template troppo generico può sovrascriverne uno più specifico. Controlla sempre inclusioni ed esclusioni nel Theme Builder.

Per le griglie, valuta se usare il modulo Blog o il Loop Builder. La guida su quando scegliere Grid o Flexbox in Divi 5 ti aiuta invece a decidere come organizzare il layout, soprattutto quando le card hanno contenuti di lunghezza variabile.

Resta una pagina che si tende a dimenticare.

La pagina 404 non deve limitarsi a dire che qualcosa è andato storto. Spiega cosa è successo con poche parole, aggiungi un collegamento alla homepage, una ricerca interna e magari una selezione di contenuti principali. Se il sito ha sezioni importanti, offrile come possibili destinazioni.

Crea un template assegnato alla pagina 404 e costruisci il corpo personalizzato. Evita menu paralleli o trenta pulsanti: chi è finito lì ha già perso il percorso. Il compito della pagina è restituirgli una direzione semplice.

Infine controlla ogni template su desktop, tablet e telefono con l’Editor Responsive. Esporta un backup del Theme Builder e annota le assegnazioni. Nella parte 9 useremo il sistema appena costruito per assemblare le pagine interne del sito senza ricominciare ogni volta dall’aspetto.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.