L’evoluzione di WordPress ha richiesto del tempo per maturare, ma è passata da una semplice piattaforma di blogging a un robusto sistema di gestione dei contenuti (CMS) che gestisce quasi tutto il web. I maggiori progressi sono stati fatti nella creazione di siti. Il full site editing di WordPress (FSE, editing del sito intero) è un modo ambizioso per mettere strumenti complessi nelle mani di tutti.
Questa guida completa esplorerà la storia e le funzionalità del full site editing di WordPress. L’obiettivo finale è quello di mostrarvi come funziona l’FSE e di permettervi di sviluppare il design dei vostri siti, proprio come fanno i professionisti.
Una breve storia del design e della creazione di layout su WordPress
Capire l’evoluzione della progettazione di siti e layout all’interno di WordPress è una parte essenziale per apprezzare l’importanza del FSE. Lo strumento chiave che ci ha permesso di arrivare a questo punto è l’Editor classico.
Naturalmente, non è sempre stato “classico”. È sempre stato l’editor TinyMCE, predefinito dalla prima versione di WordPress fino al 2018 circa. Si tratta di un semplice editor di testo WYSIWYG (What You See Is What You Get) che permette di inserire contenuti e HTML di base, oltre ad alcuni stili di formattazione. In realtà, è ancora possibile ottenere l’editor TinyMCE in quanto si tratta di uno strumento commerciale:
I principali svantaggi dell’editor TinyMCE sono la mancanza di opzioni di anteprima front-end e una minore flessibilità rispetto a quanto si vorrebbe. I framework di temi sono diventati una valida e potente alternativa. Naturalmente il framework Genesis di StudioPress è ancora presente, ma ce ne sono stati altri, come Thesis.
Qui potete vedere come si passa dalla modifica del testo al web design visivo. Il framework offre delle opzioni sul back-end di WordPress che permettono di modificare alcuni aspetti del front-end. Inoltre, offre ulteriori funzionalità per apportare ulteriori modifiche, come hook e filtri, supporto per i template e altro ancora.
Tuttavia, questo non era ancora molto accessibile per l’utente comune, ed è per questo che i plugin per la creazione di pagine sono diventati popolari. Questi plugin si affiancano all’editor TinyMCE/Classic per offrire un sistema drag-and-drop per la progettazione del sito. Questi plugin sono rimasti in gran parte invariati rispetto al 2011. Divi e Beaver Builder la fanno ancora da padrone, ma anche Elementor è un colosso:
Vi consigliamo di leggere la prossima sezione per capire perché abbiamo alternative all’editor TinyMCE e a un plugin per la creazione di pagine.
L’editor a blocchi e il full site editing del sito WordPress
WordPress è il numero uno in termini di popolarità, ma per arrivarci ha dovuto lottare per difendere il suo titolo. Nel corso degli anni, molte altre piattaforme hanno saturato il mercato.
Squarespace, Wix, Medium e molte altre vogliono lo stesso pubblico e la stessa base di utenti di WordPress e, fino all’editor a blocchi, offrivano un’esperienza di editing decisamente migliore.
Questa era una grande preoccupazione per il management di WordPress, dato che le altre piattaforme dell’epoca stavano guadagnando maggiore visibilità. Anche la concorrenza aveva interfacce moderne, visive e performanti, anche per il semplice controllo del layout.
L’editor a blocchi è uno strumento modulare per costruire i post e le pagine di un sito, ma presenta anche degli svantaggi. Per cominciare, la sua portata limitata fa sì che l’utilizzo di questo editor richieda un plugin per la creazione di pagine se si desidera apportare modifiche più “profonde”. Inoltre, per costruire un sito completo è necessario avere conoscenze di sviluppo, una barriera creativa che il team di WordPress ha risolto.
Cos’è il full site editing di WordPress (FSE)
L’editing del sito intero di WordPress rappresenta l’ultima e più grande frontiera per lo sviluppo di un sito. Si basa sull’uso dei blocchi per mettere insieme un progetto e comprende molto di più dei singoli post e pagine. In sostanza, FSE permette di gestire ogni aspetto del design del vostro sito WordPress utilizzando un’interfaccia unificata e intuitiva.
Questo è ormai il modo “ufficiale” di modificare un sito. Riunisce tutti gli aspetti del vostro sito sotto la sua ala:
- Modifica della navigazione. Il vecchio metodo che prevedeva l’utilizzo della schermata Aspetto > Menu è ora incorporato nell’Editor del sito.
- Stili globali. Avete un maggiore controllo sull’aspetto del vostro sito. Questo include colori, tipografia, spaziatura e molto altro.
- Editing dei template. In passato era necessario avere conoscenze di sviluppo e di codifica come PHP, HTML e CSS. Ora potete usare l’Editor del sito per creare e modificare i pattern per le diverse parti del vostro sito senza dover ricorrere al codice.
- Block pattern. Sono elementi di design riutilizzabili grazie a rccolte di blocchi che potete inserire nei vostri layout.
Data l’evoluzione dell’editor, alcune funzionalità stanno scomparendo. Ad esempio, non sono più necessarie le aree widget, anche se WordPress le utilizza ancora come funzionalità legacy per i temi non a blocchi.
Ritorneremo più avanti su ciò che l’editing del sito intero di WordPress può aiutarvi a realizzare. Prima, però, approfondiamo il motivo per cui abbiamo bisogno del FSE.
Perché il FSE è in WordPress
Il team di WordPress ha una serie di motivi per introdurre il FSE. Alcuni di questi sono considerazioni tecniche. Ad esempio, l’Editor a blocchi non ci permette di modificare tutti gli aspetti del sito quando la funzionalità dovrebbe essere presente in primo luogo.
È difficile capire perché ci sia voluto così tanto tempo per permetterci di lavorare sugli stili dei template senza dover ricorrere al codice. Tra l’editor classico, i framework, i plugin di page builder e l’editor a blocchi, non ne abbiamo mai avuto l’opportunità. FSE risolve questo problema in modo nativo per WordPress.
Questa semplificazione unifica l’esperienza di modifica e la porta sotto il controllo del team di WordPress piuttosto che di sviluppatori di terze parti. Ciò significa anche che la curva di apprendimento è coerente. Tra contenuti, layout e design, l’utente continua ad avere un’esperienza familiare passando da una schermata all’altra.
Questa esperienza porta anche longevità. Il full site editing di WordPress non scomparirà, ma semplicemente si evolverà nel tempo. Questo dà alla piattaforma una base per adattarsi a qualsiasi cosa il team di sviluppo desideri apportare a WordPress.
In generale, questa responsabilizzazione si estende dagli sviluppatori agli utenti finali. La modifica completa del sito WordPress offre a tutti un maggiore controllo sulle modifiche al design che desiderano apportare senza dover ricorrere a sviluppatori, personalizzazioni complesse o conoscenze di codifica.
Le alternative al FSE
Per il team di WordPress, il FSE non è solo il presente, ma anche il futuro della piattaforma. Tuttavia, per utilizzarlo è necessario un tema compatibile (di cui parleremo più avanti). Inoltre, altre aziende che si occupano di WordPress potrebbero non essere d’accordo, soprattutto quelle che hanno prodotti concorrenti.
Ad esempio, gli sviluppatori web di WordPress sostengono che affidare il design di un tema a qualcuno esperto è una buona idea. In molti casi siamo d’accordo, soprattutto se si hanno esigenze complesse, il giusto budget e il tempo necessario.
Naturalmente, l’editor a blocchi è ancora utilizzabile per la maggior parte della creazione e personalizzazione dei contenuti. Il salto da questo al full site editing sarà breve e probabilmente lo starete già usando:
Molti utenti useranno l’editor a blocchi per la maggior parte del tempo e poi adotteranno un’altra soluzione. L’aggiunta di un plugin per la creazione di pagine fornisce alcune delle funzionalità che mancano all’editor a blocchi. Divi, Elementor, Beaver Builder, Brizy e molti altri hanno grandi funzionalità e consentono personalizzazioni e sviluppi a livello più profondo:
Per un’esperienza diametralmente opposta al full site editing di WordPress e per un ritorno alle origini, potete optare per un CMS completamente nuovo: ClassicPress.
La filosofia del progetto è che l’evoluzione di WordPress è una grande idea, escluso l’editor a blocchi e, per estensione, il FSE. Per questo motivo, il fork di ClassicPress non lo include. Al contrario, potrete creare siti utilizzando l’editor classico o TinyMCE, proprio come in passato.
Si tratta essenzialmente di una soluzione unica all’immaturità dell’editor a blocchi al momento del suo primo rilascio. All’epoca, il concetto aveva un senso teorico. Vista l’attuale esperienza di editing di WordPress, però, non c’è molta ragione di optare per ClassicPress.
Come funziona il full site editing di WordPress
In poche parole, il full site editing di WordPress estende le funzionalità dell’editor a blocchi a tutto il vostro sito. Per utilizzare il FSE, è necessario avere un “tema a blocchi” o “tema FSE” che lo supporti. Ne parleremo più avanti.
Ecco una panoramica di alto livello su come funziona il FSE:
- Il FSE utilizza i blocchi. Proprio come l’attuale iterazione dell’editor di WordPress, l’intero sito utilizza i blocchi per ogni componente. In questo caso, sia i singoli elementi di contenuto che i componenti strutturali più grandi (come gli header e i footer) utilizzeranno i blocchi.
- È possibile modificare i template di pagina all’interno di WordPress. Non è più necessario conoscere il PHP per modificare i file dei template. Al contrario, potete crearli e modificarli dall’Editor del sito.
- È possibile accedere a strumenti di progettazione per l’intero sito. Il pannello Stili Globali lo analizzeremo più avanti, ma permette di controllare elementi di design che riguardano l’intero sito. In molti casi, non avrete bisogno di CSS personalizzati per implementare la vostra visione.
- I block pattern permettono di costruire rapidamente. Come per l’Editor a blocchi, ci sono dei layout per le sezioni più comuni del sito che potete inserire e personalizzare senza limitazioni.
- Il file theme.json è fondamentale per il FSE. Questo file di configurazione definisce gli stili e le impostazioni fondamentali del vostro tema. È un punto di partenza per personalizzare ulteriormente il vostro sito, ma può anche essere il fulcro del vostro sviluppo.
La maggior parte degli utenti non utilizza una versione di WordPress precedente alla 5.9, ma se la usate, dovrete aggiornarla per sfruttare l’FSE. Come abbiamo detto, avrete bisogno anche di un tema di supporto. Vediamo di approfondire rapidamente questo aspetto.
Scegliere un tema FSE adatto
Fortunatamente, la scelta di un tema a blocchi richiede lo stesso livello di attenzione di qualsiasi altro tipo di tema. Dovrete considerare alcuni aspetti oggettivi per assicurarvi di scaricare una soluzione valida:
- Verificare la presenza di aggiornamenti regolari della base di codice del tema.
- Scoprire cosa pensano gli altri utenti del tema attraverso valutazioni e recensioni.
- Assicurarsi che lo sviluppatore offra il giusto livello di assistenza per le proprie esigenze.
Poiché il full site editing di un sito su WordPress è una novità per la piattaforma, sono disponibili meno opzioni per i temi. Ciò non significa però che sia difficile ottenere un’alta qualità. Molti sviluppatori più importanti hanno creato la loro versione di tema FSE/Block. Uno dei primi è stata la versione FSE di Neve di ThemeIsle:
La versione “tradizionale” o “classica” del tema utilizza il vecchio Personalizza della sezione Aspetto della schermata Aspetto. Questa versione incorpora completamente l’Editor del sito e offre migliori prestazioni soggettive.
Ci sono altri temi a blocchi da prendere in considerazione, come Portfolio WP e Mugistore. Tuttavia, Ollie è probabilmente il migliore del gruppo:
Questo tema si impegna a modificare completamente il sito WordPress senza intoppi. Ha un’ottima procedura guidata di onboarding e ha anche una versione premium che include molti elementi e pattern della libreria dei Pattern.
Anche il tema predefinito Twenty Twenty-Four è una scelta valida per il vostro sito:
Le capacità e la profondità dell’Editor del sito ci permettono di costruire sopra (ed estendere) temi che spesso richiedono molto codice e risorse. L’editor democratizza la capacità di costruire e sviluppare temi e l’interfaccia principale è il primo punto di contatto per questo.
Visitare l’interfaccia principale del FSE
Per trovare l’Editor del sito, andate su Aspetto > Editor di WordPress:
Questa schermata è abbastanza semplice. Sul lato destro, vedrete l’anteprima del layout. Potete cliccarla per aprire l’interfaccia dell’Editor del sito per la vostra home page. A sinistra trovate una serie di link ad altre pagine di editing per attività specifiche. Tra poco daremo un’occhiata approfondita a queste schermate.
Prima di addentrarci in ciascuna delle cinque schermate di FSE, tenete presente che potete uscire dall’Editor del sito utilizzando il logo di WordPress nell’angolo in alto a sinistra dello schermo. In alternativa, potete cliccare sulla freccia “indietro” nella pagina principale del Design:
Dopo aver chiarito questo aspetto, passiamo all’utilizzo del FSE.
I 5 pilastri della modifica completa del sito WordPress
Ora esamineremo ogni schermata dell’editor del sito nell’ordine in cui appare nella navigazione. In effetti, questo ci porta a parlare di questa schermata!
1. Navigazione
La pagina Navigazione sostituisce la schermata Aspetto > Menu. Una volta inserita, vedrete un elenco di post e pagine del vostro sito:
Se si tratta di un nuovo sito, qui vedrete tutti i vostri post e le vostre pagine. Questo potrebbe confondervi perché rappresenta il vostro menu di navigazione principale. Vicino alla voce Navigazione, aprite il menu Azioni. In questo modo potrete modificare il menu, cambiarne il nome, eliminarlo o duplicarlo:
Se cliccate su Modifica, si apre una versione dell’Editor blocchi che contiene il vostro menu come blocco Nvigazione:
Nella barra laterale, avete la possibilità di spostare ogni voce verso l’alto o verso il basso, di rimuoverla dal menu o di creare un sottomenu a partire da essa:
Ogni voce del menu utilizza un blocco di collegamento alla pagina, che avrà le sue opzioni. Avete a disposizione modifiche alla formattazione in linea e impostazioni sullo stile della barra laterale:
Notate che qui potete aggiungere immagini in linea, sottomenu e altro ancora. È più flessibile rispetto al modo classico di creare la navigazione. Per aggiungere un elemento al menu, cliccate sull’icona Più e selezionate il vostro post o la vostra pagina:
Una volta salvate le modifiche, vedrete la navigazione riflettere le modifiche apportate. Per creare altri menu, potete utilizzare il link Azioni > Duplica nella pagina di navigazione.
2. Stili
La schermata Stili permette di controllare l’aspetto del vostro sito a livello globale. La barra laterale offre diverse palette e impostazioni tipografiche per diversi design:
Facendo clic su uno di essi, vedrete il design in atto sul vostro sito. Tuttavia, nella parte superiore della barra laterale è presente un’icona di Modifica a forma di matita per apportare ulteriori modifiche nell’Editor del sito:
Ciascuna delle opzioni presenti nella barra laterale riguarda i colori, il layout, la tipografia e persino le impostazioni delle ombre. Ad esempio, potete selezionare i font dell’intero sito e applicarli ai vari elementi del vostro design:
Approfondendo i menu, spesso si ottengono altre opzioni con cui giocare, come la spaziatura, i colori e altro ancora. La sezione Layout permette di personalizzare le dimensioni dell’area dei contenuti principali, oltre a padding e spaziatura dei blocchi:
Se volete vedere come appaiono queste modifiche senza navigare nel vostro sito, potete usare l’icona “occhio” per aprire il Libro degli stili. Si tratta di un pratico strumento di visualizzazione che i designer adoreranno:
Infine, anche se non ci soffermeremo su questo aspetto, potete anche personalizzare l’aspetto di ogni blocco del vostro sito. Ad esempio, potete basarvi sullo stile globale di un blocco Paragrafo. Anche in questo caso, quando avrete finito, potrete salvare le modifiche e queste saranno applicate al vostro sito.
Utilizzare il file theme.json con il full site editing
Prima di passare alla schermata successiva del FSE, è necessario sapere cos’è il file theme.json. Si tratta essenzialmente della versione per sviluppatori delle schermate degli stili.
Permette di definire gli stili predefiniti per il vostro sito e i suoi blocchi e lo utilizzerete come file di configurazione. Inoltre, utilizza il formato JSON, quindi offre un’esperienza meno pesante in termini di codice rispetto al passato.
In definitiva, sappiate che tutto ciò che potete fare all’interno di theme.json, potete farlo anche nell’Editor del sito.
3. Pagine
La schermata Pagine duplica le funzionalità delle classiche schermate Messaggi e Pagine della dashboard di WordPress. Ad esempio, vedrete un elenco di stati che filtra le vostre pagine in Pubblicato, Programmato, Bozze e altri:
Ogni pagina ha delle azioni aggiuntive, come ad esempio Modifica, Visualizza, Rinomina ed Elimina. Potete anche modificare una pagina utilizzando l’icona a forma di matita. In cima all’elenco c’è il pulsante Aggiungi nuova pagina.
Se utilizzate già l’editor a blocchi, queste schermate vi risulteranno più familiari. Tuttavia, pur disponendo delle stesse solite funzionalità, l’Editor del sito offre alcuni blocchi del tema extra per aiutarvi a costruire il vostro sito. Questi blocchi coprono casi d’uso tipici come l’aggiunta del logo del sito, la navigazione, gli autori, i commenti e altro ancora:
Uno di questi, il blocco Query Loop, può aiutarvi a svolgere compiti che spesso richiedono l’uso del PHP. Ad esempio, poiché permette di visualizzare i post in base a parametri specifici, potete mostrare i vostri ultimi post o addirittura creare un portfolio. Tuttavia, tutto questo non può avvenire senza le ultime due schermate dell’Editor del sito.
4. Template
I template sono un punto fermo dello sviluppo di WordPress. Sono layout riutilizzabili che aiutano a definire la struttura delle varie parti del vostro sito. In genere è necessario avere esperienza con il PHP, ma potete personalizzarli tutti (e crearne di nuovi) senza bisogno di codice all’interno dell’editor del sito.
Lavorare sui template segue lo stesso approccio dei post e delle pagine: userete l’Editor del sito per aggiungere blocchi al template, quindi salverete le modifiche. Naturalmente, queste modifiche saranno applicate a tutte le pagine che utilizzano il template in questione.
Per creare un nuovo template, cliccate sul pulsante Aggiungi nuovo template:
In questo modo, verrà eseguita una rapida procedura guidata per selezionare il tipo di template che desiderate creare e un Block pattern adatto per iniziare la progettazione. Questi pattern sono al centro della nostra ultima sezione.
5. Pattern
I Block pattern sono raccolte correlate di blocchi che svolgono ruoli specifici nel vostro sito. Ad esempio, potete inserire un pattern di header completo di logo, navigazione e titolo del sito:
Crearli è semplice, anche se, senza l’editor del sito, dovreste registrare questi pattern utilizzando PHP. Ora, però, potete utilizzare la pagina dei pattern:
Sul lato sinistro, vedrete tutti i pattern disponibili suddivisi in cartelle chiamate “tipi”. Questi sono un ottimo modo per creare rapidamente il design di un sito e spesso hanno un aspetto fantastico.
Il pulsante Aggiungi nuovo pattern apre l’editor e permette di creare queste sezioni da solo. Questo permette di creare elementi riutilizzabili per il vostro sito, il che rappresenta un modo sostenibile e autonomo di sviluppare siti per voi stessi e per chiunque lavori con voi.
Suggerimenti su come utilizzare il full site editing di WordPress per creare nuovi design
C’è molto da approfondire quando si parla di WordPress full site editing, e non possiamo certo parlare di tutto ciò che si può fare con questo strumento. Tuttavia, possiamo darvi alcuni consigli per sfruttare al meglio il FSE.
Ad esempio, potete esportare i vostri pattern e stili per riutilizzarli su altri siti. Per farlo, accedete all’editor del sito per qualsiasi post o pagina, quindi cliccate sul menu Opzioni nella barra degli strumenti in alto. Nel menu a discesa, scegliete Esporta:
In questo modo otterrete un file ZIP del vostro tema; se avete bisogno di importarlo, potete farlo utilizzando il plugin WordPress Importer.
L’icona Cerca nelle schermate dell’editor del sito e la barra di ricerca nella barra degli strumenti dell’editor a blocchi permettono di accedere alla palette dei comandi o al centro comandi di WordPress. Se utilizzate gli editor di codifica, capirete come funziona. Si tratta di un modo per raggiungere quasi ogni punto dell’editor del sito utilizzando una query di ricerca contestuale e persino eseguire comandi:
L’utilizzo di questa palette può accelerare lo sviluppo e ridurre il numero di azioni da tastiera e da mouse che devi compiere. Da qui potete aggiungere, eliminare e modificare tutti i tipi di elementi del sito, oltre che alternare diverse viste e lavorare con i pattern.
Riepilogo
il full site editing di WordPress rappresenta il modo attuale di progettare il proprio sito senza codice. Si tratta di un notevole passo avanti rispetto alle precedenti iterazioni di modifica dei contenuti, che offre una serie completa di opzioni con cui giocare.
Ci piace la sua flessibilità: i proprietari di siti non dovranno toccare una riga di codice e potranno lavorare nelle schermate dell’editor del sito. Gli sviluppatori hanno accesso al file theme.json, di cui parleremo in un prossimo articolo. In ogni caso, ora abbiamo a disposizione il massimo per creare un sito web WordPress secondo le nostre esatte specifiche.
Volete iniziare a utilizzare il full site editing di WordPress per i vostri progetti WordPress? Fateci sapere cosa ne pensate nella sezione commenti qui sotto!
Lascia un commento