Vuoi creare un WordPress Plugin semplice blocco Gutenberg?
Non amiamo tutti WordPress? La piattaforma ha avuto un enorme successo sin dal suo inizio, con gli sviluppatori che aggiungono costantemente nuove funzionalità. Una delle caratteristiche distintive degli ultimi tempi è l'editor di blocchi di WordPress, nome in codice Gutenberg.
Gutenberg offre agli utenti di WordPress un nuovo modo entusiasmante per pubblicare contenuti e personalizzare il proprio sito web. È incredibilmente facile da usare, il che è un'ottima notizia sia per i principianti che per gli sviluppatori. Se stai utilizzando l'ultima versione di WordPress, hai già familiarità con l'editor di blocchi e il concetto di blocchi.
Per impostazione predefinita, l'editor di blocchi di WordPress viene fornito con alcuni blocchi che ti consentono di includere testo, immagini, citazioni, audio, video, incorporamenti, ecc. Oltre a ciò, ci sono un sacco di componenti aggiuntivi di Gutenberg che ti consentono di estendere l'editor senza interrompere un sudore.
Tuttavia, potresti avere un'esigenza specifica che ti richiede di creare i tuoi blocchi personalizzati. In questo articolo, ti mostreremo in alcuni paragrafi come creare blocchi Gutenberg personalizzati per soddisfare le tue esigenze specifiche.
Senza ulteriori indugi, iniziamo perché c'è molto da imparare.
Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog
Quindi torniamo al perché siamo qui.
Cosa sono i blocchi, comunque?
I blocchi trattano paragrafi, intestazioni, elementi multimediali e incorporamenti come componenti che, una volta messi insieme, costituiscono il contenuto archiviato nel database di WordPress, sostituendo il tradizionale concetto di testo con elementi multimediali e incorporamenti.
In passato, gli utenti di WordPress facevano affidamento su testo e shortcode per aggiungere contenuti. Gutenberg usa blocchi. Il nuovo editor consente di utilizzare le unità di blocco per creare layout ricchi e flessibili, facili da gestire. Attualmente, puoi utilizzare l'editor di blocchi per post e pagine, ma ci sono piani attivi da prendere supportare la modifica completa del sito in futuro.
Lavorare con i blocchi rende la creazione di contenuti in WordPress piuttosto rinfrescante. Inoltre, molti plug-in esistenti supportano il nuovo editor e sono dotati di blocchi pronti per l'uso che semplificano l'aggiunta di contenuti da detti plug-in. L'editor ti consente di trascinare e rilasciare i blocchi su una pagina in modo da poter premere il pulsante di pubblicazione più velocemente.
Proprio come un generatore di pagine integrato direttamente in WordPress.
Se hai familiarità con il costruttori di pagine come Elementor, probabilmente hai familiarità con il concetto di creazione di pagine con trascinamento della selezione. Gutenberg è un tentativo di integrare completamente la creazione di siti Web drag-and-drop nel core di WordPress.
Andiamo quindi alla parte migliore dell'articolo di oggi. Impariamo a creare un semplice blocco. Puoi farlo manualmente o usando plugin come Blocchi personalizzati Genesi (ex BlockLab), Blocchi pigri ou ACF. La creazione di blocchi personalizzati è un po' tecnica, quindi ai fini dell'articolo di oggi utilizzeremo un plug-in.
Come creare un blocco personalizzato (usando genesis Custom Blocks)
È più facile seguire la strada del plugin perché la creazione di blocchi Gutenberg personalizzati da zero richiede una buona conoscenza di HTML, CSS, PHP e, soprattutto, javaScript. Dovrai anche capire React.
Per la prossima sezione, utilizzeremo i Genesis Custom Blocks. La sua versione gratuita è disponibile nel repository ufficiale di WordPress, il che significa che possiamo installarla nella dashboard di amministrazione di WordPress.
Installa i blocchi personalizzati Genesis
Accedi alla dashboard dell'amministratore di WordPress e vai a Estensioni> Aggiungi, come mostrato di seguito.
Quindi inserisci " Blocchi personalizzati Genesi nella casella di ricerca per parola chiave e clic sul pulsante installare ora
Dopo di che, attivare il plugin per iniziare
Quindi, creiamo un nuovo blocco personalizzato. A scopo illustrativo, creiamo un invito all'azione personalizzato (CTA) che aggiungeremo alla fine di ogni articolo che pubblichiamo. La parte migliore è che puoi riutilizzare i blocchi per evitare di creare gli stessi blocchi più e più volte.
Nel menu di amministrazione di WordPress, vai a Blocchi personalizzati > Aggiungi nuovo, come sottolineiamo.
Questo ti porterà alla pagina successiva dove troverai tutte le opzioni per creare un blocco personalizzato (nel nostro caso, un CTA):
Ecco alcune parole per spiegare ciò che vedi nello screenshot qui sopra. Partendo dall'alto, ce l'hai.
Area di modifica principale:
- Costruttore – Probabilmente trascorrerai molto tempo qui a progettare il tuo blocco personalizzato. il Constructeur ti consente di aggiungere titolo, campi, slug, parole chiave, categoria e visualizzare in anteprima il tuo blocco personalizzato. Imparerai come aggiungere campi.
- Editor di modelli – Dopo aver progettato il tuo blocco personalizzato (ovvero aggiungendo vari campi), dovrai creare un modello di blocco (leggi, aggiungi del codice) in l'editor del modello. Impareremo di più quando progettiamo il CTA.
- Anteprima dell'editor – Ti consente di visualizzare in anteprima il blocco personalizzato nell'editor di blocchi di WordPress.
- Anteprima front-end – Qui puoi vedere in anteprima come apparirà il blocco personalizzato sul tuo sito web.
- EditorField – Mostrerà i campi nell'area di modifica principale di un post o di una pagina (sai, proprio come vedi i tuoi normali post nell'editor di WordPress)
- Ispettore Campo – Visualizza il campo nella barra laterale destra sotto l'Ispettore blocco.
Opzioni della barra laterale
- Lumaca – Viene compilato automaticamente in base al titolo che dai al tuo blocco personalizzato. Questo è importante quando si crea il modello a blocchi.
- Icona – Questa opzione ti consente di aggiungere un'icona al tuo blocco personalizzato.
- Categoria – Ti permette di assegnare una categoria al tuo blocco personalizzato. Puoi classificare il tuo blocco personalizzato utilizzando una delle categorie integrate oppure puoi creare una categoria completamente nuova.
- Parole – Aggiungi un massimo di tre parole chiave correlate al tuo blocco personalizzato in modo che le persone possano trovarlo facilmente nel selettore blocchi.
- Apri i campi di blocco in modo modale invece di renderizzare sul posto – Abilita se desideri aprire i campi in modalità modale. Questo è utile se hai un blocco personalizzato con molti campi.
- Tipi post – Seleziona le caselle per consentire la visualizzazione del tuo blocco personalizzato su ogni tipo di post. Ad esempio, se deselezioni Post, il blocco non apparirà su nessun post.
Crea un blocco personalizzato
Ora che hai una migliore comprensione dell'interfaccia utente e di cosa fa ogni parte, mettiamoci al lavoro.
in Costruttore- Costruttore –, assegna al tuo blocco personalizzato un titolo appropriato. Sceglieremo CTA per questo come mostrato di seguito.
Prima di aggiungere nuovi campi, aggiungiamo un'icona, parole chiave e scegliamo una categoria per il blocco personalizzato come mostrato di seguito.
A questo, aggiungiamo alcuni campi al nostro blocco personalizzato. Per il nostro blocco CTA di esempio, aggiungeremo solo tre campi nel seguente ordine: un'immagine, del testo e un campo file che consente alle persone di scaricare un ebook.
Leggi anche: 5 WooCommerce plugin per modificare i tuoi prodotti alla rinfusa
Aggiunta di campi di blocco
Nella sezione Campi dell'editor, Cliquez sur l'icona Più (+). per aggiungere il primo campo come mostrato di seguito.
Successivamente, aggiungiamo un campo immagine. Nella barra laterale, imposta il Tipo di campo attivato Immagine e impostare le altre opzioni. Inoltre, considera lo slug poiché lo useremo durante la creazione del modello a blocchi.
Successivamente, aggiungi i campi di testo e file allo stesso modo.
Passa a Editor di modelli > Marcatura.
Qui progetteremo come apparirà il nostro blocco personalizzato sul tuo sito web. L'editor del modello accetta HTML, CSS e field slug (che devi inserire tra 2 parentesi quadre). Se è necessario utilizzare il linguaggio PHP, è possibile creare il modello utilizzando Metodo di modellazione PHP
Non preoccuparti, è facile.
In l'editor del modellosotto scheda di markup, aggiungi il seguente codice:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Mentre scrivi il tuo codice, lo noterai l'editor del modello Completa automaticamente gli slug di campo (ad es. {{image-field}} ) per te.
Allora vai alla sezione CSS per aggiungere stili semplici con il seguente codice:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Puoi personalizzare questi stili come preferisci,
Fare clic pubblicare :
Per vedere il tuo nuovo blocco personalizzato in azione, torna alla dashboard di amministrazione di WordPress e crea un post come fai normalmente, fai clic su Altro (+) per aggiungere un nuovo blocco e scegliere il tuo nuovo blocco personalizzato, come evidenziato di seguito.
Quindi, compila il tuo blocco personalizzato come desideri e pubblica il tuo messaggio:
Ora, se controlliamo il nostro nuovo blocco CTA personalizzato sul front-end, questo è ciò che vediamo.
Il nostro CTA personalizzato è proprio lì! Per favore, non preoccuparti delle nostre capacità di progettazione: ovviamente, in uno scenario di vita reale, trascorrerai un po' più di tempo a personalizzare il tuo blocco. Ma speriamo che tu abbia imparato qualcosa qui.
Altre risorse consigliate
Vi invitiamo inoltre a consultare il risorse di seguito per approfondire l'inizio e il controllo del tuo sito Web e blog.
- 10 plugin di affiliazione per WordPress per creare un programma
- Come aggiungere più colonne in WordPress
- Come aggiungere più colonne in WordPress
- Utilizzando diversi background WordPress
- Elementor: come creare un'animazione al passaggio del mouse
Conclusione
Costruire blocchi personalizzati non è un compito facile. Ma con plugin di WordPress come Genesis Custom Blocks e Lazy Blocks, tra gli altri, che tu sia un principiante o meno, riuscirai a crearli. Dal più semplice al complesso a seconda delle tue esigenze.
Questo è tutto per questo articolo che ti mostra come aggiungere caratteri personalizzati a un sito Web WordPress. Ti invitiamo a provare. Se hai dubbi o suggerimenti, faccelo sapere all'interno commentaires.
Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
