Come Creare un Blocco WordPress Personalizzato (Modo Facile)

I blocchi predefiniti di WordPress sono ottimi per contenuti semplici, ma possono rivelarsi insufficienti quando hai bisogno di layout personalizzati, elementi interattivi o design su misura.

È qui che entrano in gioco i blocchi personalizzati. Ti danno il pieno controllo su come il tuo contenuto appare e funziona, senza fare affidamento su plugin pesanti o soluzioni alternative.

La parte migliore? Creare blocchi personalizzati è più accessibile di quanto la maggior parte delle persone pensi. Con gli strumenti giusti e un processo chiaro, non è necessario essere uno sviluppatore per creare blocchi che soddisfino le esigenze uniche del tuo sito.

Nel corso degli anni, abbiamo utilizzato blocchi personalizzati per ottimizzare i flussi di lavoro e fornire siti WordPress completamente su misura per i clienti, e ora ti mostreremo come fare lo stesso.

In questa guida, imparerai il processo passo dopo passo per creare blocchi WordPress personalizzati, anche se non sei un esperto di codifica.

Perché creare un blocco WordPress personalizzato?

WordPress è dotato di un intuitivo editor a blocchi che ti consente di creare facilmente i tuoi post e pagine aggiungendo elementi di contenuto e layout come blocchi.

Per impostazione predefinita, WordPress include diversi blocchi di uso comune. Anche i plugin di WordPress possono aggiungere i propri blocchi che puoi utilizzare.

Tuttavia, a volte potresti voler creare un blocco personalizzato per fare qualcosa di specifico sul tuo sito WordPress perché non riesci a trovare un plugin per blocchi che funzioni per te.

Con i blocchi personalizzati, puoi aggiungere funzionalità e caratteristiche uniche al tuo sito web che potrebbero non essere disponibili nei blocchi predefiniti. Questo può aiutare ad automatizzare i processi o a rendere la creazione di contenuti per il tuo blog WordPress più efficiente.

Ad esempio, potresti creare un blocco personalizzato per visualizzare le testimonianze e poi inserire e gestire facilmente quel blocco senza alcuna conoscenza di codifica.

Detto questo, vediamo come creare facilmente un blocco completamente personalizzato in WordPress.

Per questo tutorial, ti mostreremo due metodi per creare un blocco personalizzato. Puoi utilizzare i collegamenti rapidi qui sotto per passare al metodo di tua scelta:

• Metodo 1: Crea blocchi personalizzati per WordPress utilizzando WPCode (Consigliato)
• Metodo 2: Crea blocchi personalizzati per WordPress utilizzando il plugin Genesis Custom Code (Gratuito)
• Bonus: Crea modelli personalizzati per i tuoi post

Metodo 1: Crea blocchi personalizzati per WordPress utilizzando WPCode (Consigliato)

Se sei nuovo a WordPress e la codifica ti sembra intimidatoria, WPCode è una scelta fantastica per te.

Come parte del nostro kit di strumenti, abbiamo trovato WPCode il modo più semplice per i principianti e più sicuro per aggiungere snippet di codice personalizzati.

Abbiamo anche una recensione dettagliata di WPCode che potrebbe esserti utile per comprenderne il pieno potenziale.

Una delle sue caratteristiche distintive sono gli snippet di blocco, che ti permettono di creare blocchi personalizzati senza sforzo.

Innanzitutto, devi installare e attivare il plugin WPCode. Per istruzioni dettagliate, potresti voler consultare la nostra guida per principianti su come installare un plugin WordPress.

Dopo l'attivazione, vai alla pagina Snippet di codice » + Aggiungi snippet dalla barra laterale di amministrazione di WordPress.

Una volta lì, fai clic sul pulsante ‘Usa Snippet’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo Snippet)’.

Questo ti porterà alla pagina ‘Crea Snippet Personalizzato’, dove puoi iniziare digitando un nome per il nuovo blocco che stai per creare.

Una volta fatto ciò, seleziona semplicemente l'opzione ‘Snippet Blocchi’ dal menu a discesa ‘Tipo di Codice’ nell'angolo destro dello schermo.

Questo visualizzerà il pulsante ‘Modifica con Editor Blocchi’ nella casella ‘Anteprima Codice’.

Fai semplicemente clic su questo pulsante per avviare l'editor blocchi.

Ora, apparirà un prompt sullo schermo che ti chiederà di salvare lo snippet di codice per caricarlo nell'editor blocchi. Fai semplicemente clic sul pulsante ‘Sì’ per procedere.

Ora che sei nell'editor blocchi, puoi facilmente creare un blocco personalizzato utilizzando i blocchi predefiniti disponibili nel menu blocchi.

Per questo tutorial, creeremo un blocco personalizzato per aggiungere testimonianze al tuo sito.

Innanzitutto, fai clic sul pulsante ‘Aggiungi blocco’ (+) nell'angolo in alto a sinistra dello schermo per aprire il menu dei blocchi.

Da qui, trascina e rilascia il blocco Titolo nell'interfaccia dell'editor di blocchi e chiamalo ‘Testimonianze’.

Successivamente, puoi utilizzare i blocchi paragrafo, citazione in evidenza o citazione per aggiungere testimonianze di diversi clienti sul tuo sito web.

Puoi persino personalizzare ulteriormente il tuo blocco testimonianze utilizzando i blocchi immagine, logo del sito, icone social o slogan del sito.

Puoi anche configurare le dimensioni, il colore del testo o il colore di sfondo delle tue testimonianze dal pannello blocchi sul lato destro dello schermo.

Una volta terminato, non dimenticare di fare clic sul pulsante ‘Aggiorna’ in alto per salvare le impostazioni del tuo blocco personalizzato.

Successivamente, fai semplicemente clic sul pulsante ‘Torna allo snippet WPCode’ in alto per essere reindirizzato alla pagina dell'editor di codice.

Una volta lì, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento automatico’.

Dopo aver attivato lo snippet di codice, il tuo blocco personalizzato verrà aggiunto automaticamente alla posizione scelta per inserirlo sul tuo sito web.

Successivamente, devi configurare la posizione del blocco personalizzato che hai creato.

Per fare ciò, fai semplicemente clic sul menu a discesa ‘Posizione’ nella sezione ‘Inserimento’ e passa alla scheda ‘Specifico per pagina’. Da qui, puoi ora scegliere l'opzione ‘Inserisci dopo il post’ se desideri mostrare il tuo blocco Testimonianze dopo la fine del post.

Una volta fatto ciò, puoi anche configurare il numero di post dopo i quali dovrebbe apparire il blocco testimonianze. Ad esempio, se digiti il numero 3, il blocco Testimonianze apparirà in ogni terzo post.

Puoi anche visualizzare il blocco tra diversi paragrafi, dopo gli estratti dei post e altro ancora.

Tuttavia, se non trovi la posizione del blocco che stai cercando, puoi anche creare la tua regola di logica condizionale per incorporare il blocco personalizzato nel tuo posto preferito.

Per fare ciò, scorri verso il basso fino alla sezione ‘Logica condizionale intelligente’ e attiva l'interruttore ‘Abilita logica’.

Successivamente, devi fare clic sul pulsante ‘Aggiungi nuovo gruppo’ per iniziare a creare una regola di logica condizionale.

Ad esempio, se desideri visualizzare il blocco personalizzato che hai creato solo su una pagina o un post specifico, dovrai selezionare l'opzione ‘URL pagina’ dal menu a discesa sulla destra.

Dopodiché, puoi lasciare il menu a discesa al centro così com'è e quindi aggiungere l'URL della pagina/post di WordPress di tua scelta nel campo a sinistra.

Puoi anche configurare la tua regola di logica condizionale per visualizzare il blocco personalizzato solo su una pagina specifica, utenti connessi, pagine del negozio WooCommerce, pagine di Easy Digital Downloads, date specifiche e altro ancora.

Una volta terminato, scorri fino in cima alla pagina e cambia l'interruttore ‘Inattivo’ in ‘Attivo’. Quindi, fai clic sul pulsante ‘Aggiorna’ per salvare le tue impostazioni.

Il tuo blocco personalizzato verrà ora aggiunto automaticamente a tutte le posizioni che hai selezionato per lo snippet del blocco.

Tieni presente che il blocco personalizzato che hai creato non verrà visualizzato come opzione nel menu dei blocchi dell'editor Gutenberg di WordPress.

Dovrai configurare le impostazioni del blocco visitando la pagina Snippet di codice dalla dashboard di WordPress e facendo clic sul link ‘Modifica’ sotto lo snippet del blocco.

Questo aprirà la pagina ‘Modifica snippet’, dove puoi personalizzare il blocco o modificarne facilmente la posizione e le regole di logica condizionale.

Ora, visita il tuo sito web per vedere il blocco personalizzato che hai creato in azione.

Ecco il nostro blocco personalizzato Testimonianze sul nostro sito demo.

Metodo 2: Crea blocchi personalizzati per WordPress utilizzando il plugin Genesis Custom Code (Gratuito)

Se sei un utente intermedio e stai cercando una soluzione gratuita, allora questo metodo è per te. Tieni presente che dovrai avere familiarità con HTML e CSS per seguire le istruzioni di questo metodo.

Innanzitutto, devi installare e attivare il plugin Genesis Custom Blocks. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Ai fini di questo tutorial, creeremo un blocco Testimonianze.

Passaggio 1: Crea un blocco personalizzato per WordPress

Innanzitutto, vai alla pagina Blocchi personalizzati » Aggiungi nuovo dalla barra laterale di amministrazione di WordPress.

Questo ti porterà alla pagina dell'Editor di blocchi, dove creerai un blocco personalizzato per il tuo sito WordPress.

Da qui, puoi iniziare dando un nome al tuo blocco.

Ora, sul lato destro della pagina, troverai le proprietà del blocco che puoi configurare.

Qui puoi scegliere un'icona per il tuo blocco, aggiungere una categoria e aggiungere parole chiave.

Lo slug verrà precompilato in base al nome del tuo blocco, quindi non devi cambiarlo. Tuttavia, puoi scrivere fino a 3 parole chiave nel campo di testo 'Parole chiave' in modo che il tuo blocco possa essere trovato facilmente.

Ora è il momento di aggiungere alcuni campi al tuo blocco. Puoi aggiungere diversi tipi di campi come testo, numeri, indirizzi email, URL, colori, immagini, caselle di controllo, pulsanti di opzione e altro ancora.

Aggiungeremo tre campi al nostro blocco personalizzato Testimonianze: un campo immagine per la foto del recensore, una casella di testo per il nome del recensore e un campo area di testo per il testo della testimonianza.

Fai semplicemente clic sul pulsante '+' per inserire il primo campo.

Questo aprirà alcune opzioni per il campo nella colonna di destra. Diamo un'occhiata a ciascuna di esse.

• Etichetta campo: Puoi usare qualsiasi nome di tua scelta per l'etichetta del campo. Chiamiamo il nostro primo campo 'Immagine Recensore'.
• Nome campo: Il nome del campo verrà generato automaticamente in base all'etichetta del campo. Utilizzeremo questo nome di campo nel passaggio successivo, quindi assicurati che sia univoco per ogni campo.
• Tipo campo: Qui puoi selezionare il tipo di campo. Vogliamo che il nostro primo campo sia un'immagine, quindi sceglieremo 'Immagine' dal menu a discesa.
• Posizione campo: Puoi decidere se aggiungere il campo all'editor o all'ispettore.
• Testo di aiuto: Puoi aggiungere del testo per descrivere il campo. Questo non è obbligatorio se stai creando questo blocco per uso personale, ma può essere utile per blog multi-autore.

Potresti anche vedere alcune opzioni aggiuntive in base al tipo di campo scelto. Ad esempio, se selezioni un campo di testo, otterrai opzioni aggiuntive come testo segnaposto e limite di caratteri.

Seguendo il processo sopra descritto, aggiungiamo altri 2 campi per il nostro blocco Testimonianze facendo clic sul pulsante ‘+’.

Nel caso in cui desideri riordinare i campi, puoi farlo trascinandoli utilizzando la maniglia sul lato sinistro dell'etichetta di ciascun campo. Per modificare o eliminare un campo specifico, devi fare clic sull'etichetta del campo e modificare le opzioni nella colonna di destra.

Una volta terminato, fai semplicemente clic sul pulsante ‘Pubblica’ sul lato destro della pagina per salvare il tuo blocco Gutenberg personalizzato.

Passaggio 2: Crea un modello di blocco personalizzato

Sebbene tu abbia creato il blocco WordPress personalizzato nell'ultimo passaggio, non funzionerà finché non creerai un modello di blocco.

Il template del blocco determina esattamente come le informazioni inserite nel blocco vengono visualizzate sul tuo sito web. Puoi decidere come appare utilizzando HTML e CSS, o anche codice PHP se hai bisogno di eseguire funzioni o fare altre cose avanzate con i dati.

Ci sono due modi per creare un template di blocco. Se l'output del tuo blocco è in HTML/CSS, puoi utilizzare l'editor di template integrato.

D'altra parte, se l'output del tuo blocco richiede l'esecuzione di PHP in background, dovrai creare manualmente un file di template di blocco e caricarlo nella cartella del tuo tema.

Metodo 1: Utilizzo dell'editor di template integrato

Nella schermata di modifica del blocco personalizzato, passa semplicemente alla scheda 'Editor template' e inserisci il tuo HTML nella scheda markup.

Puoi scrivere il tuo HTML e utilizzare doppie parentesi graffe per inserire i valori dei campi del blocco.

Ad esempio, abbiamo utilizzato il seguente HTML per il blocco di esempio che abbiamo creato sopra:

<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>

Successivamente, è sufficiente passare alla scheda 'CSS' per stilizzare il markup di output del tuo blocco.

Ecco il CSS di esempio che abbiamo utilizzato per il nostro blocco personalizzato:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Metodo 2: Caricamento manuale dei modelli di blocco personalizzati

Questo metodo è consigliato se è necessario utilizzare PHP per interagire con i campi del tuo blocco personalizzato. Dovrai caricare il modello dell'editor direttamente nel tuo tema.

Innanzitutto, devi creare una cartella sul tuo computer e nominarla utilizzando lo slug del nome del tuo blocco personalizzato.

Ad esempio, il nostro blocco demo si chiama Testimonials, quindi creeremo una cartella testimonials.

Successivamente, devi creare un file chiamato block.php utilizzando un editor di testo normale. Qui è dove inserirai la parte HTML / PHP del tuo modello di blocco.

Ecco il modello di esempio che abbiamo utilizzato per il nostro esempio:

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Ora, potresti aver notato come abbiamo utilizzato la funzione block_field() per recuperare i dati da un campo del blocco.

Abbiamo racchiuso i nostri campi del blocco nell'HTML che vogliamo utilizzare per visualizzare il blocco. Abbiamo anche aggiunto classi CSS in modo da poter stilizzare correttamente il blocco.

Non dimenticare di salvare il file all'interno della cartella che hai creato in precedenza.

Successivamente, devi creare un altro file utilizzando l'editor di testo normale sul tuo computer e salvarlo come block.css all'interno della cartella che hai creato.

Utilizzeremo questo file per aggiungere il CSS necessario per stilizzare la visualizzazione del nostro blocco. Ecco il CSS di esempio che abbiamo utilizzato per questo esempio:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Non dimenticare di salvare le modifiche.

La tua cartella del modello di blocco conterrà ora due file di modello al suo interno.

Dopodiché, devi caricare la tua cartella di blocchi sul tuo sito web utilizzando un client FTP o l'app File Manager all'interno del pannello di controllo del tuo hosting WordPress.

Una volta connesso, naviga nella cartella /wp-content/themes/il-tuo-tema-corrente/.

Se la cartella del tuo tema non ha una cartella chiamata 'blocks', allora procedi e crea una nuova directory e chiamala blocks.

Successivamente, devi caricare la cartella che hai creato sul tuo computer nella cartella blocks.

Tutto qui! Hai creato con successo file di template manuali per il tuo blocco personalizzato.

Passaggio 3: Anteprima del tuo blocco personalizzato

Prima di poter visualizzare in anteprima il tuo HTML/CSS, dovrai fornire alcuni dati di test che possono essere utilizzati per visualizzare un output di esempio.

All'interno dell'area di amministrazione di WordPress, modifica il tuo blocco e passa alla scheda 'Anteprima editor'. Qui, devi inserire alcuni dati fittizi.

Questi dati non faranno parte del tuo blocco personalizzato e verranno utilizzati solo per visualizzare in anteprima le modifiche apportate utilizzando HTML e CSS.

Una volta aggiunti i dati, ricorda di fare clic sul pulsante 'Aggiorna' per salvare le modifiche.

Se non fai clic sul pulsante 'Aggiorna', non sarai in grado di vedere l'anteprima del tuo blocco personalizzato.

Ora puoi passare alla scheda 'Anteprima front-end' per vedere come apparirà il tuo blocco sul front-end del tuo sito web WordPress.

Se tutto ti sembra a posto, puoi aggiornare nuovamente il tuo blocco per salvare eventuali modifiche non salvate.

Passaggio 4: Utilizzo del tuo blocco personalizzato in WordPress

Ora puoi utilizzare il tuo blocco personalizzato in WordPress come faresti con qualsiasi altro blocco.

Modifica semplicemente qualsiasi post o pagina in cui desideri utilizzare questo blocco. Quindi, fai clic sul pulsante ‘Aggiungi blocco’ (+) nell'angolo in alto a sinistra per aprire il menu dei blocchi.

Qui, utilizza la funzione di ricerca per trovare il tuo blocco digitando il suo nome o parole chiave. Quindi aggiungilo alla pagina o al post.

Dopo aver inserito il blocco personalizzato nell'area dei contenuti, vedrai i campi del blocco che hai creato in precedenza.

Puoi compilare i campi del blocco secondo necessità.

Mentre ti sposti dal blocco WordPress personalizzato a un altro, l'editor mostrerà automaticamente un'anteprima live del tuo blocco.

Ora puoi salvare il tuo post e la tua pagina e visualizzarli in anteprima per vedere il tuo blocco personalizzato in azione sul tuo sito web.

Ecco come appare il blocco Testimonianze sul nostro sito di prova.

Bonus: Crea modelli personalizzati per i tuoi post

Oltre a creare blocchi personalizzati, puoi aggiungere modelli personalizzati per i post del blog o le pagine del tuo sito web.

Un modello è un layout che puoi aggiungere al tuo post per farlo apparire diverso dalle altre pagine e contenuti. Questo può rendere i tuoi post più coinvolgenti e visivamente accattivanti e può aiutare a generare più lead.

Puoi facilmente creare un modello per tutti i tuoi post creando un blocco Gruppo riutilizzabile.

Innanzitutto, dovrai fare clic sul pulsante ‘Aggiungi blocco’ (+) per aggiungere il blocco Gruppo al post. Quindi, puoi aggiungere qualsiasi blocco all'interno del gruppo, inclusi intestazioni, media e testo, immagini di copertina e altro ancora.

Una volta creato il modello di post, fai clic sul menu a tre punti nella barra degli strumenti del blocco in alto. Quindi, fai clic sul pulsante ‘Crea modello’.

Dopodiché, il tuo modello di post verrà salvato come blocco riutilizzabile. Puoi accedervi e aggiungerlo a qualsiasi post aprendo il menu dei blocchi (+) e passando alla scheda ‘Modelli’.

Tuttavia, tieni presente che questo metodo di creazione di modelli di post personalizzati offre funzionalità limitate. Per creare un modello personalizzato più bello senza alcuna codifica, puoi utilizzare SeedProd, che è il miglior costruttore di pagine sul mercato.

Per maggiori dettagli, consulta il nostro tutorial su come creare modelli di post singoli personalizzati in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come creare facilmente blocchi Gutenberg personalizzati per il tuo sito web WordPress. Potresti anche voler consultare la nostra guida su come aggiungere una checklist per i post del blog nell'editor di WordPress e consultare i nostri suggerimenti essenziali per l'utilizzo degli shortcode sul tuo sito web.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.