Creazione di temi a blocchi di WordPress e modifica dello stack completo

Se ultimamente hai seguito i forum e le notizie di WordPress, hai sicuramente sentito parlare di full-site editing (FSE), o almeno visto riferimenti ad esso, come la creazione di temi a blocchi. Anche se non sei a conoscenza di cosa sia, probabilmente ne hai sentito parlare e forse ti sei anche chiesto cosa potrebbe comportare per te.

Che tu usi WordPress frequentemente o sia uno sviluppatore, ci sono ottime notizie per te. Il vero kicker è che non dovresti averne paura e che tutto funzionerà bene per te, facilitandoti il ​​processo.

Su quali basi lo affermiamo? Il primo viene prima. Per prima cosa comprendiamo un po' la modifica completa del sito di WordPress prima di immergerci nell'apprendimento di ciò che abbiamo trattato nel titolo.

WordPress Full-Site Editing (FSE) è...?

In sostanza, la modifica dell'intero sito evita l'idea di blocchi. In precedenza, i blocchi potevano essere utilizzati per modificare l'area dei contenuti del sito web. Ogni sezione del tuo sito verrà ora considerata un blocco quando utilizzi la modifica dell'intero sito.

Gli utenti possono ora interagire sia con la pagina che con gli elementi globali su un'unica piattaforma grazie a questo significativo miglioramento. Inoltre, ha aggiunto nuovi file di configurazione del tema e strumenti di sviluppo.

Dopo aver aggiornato WordPress all'ultima versione, devi abilitare un tema FSE, come Twenty Twenty-Two. Successivamente, puoi utilizzare solo i blocchi Gutenberg per creare un intero sito Web.

In che modo FSE può aiutarti?

Costruire e sviluppare un sito Web WordPress ora è più facile che mai, grazie alla modifica completa del sito. Gli elementi globali e gli eventuali aggiornamenti di pagina possono essere entrambi effettuati utilizzando lo stesso editor.

E gli elementi globali, cosa sono? Una volta allocati, gli elementi globali, i contenitori e le colonne possono essere utilizzati nell'intero sito web.

Questa tecnica innovativa consente di modificare la pagina Web o qualsiasi pagina specifica, risparmiando tempo. Non è necessario passare da un editor all'altro per scoprire cosa sta succedendo perché puoi vederli tutti in tempo reale durante la modifica. Il risultato? Il design del tuo sito web migliora man mano che operi contemporaneamente sulla pagina e sui livelli globali.

La versione 6.0 di WordPress non ha FSE abilitato per impostazione predefinita. Pertanto, per utilizzare la funzionalità di modifica dell'intero sito durante l'utilizzo di un'edizione di WordPress precedente alla 6.0, è necessario prima aggiornare WordPress prima di attivare un tema FSE. La dashboard del tuo sito è il luogo in cui gestisci tutto ciò.

L'ambiente WordPress si sta evolvendo ancora una volta

Questo tipo di cambiamento in WordPress si è verificato nel periodo precedente. Conoscevamo tutti Gutenberg circa tre anni fa (è difficile da ricordare perché uno, se non di più, di questi ultimi anni è improvvisamente scomparso). Ora puoi fare riferimento ad esso come editor di blocchi.

Tuttavia, quando è stato inizialmente incorporato nel core di WordPress, gli è stato assegnato il nome in codice Gutenberg. Il cambiamento è difficile. Pertanto, la maggior parte delle persone ha reagito con un po' di freakout. Bene, quasi tutti. Gutenberg oggi, pochi anni dopo, è percepito come ragionevolmente utile, spesso piacevole da usare e in continuo sviluppo. Per questo motivo, siamo fiduciosi che questo cambiamento avrà successo. Ma il cambiamento è più significativo di prima.

Focus Shift: dagli utenti ai costruttori

Quando un tale editor di blocchi è stato introdotto per la prima volta, gli sviluppatori hanno cambiato il modo in cui producevano il materiale. Per coloro che stavano producendo post di blog, non è stato così dirompente come sarebbe stato per coloro che stavano creando siti Web e sviluppando pagine Web. Il passaggio ai blocchi è stato vantaggioso per gli utenti e sono seguite molte interessanti funzionalità, come la possibilità di definire un blocco di materiale e quindi posizionarlo dinamicamente ovunque (e ovunque) sul sito. Chiunque e tutti ora possono farlo senza utilizzare alcun codice.

Ma questo cambiamento è un po' distinto. Non è semplicemente il modo in cui modifichi il tuo sito che è cambiato con la modifica completa del sito. Ha a che fare con la struttura fondamentale del tuo sito web. Non solo l'intestazione o il piè di pagina sono definiti qui. Riguarda le componenti di un tema. In altre parole, FSE alla fine andrà a beneficio degli utenti, ma per ora sembra più un'enfasi sul miglioramento delle cose per i costruttori, sia coloro che creano pagine Web che coloro che creano temi.

Sia che stiate utilizzando i page builder, ovvero completando il progetto di lanciare un sito con una piattaforma di facile utilizzo tra i migliori website builder in abbonamento o realizzandoli, molti di voi si sono abituati a questa fase della vita. Le tue pagine possono essere progettate come preferisci. Ma più tardi, diventi consapevole dei problemi di prestazioni. Google ha ridotto le tue classifiche e ha affermato che il tuo DOM era troppo massiccio (qualunque cosa fosse). Poiché siamo tutti consapevoli che le prestazioni sono fondamentali, ora è il momento perfetto per saperne di più su FSE e su come può alterare i siti Web che crei.

Allora perché è importante creare un tema per il sito completo?

Beaver Builder è venuto prima di Elementor, ricordi? Molti di voi l'hanno utilizzato da soli o nelle aziende in cui hanno lavorato per creare siti Web sostanziali per clienti aziendali. Tuttavia, hanno richiesto un altro prodotto, Beaver Themer. In caso contrario, dovevi fornire loro assistenza con un tema che supportasse intestazioni e piè di pagina personalizzati (e dinamici) quando avevano bisogno di modificare l'intestazione e il piè di pagina di pagine Web (o post).

È stato emozionante quando temi come Blocksy, Kadence e Astra hanno iniziato a sviluppare quelle funzionalità. Ma ha anche portato a qualche blocco. E riconosci cosa succede dopo: dopo che un cliente ha installato un plug-in sul proprio sito Web, scopre che non è compatibile con il tema o il generatore di pagine.

All'improvviso, tutti puntano il dito. Le aziende a tema affermano che non sono loro. Secondo i costruttori di pagine, non sono nemmeno loro. Indovina un po? I nuovi giocatori nel gioco, le società di hosting, affermano che non sono loro. Alla fine sono stati incolpati i costruttori (appaltatori e agenzie) che inizialmente hanno costruito il sito.

La stessa cosa è successa quando gli utenti hanno iniziato a lamentarsi della lentezza con cui queste pagine venivano caricate, grazie al codice che quegli stessi page builder avevano generato. Agenzie e liberi professionisti hanno ricevuto critiche.

Soluzione

Questa modifica ai temi di blocco, che supportano la personalizzazione completa del sito, rappresenta un cambiamento fondamentale nel modo in cui vengono creati i siti Web. Con questa modifica, ogni elemento della pagina e in tutto il sito Web è un blocco: contenuto, menu, barre laterali, intestazioni e piè di pagina. Ogni blocco. I temi possono quindi essere più leggeri di conseguenza.

Il tema deve ancora completare alcune attività, come unificare lo stile universale per i blocchi nell'intero sito o correggere errori tipografici. Gli sviluppatori possono configurarlo tutto nel nuovo file themes.json. Ma non viene utilizzato solo per stabilire i parametri. È anche un modo per uno sviluppatore di modificare il modo in cui un cliente utilizza l'editor.

Inoltre, non ci sono molti elementi dell'interfaccia utente nei temi. È facile immaginare che la prossima iterazione di ciò a cui sei abituato, utilizzando il builder personalizzato, sarà guidata dal configuratore JSON così com'è oggi.

In poche parole, questa è la futura generazione di temi e i mezzi attraverso i quali alla fine sarai in grado di limitare ciò che gli utenti possono realizzare con tali nuovi temi.

Come dare un senso logico a tutto ciò?

Anche se sembra eccitante, la difficoltà maggiore sta nel determinare come risolverai tutto questo. Nessuno vuole sviluppare un nuovo concetto che si riveli abbastanza semplice. Nessuno vuole sviluppare un tema nuovo di zecca che irriti gli utenti.

Vuoi il comfort del 'provato e vero con la forza del 'nuovo'. E ci sono più domande che soluzioni...

Stai guardando un corso per sviluppatori per l'integrazione e la creazione di temi a blocchi

Immagina di seguire un corso che spiegasse tutto ciò che dovevi capire in dettaglio sulla creazione di temi a blocchi e FSE. Ci riferiamo ai seguenti 14 articoli, oltre ad altri:

• Scopri la modifica dell'intero sito per vedere come influisce sullo sviluppo del tema.
• Crea il modello di indice essenziale, quindi utilizza i blocchi per recuperare i post dal database.
• Senza codificare una singola riga, implementa un intero modello di home blog.
• È necessario aggiungere intestazioni e piè di pagina per il tema.
• Scopri come la modifica dell'intero sito tratta i menu di navigazione.
• Scopri come predisporre le preferenze dell'editor di blocchi utilizzando il file theme.json.
• Scopri come utilizzare i controlli pattern integrati per creare layout versatili.
• Usando theme.json, applica la tipografia universale e le combinazioni di colori.
• Gestisci il riempimento e i margini utilizzando i controlli di spaziatura.
• Scopri come configurare l'editor dei blocchi in modo che le sue impostazioni siano in linea con il tema.
• Aggiungi la selezione dei caratteri, i gradienti, le tavolozze dei colori e altre opzioni di personalizzazione.
• Per limitare quanto i tuoi clienti possono variare rispetto al design di base, scopri come eliminare le scelte di personalizzazione indesiderate dai blocchi.
• Scopri come utilizzare i modelli per aiutare te e i tuoi clienti a creare pagine più rapidamente.
• Utilizza gli elementi del modello per evitare di riutilizzare i componenti del blocco in modelli diversi.

Questa è una lista impressionante di lezioni da imparare. E la buona notizia è che non è la formazione che si concentra esclusivamente sulla trasmissione della conoscenza. Sei incoraggiato a sporcarti le dita e le unghie in questo allenamento. La pratica lo rende perfetto.

E hey, non c'è bisogno di immaginarlo, che è una notizia meravigliosa. Il programma è creato. È tutto pronto. Sebbene non fosse l'argomento previsto del post, lo riveleremo comunque perché ci siamo imbattuti durante la raccolta di informazioni per l'articolo. Frank Klein, uno sviluppatore noto e apprezzato dai professionisti di WordPress, ha creato il corso.

Quindi, ragazzi, buona fortuna nella creazione di temi e nel fare FSE!