Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare

L’editor di blocchi Gutenberg , l’editor di contenuti di WordPress, conta oltre 81 milioni di installazioni attive. Data la natura dominante del mercato di WordPress e la natura intuitiva del design di questo editor, non sorprende che questo sistema sia così popolare.

Gutenberg è un page builder e un editor di contenuti drag-and-drop accessibile. Offre molte funzionalità e vari approcci che potete utilizzare per creare il sito web curato dei vostri sogni.

Questo editor è costruito su Blocchi Gutenberg, diverse unità di contenuto che compongono le pagine e il layout di un sito web.

È possibile ottenere questi blocchi dalla libreria dei blocchi di WordPress. Questa libreria è ampia, ma non sempre contiene il blocco esatto di cui avete bisogno per il vostro sito web.

Quindi, se siete un imprenditore che desidera funzionalità avanzate del sito web o elementi specializzati non ancora offerti da Gutenberg, potreste essere interessati a utilizzare i blocchi personalizzati di Gutenberg sul vostro sito web WordPress.

Gutenberg: L’editor di contenuti principale di WordPress

L’editor Gutenberg è il cuore del framework di modifica dei contenuti di WordPress. La sua struttura a blocchi rende facile la costruzione di un sito webWordPress e di tutte le sue pagine, anche per i principianti.

Con questo editor, è possibile creare contenuti ricchi di contenuti multimediali in WordPress scegliendo i nuovi blocchi necessari. Poi, potete dimensionarli come desiderate e aggiungere gli elementi specifici che volete appaiano su ogni pagina.

Cosa sono i blocchi di Gutenberg?

In Gutenberg, ogni pagina o post è costituito da un insieme di elementi autonomi.

Questi elementi – o blocchi – vengono utilizzati per costruire pagine, post e quant’altro sul vostro sito web WordPress.

Il blocco più diffuso è il blocco paragrafo, seguito dai blocchi immagine e intestazione. Altri esempi di blocchi sono i titoli, il testo, i divisori, i widget e i video.

Come abbiamo detto in precedenza, è possibile accedere ai blocchi WP attraverso la Libreria dei blocchi. Potete trovarla facendo clic sul simbolo + in alto a sinistra nella barra degli strumenti di WordPress mentre modificate una pagina o un post.

Ma cosa succede se la libreria di WordPress non offre il tipo di blocco che state cercando? O un segnaposto che potreste aggiornare per soddisfare le vostre esigenze?

È qui che entrano in gioco i blocchi personalizzati.

Cosa sono i blocchi personalizzati di Gutenberg?

Gutenberg consente a chiunque di creare risorse gratuite. Quindi, se avete esperienza di codifica e di sviluppo web, potete creare blocchi personalizzati durante la creazione del vostro sito web.

I blocchi personalizzati offrono una flessibilità ancora maggiore e funzionalità specifiche di nicchia rispetto ai blocchi predefiniti.

Gli utenti costruiscono blocchi personalizzati per creare elementi di pagina unici.

I blocchi personalizzati di Gutenberg offrono molti vantaggi, tra cui:

• È possibile progettare elementi di WordPress visivamente accattivanti e ricchi di contenuti multimediali, adattati alle esigenze della vostra azienda.
• Aggiungono funzionalità uniche e avanzate al vostro sito web.
• Migliorano l’aspetto estetico delle pagine e aiutano la vostra azienda a distinguersi dalla massa.
• È sufficiente codificare i blocchi una sola volta. Dopodiché, è possibile utilizzarli in tutti i siti e le pagine.

Tuttavia, i blocchi personalizzati presentano alcune sfide. Innanzitutto, la loro realizzazione richiede conoscenze tecniche approfondite. Inoltre, sono necessarie alcune competenze specifiche di codifica e strumenti di sviluppo.

Come ottenere blocchi Gutenberg personalizzati per WordPress

Per ottenere i blocchi personalizzati di Gutenberg, è necessario costruirli da soli o acquistarli.

La creazione di blocchi personalizzati non è alla portata di tutti, ma questo non è un problema. È possibile acquistare blocchi Gutenberg personalizzati invece di costruirli da soli. Per farlo, è sufficiente trovare uno sviluppatore di alto livello di cui ci si fida e collaborare con lui per creare i blocchi ideali.

Se avete intenzione di creare questi blocchi da soli, ci sono alcuni aspetti da considerare prima di iniziare.

Cosa considerare prima di creare blocchi personalizzati

La creazione di un blocco personalizzato Gutenberg richiede tempo ed energia. Prima di iniziare il processo, dovreste assicurarvi di aver esaurito tutte le altre opzioni.

È possibile verificare che non ci siano altri approcci adatti esaminando attentamente la libreria dei blocchi predefiniti di Gutenberg. Assicuratevi che non ci siano blocchi esistenti che forniscano le funzioni di base o le specifiche di stile di cui avete bisogno.

Se avete stabilito che avete bisogno di un blocco personalizzato, prima di iniziare la costruzione del vostro blocco, delineatene le specifiche vitali. Pensate agli elementi estetici, alle impostazioni predefinite e alle caratteristiche principali. Considerate anche le specifiche della barra degli strumenti e altre caratteristiche stilistiche e funzionali fondamentali.

Cosa serve per costruire i blocchi personalizzati di Gutenberg

Una volta determinati gli aspetti più essenziali del vostro blocco, ci sono altri requisiti fondamentali che dovrete soddisfare prima di iniziare il processo.

Un sito web WordPress attivo è essenziale. Inoltre, è necessario avere almeno un po’ di esperienza con JavaScript e con gli strumenti di costruzione JavaScript, come Node.js.

È inoltre necessaria una conoscenza intermedia di HTML, CSS e PHP per creare i propri blocchi personalizzati.

Se non siete molto esperti in questo campo, non preoccupatevi. Potete risparmiare tempo e stress assumendo esperti di web design che vi aiutino a costruire i blocchi.

Come creare blocchi Gutenberg personalizzati in WordPress

Esistono due approcci accessibili alla costruzione dei blocchi personalizzati di Gutenberg. Si può installare un plugin facile da usare che semplifica il processo o costruirli da zero usando codice HTML/CSS o PHP.

Creare blocchi personalizzati con un plugin

Esistono diversi plugin WordPress per la creazione di blocchi che semplificano il processo di creazione di blocchi personalizzati Gutenberg per il vostro sito WordPress. Noi consigliamo di utilizzare Genesis Custom Blocks.

Per creare il primo blocco con questo plugin:

1. Installare i blocchi personalizzati Genesis

Per prima cosa, andate su Plugin > Aggiungi nuovo nella barra laterale sinistra della vostra dashboard di amministrazione e cercate Genesis nella directory dei plugin di WordPress. Installatelo e fate clic sul pulsante Attiva .

2. Creare un nuovo blocco

Quindi, spostarsi su Blocchi personalizzati > Aggiungi nuovo per creare un blocco.

3. Configurare le specifiche del blocco

Ora è possibile selezionare il nome di un blocco, quindi configurare e personalizzare le sue proprietà. Per favorire l’ottimizzazione dei motori di ricerca (SEO), aggiungere parole chiave pertinenti.

Quindi, aggiungere campi, come numeri, immagini e caselle di controllo, premendo il pulsante + . È necessario inserire altre specifiche, come l’etichetta del campo, la posizione del campo e il testo di aiuto. È inoltre possibile riordinare, modificare ed eliminare i campi.

4. Costruite il vostro modello.

Successivamente, è possibile costruire il modello con HTML e CSS o PHP, a seconda dell’output del blocco.

Se il blocco è configurato per HTML e CSS, è possibile utilizzare l’Editor di modelli del plugin, che si trova nella barra superiore. Qui è possibile personalizzare il blocco tramite le schede Markup (HTML) e CSS .

Se si desidera aggiungere PHP, è necessario utilizzare un editor di testo semplice per creare manualmente i file block.php e block.css.

5. Salvare e confermare il blocco

Assicurarsi di salvare il blocco facendo clic su Pubblica in alto a destra.

6. Aggiungete il blocco al vostro sito web

Infine, è possibile aggiungere il blocco al proprio sito web. Aprite o create un post o una pagina, quindi premete il + nella barra laterale sinistra della vostra dashboard per trovare e incorporare il blocco.

Poi, personalizzate il contenuto della pagina a vostro piacimento con altri blocchi, utilishortcode di WordPress e altri approcci accessibili che ottimizzano l’esperienza utente (UX) e le prestazioni del sito web.

Creazione manuale di blocchi personalizzati

In alternativa, è possibile codificare i blocchi personalizzati di Gutenberg da zero, seguendo questa procedura passo dopo passo:

1. Configurare l’ambiente di sviluppo di WordPress

Prima di tutto, installare Node.js e il gestore di pacchetti Node (npm). Si tratta di strumenti di costruzione di JavaScript che consentono di definire le funzioni di base dei blocchi. È possibile scaricare Node.js tramite il programma di installazione online e assicurarsi che npm sia attivato inserendo il comando npm-v nell’editor di codice.

Successivamente, è necessario installare Docker, un requisito per utilizzare lo strumento per sviluppatori di WordPress. Il sito web di Docker offre una semplice installazione con un solo clic.

Dopodiché, dovrete impostare l ‘ambiente di sviluppo e attivare il sito di staging. Potete configurare l’ambiente di sviluppo attraverso lo strumento predefinito di WordPress. Installatelo globalmente inserendo il comando npm -g install @wordpress/env.

2. Impostare il file del plugin di base (starter)

Prima di poter effettivamente creare il blocco personalizzato di Gutenberg, è necessario creare un plugin di blocco di base come riferimento. Fortunatamente, esistono alcuni approcci che consentono di evitare di completare manualmente questo passaggio.

Eseguire il comando /wp-content/plugins/ per navigare nella cartella dei plugin.

In questo caso, è possibile eseguire il comando npx @wordpress/create-block, che consente di accedere facilmente ai file PHP e JS e di modificarli.

Assicuratevi di aggiungere al comando il nome che volete usare per il vostro blocco iniziale. Si può usare qualcosa di semplice, come my-new-block, oppure essere creativi.

L’altra opzione è installare lo strumento create-guten-block ed eseguire il comando npx create-guten-block con il nome del blocco iniziale.

Questi processi creeranno un punto di partenza.

3. Configurare block.json

È necessario aggiungere un file block.json alla nuova cartella, quindi configurarlo inserendo metadati e selezioni per varie impostazioni. Esempi di impostazioni sono gli attributi del blocco e altre specifiche regolabili, come laversione dell’interfaccia di pianificazione dell’applicazione(API), il titolo e la categoria.

Ecco un esempio di come potrebbe apparire una parte del codice block.json:

Il file block.json consente al plugin di base del blocco di apparire nella directory dei plugin, facilita la registrazione del blocco in seguito e contribuisce alle prestazioni del sito web.

4. Configurare altre specifiche

Successivamente, si determineranno e si inseriranno le specifiche riguardanti:

• Stili.
• Dipendenze e file delle risorse.
• Attributi.
• Sceneggiature.
• Etichette e parole chiave.

È possibile navigare nel filepackage.json per configurare le proprietà, gli stili e gli script JavaScript. Attraverso il file block.json, si possono definire gli attributi con la funzione setAttributes . Si possono anche modificare le impostazioni dei blocchi con etichette e parole chiave.

È possibile aggiungere altre specifiche di frontend e backend e modificare varie funzioni. Per esempio, si dovrebbe creare un file di risorse per aggiungere le dipendenze. È possibile farlo inserendo il comando npm run build per il file JavaScript XML (JSX) o il seguente codice PHP:

5. Registrazione del blocco

Una volta creato il plugin del blocco, utilizzare la funzione register_block_type. Questa tecnica di registrazione dei blocchi estrae automaticamente i metadati determinati in precedenza dal file block.json.

6. Salvare e confermare il blocco

Il passo finale consiste nel salvare tutti i file e testare il nuovo blocco.

È possibile confermarne la funzionalità aggiungendo il nuovo blocco personalizzato Gutenberg al proprio sito web. Se lo si inserisce e viene visualizzato il messaggio “Hello World”, è segno che il processo è stato completato correttamente.

Se in futuro volete usare lo stesso blocco in più layout o siti web, provate a usarlo in un modello di blocco Gutenberg.

Consultate la pagina “Impara” di WordPress per ulteriori informazioni e tutorial su come configurare il vostro sito web.

Riflessioni finali: Come creare blocchi personalizzati Gutenberg – una guida Bluehost

La creazione di blocchi personalizzati di Gutenberg per WordPress è una soluzione utile se avete bisogno di elementi del sito web non offerti dai blocchi predefiniti.

È possibile creare i propri blocchi Gutenberg con un plugin o attraverso la codifica manuale. Tuttavia, entrambi i processi richiedono una certa competenza tecnica.

Se non volete creare da soli dei blocchi personalizzati, provate i servizi di progettazione di siti web di Bluehost. Il nostro team di esperti impegnati è qui per aiutarvi a personalizzare e coltivare il sito web perfetto.

Se desiderate progettare il vostro sito web da soli, ma volete una guida esperta per la modifica del sito durante il percorso, offriamo anche il Pro Design con assistenza dal vivo. I nostri esperti possono aiutarvi a scegliere e personalizzare i temi e i plugin perfetti e a ottimizzare il vostro sito web.

Poi, una volta che il vostro sito web è pronto per essere operativo, contattate noi di Bluehost per ottenere servizi di hosting WordPress ad alta velocità, di alta qualità e ad alte prestazioni.