{"id":233842,"date":"2023-02-22T20:02:00","date_gmt":"2023-02-22T17:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233842"},"modified":"2022-11-11T12:44:55","modified_gmt":"2022-11-11T09:44:55","slug":"guida-per-gli-sviluppatori-utilizzo-di-wordpress-gutenberg-per-la-prima-pagina-e-le-pagine-di-destinazione","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/guida-per-gli-sviluppatori-utilizzo-di-wordpress-gutenberg-per-la-prima-pagina-e-le-pagine-di-destinazione\/","title":{"rendered":"Guida per gli sviluppatori: utilizzo di WordPress Gutenberg per la prima pagina e le pagine di destinazione"},"content":{"rendered":"\n

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 \u00e8 perfetta per te che desideri adattare un tema precedente per supportare Gutenberg o desideri imparare come sviluppare nuovi temi ottimizzati per Gutenberg.<\/p>\n

Quando WordPress ha introdotto il nuovo editor Gutenberg<\/a> in WordPress 5.0 (rilasciato intorno a dicembre 2018) ha reso per lo pi\u00f9 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\u00e0 e la possibilit\u00e0 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\u00e0 utilizzando ad esempio gli shortcode.<\/p>\n

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\u00f9 all’esperienza di Gutenberg. Diamo un’occhiata a come!<\/p>\n

Abilitazione di blocchi larghi e a larghezza intera<\/h2>\n

\"Guida<\/a><\/p>\n

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".<\/p>\n

Ma lo sapevi che in realt\u00e0 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\u00f9 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.<\/p>\n

In una funzione agganciata a after_setup_theme<\/code>te semplicemente chiama add_theme_support('align-wide')<\/code>. Probabilmente hai gi\u00e0 una funzione di "impostazione" nel tuo tema o, in caso contrario, aggiungi questo nel tuo tema functions.php<\/code>:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
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.<\/p>\n
\"Guida<\/a><\/p>\n
Ci sono alcuni tipi di blocchi in cui puoi impostare gli allineamenti dei blocchi, per lo pi\u00f9 \u00e8 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\u00ec via. Il blocco di copertina \u00e8 un ottimo blocco per la creazione di prime pagine o pagine di destinazione, come vedremo in questo post.<\/p>\n
Usando il blocco Cover<\/h2>\n
Il blocco Cover \u00e8 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.<\/p>\n
\"Guida<\/a><\/p>\n
Combinato con l’opzione per impostare la regolazione del blocco su ampia o intera larghezza (come abbiamo fatto sopra), il blocco Cover \u00e8 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.<\/p>\n
\"Guida<\/a><\/p>\n
In WordPress 5.3 \u00e8 arrivato un importante miglioramento per il blocco Cover: un wrapper HTML interno. Ci\u00f2 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.<\/p>\n
Ad esempio, supponi che il tuo tema abbia un contenitore di larghezza massima di 1200 px. Probabilmente hai gi\u00e0 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<\/code>. Come esempio:<\/p>\n
.wp-block-cover-image.alignfull .wp-block-cover__inner-container, \n.wp-block-cover.alignfull .wp-block-cover__inner-container {\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    padding: 0 20px;\n}<\/code><\/pre>\n
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<\/code>" e i blocchi di copertura con un colore di sfondo ottengono la classe " wp-block-cover<\/code>". Inoltre, miro anche all’allineamento del blocco "Full Width" con la classe " alignfull<\/code>". L’allineamento del blocco "Wide Width" ottiene la classe " alignwide<\/code>". Aggiungi CSS per indirizzare anche questo allineamento di blocchi, a seconda di cosa vuoi fare.<\/p>\n
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.<\/p>\n
Layout del tema e stile a tutta larghezza<\/h2>\n
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.<\/p>\n
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.<\/p>\n
\"Guida<\/a><\/p>\n
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<\/a> per semplificare questo processo. E poi nel tuo tema prendi le impostazioni del post e gestisci l’output HTML di conseguenza.<\/p>\n
Altre buone opzioni per i post sono nascondere il titolo della pagina e\/o nascondere l’immagine in primo piano. Ci\u00f2 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.<\/p>\n
Crea stili di blocco<\/h2>\n
C’\u00e8 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.<\/p>\n
\"Guida<\/a><\/p>\n
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.<\/p>\n
Mentre provi a creare le prime pagine, prendi nota di ci\u00f2 che devi personalizzare ripetutamente: questo potrebbe essere adatto per uno stile a blocchi.<\/p>\n
L’aggiunta di stili di blocco personalizzati \u00e8 in realt\u00e0 molto semplice e non richiede la conoscenza di Javascript. Ho un tutorial separato su come farlo se vuoi saperne di pi\u00f9 su questo.<\/p>\n
PS: se non vedi gli stili di blocco, il tuo tema potrebbe non avere il supporto per questo. Il processo \u00e8 lo stesso che abbiamo fatto per gli allineamenti di blocchi a larghezza e larghezza intera; nel gancio after_setup_theme<\/code>, aggiungi add_theme_support('wp-block-styles')<\/code>:<\/p>\n
add_action('after_setup_theme', function() {\n    add_theme_support('wp-block-styles');\n});<\/code><\/pre>\n
Utilizzo dei colori del tema come tavolozza dei colori<\/h2>\n
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\u00e0 di scegliere un colore da una tavolozza di colori.<\/p>\n
Hai la possibilit\u00e0 di utilizzare un colorpicker per selezionare o inserire il colore esadecimale nel colore preciso che desideri. \u00c8 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\u00f2 essere complicato ricordare costantemente e inserire ogni volta gli stessi codici colore esadecimali.<\/p>\n
Fortunatamente WordPress Gutenberg ti permette di definire la tavolozza dei colori! Questo \u00e8 ancora un altro add_theme_support()<\/code>in cui fornisci una matrice dei colori che desideri nella tavolozza. In una funzione agganciata a after_setup_theme<\/code>, procedere come segue:<\/p>\n
add_theme_support('editor-color-palette', [\n    [\n        'name' => __('Main blue profile color', 'txtdomain'),\n        'slug' => 'blue-profile',\n        'color' => '#59BACC'\n    ],\n    [\n        'name' => __('Secondary green profile color', 'txtdomain'),\n        'slug' => 'secondary-profile',\n        'color' => '#58AD69'\n    ],\n]);<\/code><\/pre>\n
Nel codice sopra aggiungiamo il supporto del tema per ‘ editor-color-palette<\/code>‘, e come secondo parametro della funzione definiamo un array di tutti i colori che vogliamo. Ogni colore richiede gli attributi name<\/code>, slug<\/code>e color<\/code>. name<\/code>\u00e8 ci\u00f2 che appare quando passi il mouse sopra il colore nella tavolozza. slug<\/code>\u00e8 il nome della classe che verr\u00e0 aggiunto all’elemento block. E color<\/code>definisce il codice esadecimale per il tuo colore.<\/p>\n
\"Guida<\/a><\/p>\n
Tieni presente che devi aggiungere stili nel tuo CSS mirati a ciascuna di queste classi (definite da slug<\/code>). WordPress non applica automaticamente il colore esadecimale ai tuoi blocchi anche se diciamo a WordPress qual \u00e8 il codice colore.<\/p>\n
Ad esempio, l’immagine a destra \u00e8 la mia tavolozza di colori che ho definito per il tema di questo sito \u2013 per A White Pixel:<\/p>\n
Questi sono i colori del mio tema e nel 95% dei casi user\u00f2 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\u00e0 definiti nella tavolozza dei colori rende la vita molto pi\u00f9 facile.<\/p>\n
Un consiglio \u00e8 quello di assicurarsi sempre di aggiungere nero puro (#000000<\/code>) e bianco puro (#FFFFFF<\/code>) nella tavolozza dei colori. Probabilmente \u00e8 anche una buona idea avere uno o due colori grigio chiaro.<\/p>\n
Utilizzo di una prima pagina statica e ottimizzazione del modello di prima pagina<\/h2>\n
Probabilmente lo sai gi\u00e0, ma lo menzioner\u00f2 lo stesso. In WordPress puoi impostare una pagina statica come prima pagina andando su Impostazioni > Lettura.<\/p>\n
\"Guida<\/a><\/p>\n
Come impostazione predefinita, la prima pagina di WordPress mostra un elenco dei post pi\u00f9 recenti. Ma se selezioni "Una pagina statica" e scegli una pagina dal menu a discesa, WordPress visualizzer\u00e0 questa pagina come prima pagina del tuo sito.<\/p>\n
Questo \u00e8 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 \u00e8 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.<\/p>\n
Quando il tuo WordPress \u00e8 impostato come pagina statica come prima pagina, WordPress cercher\u00e0 il modello front-page.php<\/code>nel tuo tema. Questo verr\u00e0 utilizzato al posto di page.php<\/code>. Ci\u00f2 ti consente di creare e modificare un modello separato che viene utilizzato solo per la tua prima pagina.<\/p>\n
In quel front-page.php<\/code>modello puoi gi\u00e0 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()<\/code>per produrre il contenuto della pagina per intero.<\/p>\n
Ad esempio, questo \u00e8 ci\u00f2 che ho nel tema di questo sito front-page.php<\/code>. Considerando che in tutti gli altri modelli, come page.php<\/code>, ho un sacco di output per la barra laterale, il titolo del post e cos\u00ec via, questa \u00e8 l’estensione completa del mio ciclo in front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
Questo \u00e8 tutto. Il mio codice HTML e le mie classi assicurano che il contenuto del post sia completamente a larghezza intera.<\/p>\n
Ricorda che questa \u00e8 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\u00e9 mancherebbe di imbottitura ai lati.<\/p>\n
Rendere trasparente l’intestazione del tuo sito al primo blocco Cover<\/h2>\n
Una caratteristica molto comune nei siti Web moderni \u00e8 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\u00f2 sembrare davvero bello quando possiamo vedere i colori o l’immagine dietro la prima sezione.<\/p>\n
Lo faccio nella prima pagina<\/a> 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.<\/p>\n
Tieni presente che devi essere consapevole dei colori nell’intestazione e del primo sfondo della copertina. Se la tua intestazione \u00e8 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\u00f2 renderebbe illeggibile la tua intestazione!<\/p>\n
Se vuoi farlo, tieni presente che richiede un po’ di conoscenza di Javascript. Ma in realt\u00e0 \u00e8 davvero semplice. Passer\u00f2 attraverso le basi per te:<\/p>\n
Il mio intero elemento di intestazione \u00e8 sempre position: fixed<\/code>. Poich\u00e9 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\u00e0 aggiunto. Ci\u00f2 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.<\/p>\n
E poi ho aggiunto un codice Javascript molto semplice usando jQuery:<\/p>\n
$(window).scroll(function() {\n    if ($(window).scrollTop() >= 60) {\n        $('#header').addClass('navbar-fixed')\n    } else {\n        $('#header').removeClass('navbar-fixed');\n    }\n});<\/code><\/pre>\n
Quello che fa questo codice \u00e8 aggiungere una classe ‘ navbar-fixed<\/code>‘ 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 \u00e8 trasparente sulla prima pagina.<\/p>\n
Queste sono le basi. Gioca con il CSS: regola il "punto di punta" di Javascript e usa, ad esempio transition<\/code>, la propriet\u00e0 per effettuare una transizione pi\u00f9 fluida quando viene applicato il colore di sfondo.<\/p>\n
Grandi blocchi per le prime pagine e le pagine di destinazione<\/h2>\n
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\u00e0 familiarit\u00e0 con tutti i blocchi disponibili, probabilmente li conosci gi\u00e0.<\/p>\n