Progettazione di temi child di WordPress basati su blocchi con un singolo file JSON – WP Tavern
Tempo di lettura: 5 minuti

Dal momento in cui ho aperto il mio primo negozio di temi nel 2008 fino ai giorni nostri come qualcuno che semplicemente armeggiare, il mio piano è sempre stato quello di costruire un unico tema nello stampo di Giardino Zen CSS. Questo è stato un progetto che Dave Shea ha lanciato nei primi anni 2000 per mostrare come i designer potevano manipolare un sito solo tramite CSS. L’HTML rimarrebbe lo stesso, ma il design potrebbe essere qualsiasi cosa.

Ho raggiunto questo obiettivo più volte con diversi progetti. Tecnicamente, tutto ciò di cui avevo bisogno era markup architettonicamente valido in un tema WordPress e CSS personalizzato in un tema figlio.

Il concetto era semplice, ma nel tempo la mia visione è cambiata. Volevo creare qualcosa che rendesse ancora più semplice la progettazione di questi tipi di temi figlio. Pertanto, ho creato sistemi personalizzati per aggirare la mancanza di strumenti di WordPress nel regno del design dei temi. Non per vantarmi troppo, ma mi sembrava di aver creato dei metodi pratici. Hanno permesso ai designer di temi figlio di inserire valori nei file di configurazione, come nomi di famiglie di caratteri e codici colore. La maggior parte di questi potrebbe anche essere sovrascritta dagli utenti finali tramite il personalizzatore.

Nel 2018 ero già al lavoro su quello che sarebbe stato il mio magnum opus, il miglior tema WordPress che avessi mai creato. Avevo anche programmato che fosse l’ultimo. Era da un po’ che pensavo di uscire dal gioco. Ma questo era un progetto che dovevo portare a termine.

Quindi, il nuovo editor di blocchi ha fatto esplodere tutto. Ci avevo lavorato per mesi prima che venisse lanciato, ma sapevo che lo sviluppo del tema non sarebbe mai stato lo stesso. Il progetto Gutenberg continuerà a maturare e rimodellerà il futuro di WordPress.

Alla fine ho lanciato il mio tema. È stato uno dei primi prodotti commerciali a supportare il nuovo sistema di blocchi. Tuttavia, ero anche sgonfiato.

Erano i primi giorni dell’editor di blocchi. Nessuno sapeva davvero cosa avremmo guardato tra tre o più anni, ma se prestassi anche solo un minimo di attenzione, potevi vedere che il tema si sarebbe evoluto in qualcosa di molto diverso da quello che era in quel momento. Ho passato più di un anno a costruire un sistema di temi che sarebbe diventato irrilevante in breve tempo – scontato, pensavo che saremmo arrivati ​​a questa destinazione molto prima.

WordPress 5.9 verrà spedito i sottocomponenti finali di Full Site Editing. Ciò includerà il supporto per i temi dei blocchi sotto il cofano. Gli utenti che li installano possono personalizzarli tramite l’editor del sito e l’interfaccia degli stili globali.

Ciò che mi entusiasma di più è ancora la cosa che mi svegliava ogni mattina 13 anni fa: i temi dei bambini.

I temi figlio Block hanno parzialmente funzionato nel plugin Gutenberg per mesi. Tuttavia, la funzione che aspettavo con più ansia non era pronta fino a una settimana fa. Una nuova patch consente a un tema figlio di sovrascrivere singoli valori dei suoi genitori theme.json file. In sostanza, i due file vengono uniti, con il bambino che ha la precedenza.

Perché ero così entusiasta di questa funzione? Perché era lo stesso sistema che avevo costruito negli anni passati, ma migliore.

Dopo aver visto questa terra nella versione di sviluppo di Gutenberg, la prima cosa che ho fatto è stato caricare un tema personalizzato con cui mi sono dilettato. È un progetto che ho costruito per divertimento e per mia edificazione.

Visualizzazione post singolo del tema principale.

Quindi, ho creato un nuovo progetto nel mio editor di codice. ho aggiunto il necessario style.css file e inserito nei campi di intestazione appropriati. Non ne avrei bisogno oltre a quello. Il design del tema del mio bambino si baserebbe su un’altra caratteristica.

ho aggiunto un theme.json al livello radice del tema figlio e ho iniziato a divertirmi più di quanto mi fossi divertito con i temi da molto tempo.

Ho scelto un paio di colori autunnali e un divertente carattere di intestazione. In pochi minuti, ho avuto una nuova mano di vernice spruzzata sulla mia installazione di prova. Il design non era rivoluzionario o qualcosa del genere. Ero semplicemente stupito di quanto fosse facile trasformare il mio design inserendo alcuni valori.

Tema per bambini in stile autunnale di marroni e arance che mostra un singolo post.
Visualizzazione post singolo del tema figlio.

Questo è il tipo di tematizzazione infantile che ho sempre desiderato. Voglio il potere di cambiare gli elementi di design del mio tema per varie stagioni e festività. E voglio essere in grado di condividere questi temi figlio con gli altri.

Come ho detto, avevo già creato tali metodi di tematizzazione figlio (ho usato PHP invece di JSON). Tuttavia, questo è molto più potente perché si basa sul sistema di blocchi standard e non su qualcosa di personalizzato che solo una manciata di persone userebbe mai.

Alcuni di voi potrebbero chiedersi perché non ho apportato queste modifiche tramite l’editor del sito invece di creare un tema figlio. Rich Tabor ha posato, essenzialmente, la stessa domanda su Twitter prima di oggi. “Se un tema è costituito da JSON e modelli di blocco che possono essere entrambi modificati tramite Stili globali, allora a cosa servono i temi figlio?”

Diciamo che ho installato un tema a blocchi e ho apportato alcune modifiche al colore. Ora, fai finta di voler mescolare questo quando arriva il Natale: aggiungi alcuni colori e trova un carattere festivo per le vacanze. Quando apporterò queste modifiche, il mio vecchio design non sarà più presente al termine della stagione perché le personalizzazioni dell’utente vengono memorizzate in base al tema attivo. Potrei, ovviamente, prendere nota di tutte le mie vecchie impostazioni e modificarle tutte in un secondo momento. Tuttavia, farlo tramite un tema figlio significa che posso semplicemente cambiare tema in qualsiasi momento. Le mie vecchie impostazioni rimarrebbero intatte.

Forse questo è davvero un caso limite. Chi sta apportando cambiamenti stagionali al loro design in questi giorni, giusto?

La parte eccitante è che posso condividere temi figlio creati con un singolo file JSON con altri.

I temi per bambini sono stati una mia passione da quando la funzionalità è arrivata su WordPress. Per certi versi non è cambiato molto. I temi possono ancora sovrascrivere i modelli dal genitore. Possono continuare ad aggiungere CSS personalizzati se lo desiderano. Ma ora possono configurare qualsiasi parte del progetto da un singolo file standardizzato. È qualcosa per cui vale la pena rimettere il limite del mio sviluppatore e costruire un altro tema.

Vedo anche un futuro senza bambini che ha ancora gli stessi vantaggi della condivisione di elementi di design.

La directory dei pattern a blocchi fornisce già layout che dovrebbero funzionare con qualsiasi tema WordPress ben costruito. Tuttavia, ci sono altri componenti del design che potremmo rompere in futuro.

Immagino un futuro in cui WordPress potrebbe avere tavolozze di colori installabili come quella? Amanti del colore offerte. Basta sfogliare una directory, installare e modificare la combinazione di colori senza trovare un nuovo tema. Qualcosa di simile al recente Plugin Adrian potrebbe servire allo stesso scopo per i caratteri. Queste sono cose che la comunità potrebbe voler prendere in considerazione lungo la strada. Nessuna idea dovrebbe essere fuori discussione a questo punto.

Per ora, sono felice di avere a mia disposizione tutta la potenza del tema dei bambini. Il cambiamento dovrebbe arrivare a Gutenberg 11.8 questa settimana e WordPress 5.9 entro la fine dell’anno.



Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.