WordPress come CMS ha un set di funzionalità incredibilmente solido. I plugin e i widget attirano le persone sulla piattaforma, ma una volta dentro, il vero potere viene dall’editor di WordPress stesso. Indipendentemente da quale sia il tuo obiettivo con la piattaforma, utilizzerai l’editor di articoli e pagine WordPress in grande stile.

In questo post vogliamo mostrarti come utilizzare l’editor di WordPress al massimo in modo che i tuoi contenuti brillino.

Cos’è l’editor di WordPress?

Tecnicamente, puoi scegliere tra tre diversi editor WordPress. Con il rilascio di WordPress 5.0, l’editor è passato dal vecchio editor predefinito TinyMCE al nuovo editor a blocchi di oggi. In mezzo a tale modifica, è stato rilasciato il plugin dell’editor Gutenberg come bridge per il beta testing di nuove funzionalità dell’editor a blocchi prima di essere inserito nel core di WordPress.

Il nuovo editor a blocchi è quello predefinito in WordPress a partire dalla versione 5.0 ma puoi scegliere di usare quello dei tre che desideri. Puoi installare il plugin Classic Editor per utilizzare l’editor classico di WordPress, il plugin Gutenberg per avere le funzionalità più recenti (sebbene potenzialmente instabili) nel tuo editor, oppure puoi utilizzare l’editor WordPress a Blocchi predefinito.

Le basi dell’editor WordPress

Ogni volta che crei una pagina o un post (o un custom post type), utilizzi l’Editor a blocchi. Quando lo apri per la prima volta ti viene presentato un tutorial modale da dove puoi imparare le basi seguendo le 4 slide che offre. Chiudilo e puoi vedere l’editor di base.

Popup di benvenuto dell'editor a blocchi di WordPress Gutenberg

L’editor a blocchi di WordPress è composto da 5 elementi. Altri possono essere aggiunti tramite plugin. Questi cinque elementi forniscono la funzionalità di base con cui lavorerai tutti i giorni.

Elementi di base dell'editor WordPress
  1. Titolo – Qualunque cosa tu inserisca qui verrà visualizzata come tag H1 primario del post / pagina.
  2. Area blocchi / contenuti : questa è l’area in cui verranno aggiunti i vari blocchi che compongono il contenuto del post o della pagina.
  3. Pulsante Aggiungi blocco : ogni volta che vedi un + in un cerchio, puoi fare clic su di esso per aggiungere un nuovo blocco. Apparirà un menu a discesa, dal quale potrai scegliere il tipo di blocco che vuoi inserire. Funzionano tutti esattamente allo stesso modo, quindi sia che si faccia clic a destra di un blocco, sotto un blocco o nell’angolo in alto dello schermo, otterrai le stesse opzioni.
  4. Scheda Opzioni documento : in questa scheda troverai di tutto, dalle categorie, tag, permalink, attivazione / disattivazione commenti e altro. I plugin potrebbero aggiungere opzioni qui, ma si applicano sempre alla pagina o al post stesso.
  5. Scheda Opzioni blocco : questa scheda gestisce le opzioni per qualsiasi blocco evidenziato. Se fai clic in un blocco di paragrafo, modificherai le opzioni per quel singolo blocco. Nessun altro blocco, né il documento stesso cambierà.

Di seguito, ti guideremo attraverso le specifiche di queste aree e su come utilizzarle per creare contenuti nel miglior modo possibile.

Cosa sono i blocchi dell’editor WordPress?

Abbiamo già menzionato i blocchi in questo post, ma cosa sono? Un blocco è un singolo elemento personalizzabile di una pagina o di un post. Può essere un singolo paragrafo, un elenco, un’immagine o una galleria. Questi blocchi possono essere spostati e regolati a piacere, personalizzati individualmente e offrono un controllo granulare dei contenuti in un modo che un editor WYSIWYG non ha.

esempi di blocchi dell'editor WordPress

Come puoi vedere dallo screenshot sopra, ogni elemento della pagina è contenuto nel suo blocco. Puoi vedere l’elenco completo dei blocchi nella documentazione di supporto WordPress.

Come creare un gruppo di blocchi

Un gruppo di blocchi è una raccolta di blocchi impostati per funzionare come blocco singolo. Li sposti e li modifichi come se fossero una singola unità, ma il gruppo è composto da più elementi.

Il blocco gruppo nell'editor WordPress

Creare un gruppo di blocchi è molto semplice. Basta fare clic su un blocco, quindi tenere premuto Shift o CTRL e fare clic su un altro blocco. Se vuoi raggruppare tutti i blocchi nel post, puoi premere CTRL / CMD – A per selezionare tutto. Quindi quando vedi l’icona nell’angolo in alto a sinistra passare a un quadrato composto da piccoli blocchi, puoi fare clic su di esso e selezionare Trasforma in gruppo .

Se devi separarli, fai semplicemente clic sul pulsante a discesa a tre punti e seleziona separa.

separare i blocchi dell'editor WordPress

I blocchi funzioneranno nuovamente come singoli.

Cosa sono i blocchi riutilizzabili?

È possibile trasformare qualsiasi blocco in un blocco riutilizzabile dal menu delle impostazioni dell’editor di WordPress. Un blocco riutilizzabile non è un template ma piuttosto un blocco globale per il tuo sito web. Si crea un blocco o un gruppo di blocchi e quindi si fa clic su Aggiungi a blocchi riutilizzabili .

Aggiunta ai blocchi riutilizzabili dell'editor WordPress

Eventuali cambiamenti o modifiche apportate a quel blocco riutilizzabile vengono quindi riflesse in tutto il sito web, modificando ogni istanza del blocco anziché solo quella modificata. Per ulteriori informazioni sull’argomento puoi consultare la nostra guida completa ai blocchi riutilizzabili.

Il blocco Titolo

Il blocco titolo

Il titolo come mostrato sopra è il tag H1 principale del tuo post o pagina. Esso genererà anche lo slug permalink del post, che potrà essere modificato dopo aver salvato il post almeno una volta.

Questo è l’unico blocco all’interno dell’editor WordPress che non è possibile rimuovere o riposizionare. È necessario utilizzare le impostazioni CSS o un page builder esterno per regolare di più.

Area del contenuto

area di contenuto dell'editor a blocchi di WordPress

Fondamentalmente, puoi considerare l’area del contenuto la zona in cui scrivi. Se vuoi, puoi iniziare a digitare, scrivere un intero post senza nemmeno considerare i blocchi. In modo sostanziale, sostituisce la semplice area WYSIWYG di TinyMCE ed è la più grande modifica all’editor di WordPress.

Ad ogni modo, con l’Editor WordPress a blocchi, puoi fare molto di più. Ogni volta che premi “invio” aggiungi un nuovo blocco di paragrafo. Per aggiungere un diverso tipo di blocco (di qualsiasi tipo), fai clic sul + e si aprirà un menu a discesa di tutti i blocchi disponibili.

Assicurati di scorrere perché sono impostati in diverse categorie. Puoi anche cercare un blocco specifico se sai quale vuoi.

editor di wordpress

Puoi aggiungere blocchi di video YouTube, immagini, gallerie, lettori audio, elenchi puntati e numerati, citazioni e molto altro ancora. Ognuno ha le sue impostazioni e opzioni di stile. Inoltre, se usi molto un blocco, l’editor di WordPress lo riconoscerà come di uso comune e lo elencherà nel menu Più utilizzati in modo da non doverlo scorrere o cercare più. Anche i blocchi riutilizzabili e i gruppi di blocchi possono apparire nel menu Più utilizzati.

Se guardi le immagini in questa sezione, la freccia a sinistra punta ai pulsanti di riordino che ottieni per ogni blocco quando è selezionato (fai clic su di esso per selezionarlo).La freccia a destra indica il menu a discesa che consente di eliminare il blocco e di modificarne il contenuto come codice HTML, clonarlo o aggiungere nuovi blocchi sopra e sotto ad esso.

Menu a discesa blocchi

Queste opzioni e impostazioni, tuttavia, sono diverse dalla scheda Opzioni blocco nell’angolo in alto a destra della schermata menzionata sopra e ne discuteremo nella sezione seguente.

Struttura del documento, conteggio delle parole e altre informazioni

Nella barra degli strumenti superiore della pagina, hai una i cerchiata. Fai clic su di essa e ti verrà presentato un riepilogo completo della composizione del documento.

La struttura del documento

A condizione che tu abbia usato blocchi di intestazione, apparirà la struttura del documento oltre al conteggio delle parole, al numero di paragrafo e al conteggio dei blocchi. Se non hai blocchi di intestazione, questa sezione non ci sarà. È possibile fare clic su uno qualsiasi degli elementi della struttura del documento per essere portato direttamente a quel blocco. Questa funzione è molto utile nei documenti più lunghi.

Se fai clic sull’icona dell’elenco nidificato accanto, vedrai anche un elenco ordinato di tutti i blocchi nel post, piuttosto che solo le intestazioni.

navigazione tra i blocchi

Ancora una volta, puoi fare clic su qualsiasi cosa nell’elenco per navigare direttamente e selezionare quel blocco.

Editor WordPress: la scheda opzioni blocco

Nell’angolo in alto a destra dell’editor di WordPress, vedrai una scheda Blocco . Finché hai selezionato un blocco, otterrai una serie contestuale di opzioni per quel tipo di blocco. In ogni caso, qualsiasi modifica apportata avrà effetto solo sul singolo blocco selezionato.

scheda opzioni blocco

In questa scheda è possibile modificare la dimensione della miniatura di un’immagine, aggiungere uno sfondo colorato a un paragrafo per creare un avviso o regolare la dimensione del carattere in un’intestazione, per fare un esempio. Se la scheda Blocco è aperta, le opzioni cambiano nel blocco specifico selezionato. Evidenziando il blocco paragrafo, vedrai questo:

opzioni blocco paragrafo

Selezionando un Blocco immagine, la scheda Blocco cambierà cosi:

opzioni blocco immagine

Ogni blocco ha opzioni specifiche che puoi regolare e che si applicano solo a quel tipo di blocco . Ogni blocco ha una sezione Avanzata che consente di applicare classi CSS a quel blocco. Puoi quindi visualizzarli come meglio credi utilizzando fogli di stile e codice..

La scheda Opzioni documento

A sinistra della scheda Opzioni blocco c’è la scheda Documento . Se hai usato WordPress in passato, queste opzioni ti saranno familiari: sarai in grado di regolare le categorie del tuo post, i tag, aggiungere un’immagine in evidenza, regolare lo slug del permalink, aggiungere un estratto e abilitare o disabilitare i commenti.

impostazioni del documento

Ognuna di queste sezioni è praticamente identica a quelle che si trovavano nell’editor TinyMCE WYSIWYG. Si applicano a tutto il post o alla pagina e non a un singolo blocco o all’intero sito WordPress..

Metabox aggiuntivi

I metabox post è dove i plugin aggiungono nuove opzioni e funzionalità per il contenuto stesso. Appaiono alla fine dell’area del contenuto, sotto i blocchi.

editor di WordPress Metabox

Ciò che appare in questa sezione dipenderà dai plugin che hai installato (o da eventuali funzionalità dei temi che potrebbero utilizzare quest’area). I plugin di ottimizzazione SEO, ad esempio, sfruttano molto quest’area e qualsiasi altra cosa che ti permetta di interagire in qualche modo con il contenuto della pagina, piuttosto che con i dettagli del documento.

Elenco a discesa Opzioni dell’editor WordPress

Se fai clic sull’icona del menu a discesa a tre punti nella parte superiore destra dello schermo, verrà visualizzato un menu a discesa verticale di grandi dimensioni. Qui puoi regolare una serie di impostazioni, tutte applicabili all’editor stesso, piuttosto che al documento, ai blocchi o al contenuto.

opzioni dell'editor di WordPress

Per la maggior parte, sono opzioni abbastanza semplici, come gestire i blocchi riutilizzabili o fornire un elenco di scorciatoie da tastiera o riaprire il popup di benvenuto che abbiamo visto all’inizio.

Alcune delle opzioni utilizzate più frequentemente, tuttavia, sono quasi all’inizio. In particolare, attiva / disattiva le modalità Barra degli strumenti in alto , Modalità schermo intero e Editor del codice / Visuale .

Lo switch della barra degli strumenti in alto indica che il blocco selezionato che appare come un menu contestuale vicino alla parte superiore sinistra del blocco, come abbiamo menzionato sopra, sarà in un’area fissa nella parte superiore dello schermo.

barra degli strumenti in alto in gutenberg

La modalità a schermo intero attiva o disattiva il menu di amministrazione di WordPress. Se disabiliti la modalità a schermo intero, tornerai a vedere la barra laterale di sinistra che include le tipiche opzioni della dashboard come Post, Pagine, Aspetto, Impostazioni, Strumenti, ecc.

Attiva / disattiva modalità schermo intero dell'editor WordPress

Gli interruttori Editor del codice / Editor visuale funzionano esattamente come nell’editor TinyMCE. Gli esempi di questo post finora sono stati fatti con l’editor Visuale. In pratica, vedi una rappresentazione visiva del post mentre lo scrivi. L’Editor di codice, invece è proprio un editor di codice, una semplice casella di testo in cui puoi scrivere in testo semplice senza formattazione e codice HTML.

editor del codice WordPress

Di solito viene fatto per risolvere problemi con l’editor o per mettere a punto una singola area o blocco o per incollare contenuto che è stato scritto in un editor esterno.

L’editor a blocchi utilizza tag HTML specifici per dire a WordPress che tipo di blocchi renderizzare, quindi assicurati di mantenere intatto qualsiasi codice assomigli a <! – wp: paragraph -> . Altrimenti, le cose possono diventare piuttosto confuse.

Tasti di scelta rapida globali dell’editor di WordPress

L’Editor di WordPress include anche un proprio set di utili scorciatoie di tasti. Non sono uguali a quelli dell’editor TinyMCE, ma sono ugualmente utili e altrettanto importanti. Ricordare i più utili ti farà risparmiare tempo e problemi, parlando per esperienza. Puoi premere Shift + Alt + H per visualizzare il seguente elenco di scorciatoie di tasti nello stesso.

Scorciatoie per i documenti

  • Mostra o nascondi la barra laterale delle impostazioni: Ctrl + Shift +,
  • Passa alla parte successiva dell’editor WordPress – Ctrl + ` o Shift + Alt + N
  • Passa alla parte precedente dell’editor – Ctrl + Shift + ` o Shift + Alt + P
  • Salva le modifiche – Ctrl + S
  • Annulla le ultime modifiche: Ctrl + Z
  • Passa dall’editor visivo all’editor di codice – Ctrl + Shift + Alt + M
  • Ripeti l’ultimo annullamento: Ctrl + Shift + Z
  • Vai alla barra degli strumenti più vicina – Alt + F10
  • Apri il menu di navigazione a blocchi – Shift + Alt + O

Scorciatoie di selezione

  • Seleziona tutto il testo durante la digitazione. Premere di nuovo per selezionare tutti i blocchi – Ctrl + A
  • Cancella selezione – ESC

Scorciatoie di blocchi

  • Duplica i blocchi selezionati: Ctrl + Shift + D
  • Rimuovi più blocchi selezionati – del o backspace
  • Rimuovi i blocchi selezionati: Shift + Alt + Z
  • Inserisci un nuovo blocco prima dei blocchi selezionati: Ctrl + Alt + T
  • Inserisci un nuovo blocco dopo i blocchi selezionati: Ctrl + Alt + Y
  • Cambia il tipo di blocco dopo aver aggiunto un nuovo paragrafo – /

Scorciatoie di testo

  • Rimuovi un collegamento – Ctrl + Shift + K
  • Rendi il testo selezionato in corsivo – Ctrl + I
  • Rendi il testo selezionato in grassetto – Ctrl + B
  • Converti il ​​testo selezionato in un collegamento – Ctrl + K
  • Sottolinea il testo selezionato – Ctrl + U

Conclusione

L’editor di WordPress ha fatto molta strada negli ultimi dieci anni e l’attuale editor a blocchi, Gutenberg, è molto potente. Con il controllo granulare di ogni elemento della pagina, puoi creare contenuti più velocemente, più facilmente e in modo molto più efficiente di quanto fosse possibile prima.

In ogni caso, se l’attuale Editor a Blocchi non fa per te, c’è il plugin Classic Editor e se sei uno di quelli all’avanguardia, il plugin WordPress Gutenberg rimane alcune release in anticipo dell’editor predefinito del core di WordPress. Quindi, indipendentemente dal modo in cui preferisci creare, WordPress ti aiuta.

Buon lavoro.