In questo post vedremo come utilizzare l’editor Gutenberg per creare pagine frontali o landing page moderne e di bell’aspetto. Vedremo in particolare come tu come sviluppatore puoi modificare il codice del tuo tema per supportarlo. Questa guida è perfetta per te che desideri adattare un tema precedente per supportare Gutenberg o desideri imparare come sviluppare nuovi temi ottimizzati per Gutenberg.
Quando WordPress ha introdotto il nuovo editor Gutenberg in WordPress 5.0 (rilasciato intorno a dicembre 2018) ha reso per lo più non necessario l’uso di un plug-in per la creazione di pagine separato. L’editor di Gutenberg offre all’autore di WordPress molta flessibilità e la possibilità di creare contenuti e design ricchi che non erano facili prima, a meno che il tema o un plug-in non fornissero loro la funzionalità utilizzando ad esempio gli shortcode.
Ottieni molto stile per i blocchi di Gutenberg immediatamente in WordPress, ma con un po’ di lavoro sul tema e la conoscenza dei blocchi puoi aggiungere molto di più all’esperienza di Gutenberg. Diamo un’occhiata a come!
Abilitazione di blocchi larghi e a larghezza intera
La maggior parte dei blocchi ti consente di scegliere gli allineamenti dei blocchi. Quando lavori in Gutenberg su un tema non sviluppato per Gutenberg, puoi scegliere tra "Allinea a sinistra, "Allinea al centro" e "Allinea a destra".
Ma lo sapevi che in realtà ce ne sono altri due? Gli altri due, "Wide Width" e "Full Width" sono perfetti per creare una prima pagina o una landing page. In seguito esamineremo più da vicino come ottimizzare il layout e il design del tema per supportare completamente i blocchi a larghezza intera. Per prima cosa devi dire a WordPress di aggiungere il supporto per questi due allineamenti di blocchi nel tuo tema.
In una funzione agganciata a after_setup_themete semplicemente chiama add_theme_support('align-wide'). Probabilmente hai già una funzione di "impostazione" nel tuo tema o, in caso contrario, aggiungi questo nel tuo tema functions.php:
add_action('after_setup_theme', function() {
add_theme_support('align-wide');
});Con questo codice attivo nel tuo tema, ora dovresti ottenere un totale di cinque opzioni per gli allineamenti dei blocchi. Per alcuni blocchi, ad esempio Colonne, ottieni solo i due nuovi.
Ci sono alcuni tipi di blocchi in cui puoi impostare gli allineamenti dei blocchi, per lo più è il tipo che supporta i blocchi nidificati, ad es. un blocco che ti consente di aggiungere blocchi all’interno. Tali blocchi popolari sono Cover, Colonne, Immagine, blocchi incorporati e così via. Il blocco di copertina è un ottimo blocco per la creazione di prime pagine o pagine di destinazione, come vedremo in questo post.
Usando il blocco Cover
Il blocco Cover è sicuramente il miglior blocco quando vuoi costruire una prima pagina o una landing page divisa in sezioni. Puoi aggiungere qualsiasi tipo di blocco e tutti i blocchi che vuoi all’interno di un blocco di copertura. Con un Blocco copertina puoi impostare un colore di sfondo, un’immagine di sfondo o un’immagine di sfondo con una sovrapposizione di colore.
Combinato con l’opzione per impostare la regolazione del blocco su ampia o intera larghezza (come abbiamo fatto sopra), il blocco Cover è uno strumento potente. Puoi creare una pagina in cui tutto il contenuto risieda all’interno di sezioni di blocchi di copertina a larghezza intera con ciascuno il proprio colore di sfondo o immagine di sfondo. Con lo stile e il layout corretti nel tuo tema hai un moderno generatore di prime pagine in piena regola.
In WordPress 5.3 è arrivato un importante miglioramento per il blocco Cover: un wrapper HTML interno. Ciò significa che il blocco Cover ha un elemento HTML per la sezione stessa, con il suo colore di sfondo o immagine di sfondo, e quindi un altro elemento HTML in cui risiede tutto il contenuto. Combina questo con un allineamento del blocco a larghezza intera: modella l’elemento esterno (con il colore di sfondo o l’immagine) in modo che diventi completamente a larghezza intera, quindi modella l’elemento HTML interno con il contenuto per adattarlo al contenitore del tuo tema.
Ad esempio, supponi che il tuo tema abbia un contenitore di larghezza massima di 1200 px. Probabilmente hai già una classe HTML specifica con uno stile di larghezza massima, assicurandoti che i tuoi contenuti non si espandano semplicemente a tutta larghezza indipendentemente dalle dimensioni dello schermo. Aggiungi il tuo stile di larghezza massima all’HTML interno della copertina; nome della classe wp-block-cover__inner-container. Come esempio:
.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.wp-block-cover.alignfull .wp-block-cover__inner-container {
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 20px;
}Nel codice CSS sopra, mi rivolgo a due classi genitore Cover. La classe Parent Block Cover cambia a seconda che tu scelga o meno un’immagine di sfondo. I blocchi di copertura con un’immagine di sfondo ottengono la classe " wp-block-cover-image" e i blocchi di copertura con un colore di sfondo ottengono la classe " wp-block-cover". Inoltre, miro anche all’allineamento del blocco "Full Width" con la classe " alignfull". L’allineamento del blocco "Wide Width" ottiene la classe " alignwide". Aggiungi CSS per indirizzare anche questo allineamento di blocchi, a seconda di cosa vuoi fare.
Se hai iniziato a giocare con questo, potresti aver riscontrato problemi con il layout generale nel tema. Il tuo tema probabilmente costringe i tuoi blocchi di copertura a larghezza intera a non andare affatto a larghezza intera. Diamo un’occhiata a questo dopo.
Layout del tema e stile a tutta larghezza
Finora abbiamo aggiunto il supporto per i blocchi a larghezza intera ea larghezza intera e abbiamo imparato a utilizzare e ottimizzare il blocco Cover in modo che agisca come sezioni della prima pagina o della pagina di destinazione. Ma nella maggior parte dei temi il tuo HTML e il layout potrebbero impedire al contenuto del tuo post di andare a tutta larghezza.
Il tuo tema probabilmente ha una barra laterale destra nella visualizzazione di un singolo post o di una pagina. Probabilmente ci sono wrapper HTML aggiuntivi, incluso un elemento contenitore di larghezza massima, che impedisce ai blocchi a larghezza intera di andare effettivamente a larghezza intera. I tuoi involucri probabilmente hanno anche un bel po’ di margini o imbottitura che impedisce ancora una volta ai blocchi a larghezza intera di toccare completamente i bordi dello schermo. Ma devi fare in modo che un singolo post o una pagina abbiano un bell’aspetto per i post in cui l’utente non utilizza anche i blocchi di copertina. Devi considerare i tuoi wrapper quando sviluppi per Gutenberg con il supporto per blocchi larghi e a larghezza intera. Tutto dipende dal design, dall’HTML e dallo stile del tuo tema, ma diamo un’occhiata ad alcune idee per risolverlo.
Una buona soluzione sarebbe aggiungere opzioni di post; meta impostazioni personalizzate per post e pagine che influiscono sul layout di quella pagina. Puoi configurare un’impostazione per nascondere la barra laterale o per forzare il contenuto del tuo post a diventare completamente a tutta larghezza. Crea manualmente le impostazioni dei post aggiungendo metabox o utilizza i campi personalizzati avanzati per semplificare questo processo. E poi nel tuo tema prendi le impostazioni del post e gestisci l’output HTML di conseguenza.
Altre buone opzioni per i post sono nascondere il titolo della pagina e/o nascondere l’immagine in primo piano. Ciò ti consente di creare contenuti normalmente, ma per pagine specifiche puoi facilmente impostare una pagina di destinazione completamente con blocchi di copertina a larghezza intera. Nascondendo il titolo della pagina standard puoi creare un’intestazione o una sezione di invito all’azione dall’aspetto migliore per fungere invece da titolo della pagina.
Crea stili di blocco
C’è una caratteristica poco conosciuta in WordPress Gutenberg; i blocchi possono avere stili diversi. Puoi vedere gli stili di blocco in azione con il blocco Preventivo. Aggiungi il blocco nel tuo editor e dai un’occhiata all’Inspector (barra laterale destra). Troverai l’argomento "Stili" e due opzioni tra stili diversi.
Crea stili personalizzati che semplifichino la creazione della prima pagina e delle pagine di destinazione. Suggerisco almeno di aggiungere stili di blocco personalizzati al blocco Intestazione, in modo da poter creare stili personalizzati senza interrompere le intestazioni per i normali post. Crea uno stile di blocco per i titoli delle sezioni con caratteri extra large e riempimento aggiuntivo.
Mentre provi a creare le prime pagine, prendi nota di ciò che devi personalizzare ripetutamente: questo potrebbe essere adatto per uno stile a blocchi.
L’aggiunta di stili di blocco personalizzati è in realtà molto semplice e non richiede la conoscenza di Javascript. Ho un tutorial separato su come farlo se vuoi saperne di più su questo.
PS: se non vedi gli stili di blocco, il tuo tema potrebbe non avere il supporto per questo. Il processo è lo stesso che abbiamo fatto per gli allineamenti di blocchi a larghezza e larghezza intera; nel gancio after_setup_theme, aggiungi add_theme_support('wp-block-styles'):
add_action('after_setup_theme', function() {
add_theme_support('wp-block-styles');
});Utilizzo dei colori del tema come tavolozza dei colori
Se hai giocato con Gutenberg, probabilmente avrai notato che Gutenberg ti offre un determinato set di colori per il testo o il colore di sfondo. Ad esempio, l’aggiunta di un blocco Cover ti chiederà di scegliere un colore da una tavolozza di colori.
Hai la possibilità di utilizzare un colorpicker per selezionare o inserire il colore esadecimale nel colore preciso che desideri. È possibile accedervi facendo clic sul collegamento "Colore personalizzato". Ma se stai usando lo stesso set di colori nel tuo tema e vuoi mantenerlo coerente, può essere complicato ricordare costantemente e inserire ogni volta gli stessi codici colore esadecimali.
Fortunatamente WordPress Gutenberg ti permette di definire la tavolozza dei colori! Questo è ancora un altro add_theme_support()in cui fornisci una matrice dei colori che desideri nella tavolozza. In una funzione agganciata a after_setup_theme, procedere come segue:
Nel codice sopra aggiungiamo il supporto del tema per ‘ editor-color-palette‘, e come secondo parametro della funzione definiamo un array di tutti i colori che vogliamo. Ogni colore richiede gli attributi name, sluge color. nameè ciò che appare quando passi il mouse sopra il colore nella tavolozza. slugè il nome della classe che verrà aggiunto all’elemento block. E colordefinisce il codice esadecimale per il tuo colore.
Tieni presente che devi aggiungere stili nel tuo CSS mirati a ciascuna di queste classi (definite da slug). WordPress non applica automaticamente il colore esadecimale ai tuoi blocchi anche se diciamo a WordPress qual è il codice colore.
Ad esempio, l’immagine a destra è la mia tavolozza di colori che ho definito per il tema di questo sito – per A White Pixel:
Questi sono i colori del mio tema e nel 95% dei casi userò uno di questi colori, sia come sfondo che come colore del testo. In rari casi riesco a tirare fuori il colorpicker, ma avere i soliti sospetti già definiti nella tavolozza dei colori rende la vita molto più facile.
Un consiglio è quello di assicurarsi sempre di aggiungere nero puro (#000000) e bianco puro (#FFFFFF) nella tavolozza dei colori. Probabilmente è anche una buona idea avere uno o due colori grigio chiaro.
Utilizzo di una prima pagina statica e ottimizzazione del modello di prima pagina
Probabilmente lo sai già, ma lo menzionerò lo stesso. In WordPress puoi impostare una pagina statica come prima pagina andando su Impostazioni > Lettura.
Come impostazione predefinita, la prima pagina di WordPress mostra un elenco dei post più recenti. Ma se selezioni "Una pagina statica" e scegli una pagina dal menu a discesa, WordPress visualizzerà questa pagina come prima pagina del tuo sito.
Questo è un gioco da ragazzi nella creazione di una prima pagina per il tuo sito WordPress. Nella pagina selezionata puoi costruire la prima pagina usando tutti i trucchi sopra menzionati. Ad esempio, potresti avere opzioni di post deselezionate per mostrare il titolo della pagina, la barra laterale e l’immagine in primo piano. E la pagina è completamente costruita con blocchi e contenuti Cover a tutta larghezza. Tuttavia, puoi scegliere di non seguire il percorso delle opzioni del post (nascondi la barra laterale, ecc.) e semplicemente creare un modello di prima pagina per sostituirle o applicarle.
Quando il tuo WordPress è impostato come pagina statica come prima pagina, WordPress cercherà il modello front-page.phpnel tuo tema. Questo verrà utilizzato al posto di page.php. Ciò ti consente di creare e modificare un modello separato che viene utilizzato solo per la tua prima pagina.
In quel front-page.phpmodello puoi già definire HTML per assicurarti che tutti i blocchi siano completamente a larghezza intera, non abbiano barra laterale, titolo di pagina o immagine in primo piano. Potresti voler semplicemente fare solo the_content()per produrre il contenuto della pagina per intero.
Ad esempio, questo è ciò che ho nel tema di questo sito front-page.php. Considerando che in tutti gli altri modelli, come page.php, ho un sacco di output per la barra laterale, il titolo del post e così via, questa è l’estensione completa del mio ciclo in front-page.php:
while (have_posts()): the_post();
the_content('');
endwhile;Questo è tutto. Il mio codice HTML e le mie classi assicurano che il contenuto del post sia completamente a larghezza intera.
Ricorda che questa è una buona soluzione se tu come utente del tema capisci come funzionano i tuoi modelli. So che tutti i miei contenuti nella mia prima pagina devono essere completamente racchiusi all’interno di blocchi di copertina. Mi affido all’HTML del contenitore interno del blocco Cover per assicurarmi che i miei contenuti abbiano un bell’aspetto e cadano in un contenitore di larghezza massima. Se dovessi aggiungere un semplice blocco Paragraph senza un blocco Cover avvolgente, non sembrerebbe buono perché mancherebbe di imbottitura ai lati.
Rendere trasparente l’intestazione del tuo sito al primo blocco Cover
Una caratteristica molto comune nei siti Web moderni è rendere l’intestazione trasparente sulla prima pagina. Quando l’utente inizia a scorrere la pagina verso il basso, l’intestazione cambia in uno stile fisso e ottiene uno sfondo. Ma mantenere un’intestazione trasparente può sembrare davvero bello quando possiamo vedere i colori o l’immagine dietro la prima sezione.
Lo faccio nella prima pagina di questo sito. Guarda! Nella parte superiore della pagina la mia intestazione non ha sfondo e mostra lo sfondo della sezione del gradiente viola (un blocco di copertina) dietro. Una volta che inizi a scorrere, ottiene uno sfondo fisso fisso.
Tieni presente che devi essere consapevole dei colori nell’intestazione e del primo sfondo della copertina. Se la tua intestazione è composta da logo bianco e voci di menu bianche (come la mia), non puoi usare questo trucco con un blocco Cover che ha uno sfondo chiaro. Ciò renderebbe illeggibile la tua intestazione!
Se vuoi farlo, tieni presente che richiede un po’ di conoscenza di Javascript. Ma in realtà è davvero semplice. Passerò attraverso le basi per te:
Il mio intero elemento di intestazione è sempre position: fixed. Poiché normalmente non voglio che il mio contenuto scompaia dietro l’intestazione, ho aggiunto un padding-top sull’elemento body, spingendo il contenuto in basso sotto l’intestazione. Tuttavia, ho aggiunto una regola per cui se siamo nel modello in prima pagina, questo riempimento non verrà aggiunto. Ciò assicura che solo sulla prima pagina, la parte del corpo appaia dietro l’intestazione. Quindi miro al primo blocco di copertina in prima pagina e aggiungo un ulteriore padding-top, per assicurarmi che il contenuto di questo primo blocco non si collochi dietro l’intestazione, dandogli un bel riempimento dopo l’intestazione.
E poi ho aggiunto un codice Javascript molto semplice usando jQuery:
Quello che fa questo codice è aggiungere una classe ‘ navbar-fixed‘ quando la pagina viene fatta scorrere oltre 60px verso il basso nella pagina. E nel mio CSS ho semplicemente come target questa classe e aggiungo un colore di sfondo fisso. Senza questa classe lo sfondo dell’intestazione è trasparente sulla prima pagina.
Queste sono le basi. Gioca con il CSS: regola il "punto di punta" di Javascript e usa, ad esempio transition, la proprietà per effettuare una transizione più fluida quando viene applicato il colore di sfondo.
Grandi blocchi per le prime pagine e le pagine di destinazione
WordPress offre una gamma completa di blocchi pronti per l’uso. Alcuni di essi sono particolarmente utili quando si costruisce una prima pagina o una pagina di destinazione. Se hai già familiarità con tutti i blocchi disponibili, probabilmente li conosci già.
- Colonne. Un blocco che consente blocchi nidificati, il che significa che puoi aggiungere qualsiasi blocco all’interno di ogni colonna. Puoi anche aggiungere colonne all’interno di un blocco Cover. Perfetto per strutturare il contenuto in colonne. Puoi decidere il numero di colonne e per ogni colonna puoi decidere la loro larghezza. Possono essere tutte larghezze uguali o larghezze personalizzate.
- Gruppo. Un altro blocco che consente blocchi nidificati. Ottimo per impostare uno sfondo colorato attorno a un mucchio di altri blocchi (come un titolo e un paio di paragrafi).
- Pulsante. Non c’è prima pagina senza pulsanti. I pulsanti sono ottimi come call to action e per indirizzare i tuoi visitatori dove vuoi che vadano. È possibile personalizzare l’aspetto e il design del pulsante. Combina questo con stili di blocco personalizzati per i pulsanti!
- Distanziatore. Se ritieni che ti manchi spazio nelle tue sezioni, aggiungi un blocco Spacer, che è semplicemente spazio senza alcun contenuto. È possibile definire l’altezza del distanziatore.
- Separatore. Simile al blocco Spacer, ma aggiunge una bella linea. Un’altra opzione per separare chiaramente i contenuti. Personalizza il design della linea nel CSS del tuo tema o aggiungi stili di blocco personalizzati.
- Galleria. Eccellente per mostrare le immagini. Ha il supporto per l’allineamento dei blocchi a larghezza intera, quindi puoi creare una galleria di immagini a larghezza intera sulla tua prima pagina.
- Media e testo. Un modo semplice e piacevole per allineare un’immagine o un supporto accanto al testo. Potrebbe essere un’opzione migliore rispetto alle colonne in alcuni casi.
- Incorpora: Youtube ++. WordPress offre un sacco di incorporamenti per i media. Ad esempio, puoi avere un video Youtube a tutta larghezza nella tua prima pagina.
- Widget: campo di ricerca, ultimi post, calendario++. WordPress offre alcuni bei elementi di contenuto predefiniti. Se desideri visualizzare un elenco di post recenti o una barra di ricerca sulla tua pagina di destinazione, fallo.
Se invece ritieni che ti manchino dei blocchi per fare quello che vuoi, la soluzione è creare i tuoi blocchi personalizzati.
Creazione di blocchi personalizzati
Una caratteristica molto comune in una prima pagina o pagina di destinazione è un elemento di "scorciatoia"; dove scegli un post o una pagina, e viene generato un blocco che collega al post, contenente l’immagine in primo piano, il titolo del post, possibilmente l’estratto. Al momento della stesura di questo non esiste tale opzione in WordPress standard. Dovresti creare manualmente questa scorciatoia da solo, inserendo manualmente la stessa immagine in primo piano del post, digitando manualmente il titolo e l’estratto del post e avvolgere tutto in un collegamento.
Altri esempi di blocchi che sono molto utili per la costruzione della prima pagina e della pagina di destinazione sono gli slider/carousel, le tabelle di confronto dei prezzi e le testimonianze.
Per ottimizzare per questo tipo di blocchi devi trovare un plugin che ti dia questo (non ho esplorato questa opzione) o crearli tu stesso. La creazione di blocchi personalizzati richiede una conoscenza significativa di Javascript e React e una buona dose di programmazione. Consiglio di seguire questa strada se sei seriamente intenzionato a diventare uno sviluppatore di WordPress.
Se sei interessato a imparare come creare blocchi personalizzati per Gutenberg, ho una serie di tutorial che lo esamina in dettaglio.
Puoi anche optare per un percorso più semplice e acquistare Advanced Custom Fields Pro (ACF). Con questo plugin puoi creare blocchi Gutenberg personalizzati senza alcuna conoscenza di Javascript. Devi solo controllare l’output PHP dei blocchi e lasciare che ACF gestisca la parte Javascript. Ma tieni presente che questo crea una dipendenza del tuo tema da un plug-in con licenza.
Conclusione
Spero che questo post ti sia stato di aiuto per sviluppare ulteriormente le tue capacità e conoscenze con WordPress Gutenberg! Al momento in cui scrivo questo c’è davvero una mancanza di informazioni ed esperienza su come ottimizzare il tuo tema per Gutenberg. In particolare, ho avuto difficoltà a trovare qualcosa su come costruire bene una prima pagina. Quindi questo è ciò che ho imparato sperimentando e giocando molto.