Come utilizzare l'editor di WordPress

WordPress come CMS ha un set di funzionalità incredibilmente robusto. I plug-in e i widget attirano le persone sulla piattaforma, ma una volta all'interno, il vero potere viene dall'editor di WordPress stesso. Indipendentemente da quale sia il tuo obiettivo con la piattaforma, utilizzerai l'editor di post/pagina in una capacità maggiore. Quindi vogliamo mostrarti come utilizzare al massimo l'editor di WordPress in modo che i tuoi contenuti brillino e il tuo sito prosperi.

Iscriviti al nostro canale Youtube

Che cos'è l'editor di WordPress?

Tecnicamente, ci sono tre editor di WordPress tra cui scegliere. Con il rilascio di WordPress 5.0, l'editor è passato dall'allora predefinito TinyMCE al Block Editor che abbiamo oggi. In mezzo a questo cambiamento, il plug-in dell'editor Gutenberg è stato rilasciato come ponte per testare in versione beta nuove funzionalità per l'editor di blocchi prima di inserirlo in WordPress Core.

Sebbene l'editor blocchi sia predefinito in WP a partire dalla versione 5.0, puoi scegliere di utilizzare uno dei tre che desideri. Puoi installare il plug-in Editor classico per mantenere il vecchio TinyMCE, il plug-in Gutenberg per mantenere le funzionalità più recenti (sebbene potenzialmente instabili) nel tuo editor, oppure puoi mantenere l'editor blocchi predefinito.

Dati i passaggi aggiuntivi necessari per utilizzare qualsiasi cosa tranne l'editor predefinito (e l'instabilità intrinseca e la natura mutevole del plug-in Gutenberg), in questo post ci concentreremo esclusivamente sull'editor di blocchi predefinito. Tuttavia, dovresti notare che i fondamenti sono gli stessi con Gutenberg, e il TinyMCE contenuto nel plugin Classic Editor ha la parità delle funzionalità di base con qualsiasi editor di testo RTF o software di elaborazione testi, per non parlare di qualsiasi funzionalità specifica di WP di cui discutiamo. finita, in genere differisce solo nell'estetica, non nella funzione.

Detto questo, impariamo come utilizzare l'editor di WordPress.

Le basi dell'editor di WordPress

Ogni volta che crei una pagina o un post (o un tipo di post personalizzato), utilizzerai l'editor blocchi. Ti viene presentato un tutorial modale per aprirlo e puoi imparare le basi seguendolo attraverso le 4 diapositive che offre. Chiudilo e puoi vedere l'editor di base.

L'editor di blocchi di WordPress di base è composto da 5 elementi. Altri plugin possono essere aggiunti da vari plugin, ma questi forniscono la funzionalità di base con cui lavorerai giorno dopo giorno.

1. Blocco del titolo : qualsiasi cosa tu inserisca qui verrà visualizzata come tag H1 principale del post/pagina.
2. Blocco/Area contenuto – Questa è l'area in cui aggiungerai i vari blocchi che compongono il contenuto del tuo articolo o 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 tendina, dal quale scegliere il tipo che si desidera inserire. Funzionano tutti esattamente allo stesso modo, quindi se fai clic su uno a destra di un blocco, sotto un blocco o nell'angolo dello schermo, ottieni le stesse opzioni.
4. Scheda Opzioni documento : in questa scheda troverai di tutto, da categorie, tag, permalink, pulsanti di attivazione/disattivazione dei commenti e altro ancora. I plugin potrebbero aggiungere opzioni qui, ma si applicano sempre alla pagina generale o al post stesso.
5. Scheda Opzioni blocco : questa scheda gestisce le opzioni per qualsiasi blocco evidenziato. Se fai clic su un blocco di paragrafo, modifichi le opzioni solo per quel blocco . Nessun altro blocco, né il documento stesso cambiano.

Di seguito, ti guideremo attraverso le specifiche di queste aree e come utilizzarle per creare il miglior contenuto possibile.

Cosa sono i blocchi?

Ci hai già visto menzionare 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 come preferisci, personalizzati individualmente e ti danno un controllo granulare sui tuoi contenuti in un modo che un editor WYSIWYG semplicemente non può. (Se sei un utente Divi, hai già familiarità con il concetto perché i nostri moduli funzionano allo stesso modo.)

Come puoi vedere sopra, ogni elemento della pagina è contenuto in un proprio blocco. Puoi vedere un elenco completo dei blocchi di WordPress nella documentazione di supporto di WordPress.

Come creare un gruppo di blocchi

Un gruppo di blocchi è una raccolta di blocchi che si imposta per funzionare come un blocco unico. Li sposti e li modelli come se fossero una singola unità, ma il Gruppo è composto da più elementi.

Creare un gruppo è facile. Basta fare clic su un blocco, quindi tenere premuto Maiusc o CTRL e fare clic su un altro. Se vuoi raggruppare tutti i blocchi nel post, puoi premere CTRL/CMD – A per selezionarli tutti. Quindi, quando vedi l'icona in alto a sinistra che si trasforma in 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 con tre punti e seleziona Separa.

I blocchi ora funzioneranno di nuovo come individui.

Cosa sono i blocchi riutilizzabili?

Puoi trasformare qualsiasi blocco da un blocco unico in un blocco riutilizzabile dal menu delle impostazioni. Un blocco riutilizzabile non è un modello, ma piuttosto un blocco globale per il tuo sito. Crei un blocco o un gruppo di blocchi, quindi fai clic su Aggiungi a blocchi riutilizzabili .

Qualsiasi modifica o modifica apportata a quel blocco riutilizzabile viene quindi riflessa in tutto il sito, modificando ogni istanza del blocco anziché solo quella modificata. Abbiamo una guida completa ai blocchi riutilizzabili che puoi consultare per ulteriori informazioni sull'argomento.

Il cartiglio

Il cartiglio come mostrato sopra è il tag H1 principale del tuo post o della pagina. Genererà anche lo slug del permalink per il post, ma può essere modificato dopo aver salvato il post almeno una volta. Questo sarà anche ciò da cui estrarranno i selettori CSS come .post-title e .entry-title . (Tuttavia, i tuoi plug-in SEO ti consentono di impostare ciò che viene visualizzato nei motori di ricerca.)

Questo è l'unico blocco all'interno dell'editor di WordPress che non puoi rimuovere o riposizionare. È necessario utilizzare CSS o le impostazioni del generatore di pagine esterne per regolare di più.

Blocco/Area contenuti

Fondamentalmente, puoi considerare l'area del contenuto dove si digita. Se vuoi, puoi iniziare a digitare, scrivere un intero post senza nemmeno considerare i blocchi. In tutti i principali modi, questo sostituisce la semplice area WYSIWYG di TinyMCE ed è il più grande cambiamento nell'editor di WordPress da... beh... da sempre.

Tuttavia, con l'editor blocchi, puoi fare molto di più. Ogni volta che premi "invio" o "ritorno", aggiungerai un nuovo blocco Paragrafo. Per aggiungere un diverso tipo di blocco (di qualsiasi tipo), fai clic sul + in un cerchio e otterrai un menu a discesa di ogni blocco disponibile. Assicurati di scorrere perché sono anche impostati in diverse categorie. Puoi anche cercare un blocco specifico se sai quale tipo desideri.

Puoi aggiungere blocchi video di YouTube, immagini, gallerie, lettori audio, elenchi, citazioni e molto altro ancora. Ognuno di loro ha le proprie impostazioni e opzioni di stile. Inoltre, più utilizzi un blocco, l'editor di WordPress lo riconoscerà come uno di uso comune e lo elencherà in I più utilizzati in modo da non doverlo più scorrere o cercare. I blocchi riutilizzabili e i gruppi di blocchi possono essere visualizzati anche in I più utilizzati.

Se guardi le immagini in questa sezione, il (1) punta ai pulsanti di riordino che ottieni per ogni blocco quando è selezionato (basta fare clic su di esso per selezionarlo). Il (2) punta al menu a discesa che ti consente di eliminare il blocco e modificarne il contenuto come HTML, clonarlo o aggiungere nuovi blocchi attorno ad esso.

Queste opzioni e impostazioni, tuttavia, sono diverse dalla scheda Opzioni blocco nell'angolo in alto a destra dello schermo che abbiamo menzionato sopra e discusso nella sezione successiva di seguito.

Struttura del documento, conteggio parole e altre informazioni

Nella barra degli strumenti in alto della pagina, hai una i in un cerchio. Fai clic su di esso e ti viene presentata una panoramica completa di cosa consiste il tuo documento.

Finché hai utilizzato i blocchi di intestazione, apparirà una struttura del documento oltre al conteggio delle parole, al numero del paragrafo e al conteggio dei blocchi. Se non hai blocchi Intestazione, quella sezione non sarà presente. Puoi fare clic su uno qualsiasi degli elementi della struttura del documento per essere portato direttamente a quel blocco. Questa caratteristica è preziosa nei documenti più lunghi.

Se fai clic sull'icona dell'elenco nidificato accanto a quella, vedrai anche un elenco ordinato di tutti i blocchi nel post, anziché solo le intestazioni per un contorno.

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

Scheda Opzioni blocco

Nell'angolo in alto a destra dell'editor di WordPress, vedrai una scheda che dice Blocca . Finché hai selezionato un blocco, otterrai un insieme contestuale di opzioni per quel tipo di blocco. Tuttavia, qualsiasi modifica apportata avrà effetto solo sul singolo blocco selezionato.

Ad esempio, potresti modificare la dimensione della miniatura di un'immagine in questa scheda, aggiungere uno sfondo colorato a un paragrafo per creare un avviso o regolare la dimensione del carattere in un'intestazione. Se hai la scheda Blocco aperta, le opzioni cambiano nel blocco specifico selezionato. Se hai evidenziato il Blocco paragrafo, vedrai questo.

Avere un Blocco immagine selezionato cambierà la scheda Blocco in questo.

Ogni blocco avrà opzioni specifiche che puoi regolare al suo interno che si applicano solo a quel tipo di blocco (e verranno visualizzate solo in quel blocco specifico). Ogni blocco, tuttavia, ha una sezione Avanzate nella scheda che ti consente di applicare le classi CSS a quel blocco. Puoi quindi modellarli come ritieni opportuno utilizzando fogli di stile e codice esterni.

Scheda Opzioni documento

A sinistra della scheda Opzioni blocco si trova la scheda Opzioni documento . Se hai utilizzato WordPress in passato, ti saranno familiari. Qui, sarai in grado di regolare le categorie del tuo post, i tag, aggiungere un'immagine in primo piano, regolare lo slug del permalink, aggiungere un estratto per l'uso del tema/SEO e abilitare o disabilitare i commenti.

Ognuna di queste sezioni è praticamente identica a dove e cosa erano nell'editor TinyMCE WYSIWYG. Si applicano all'intero post o pagina e non a un singolo blocco o all'intero sito. Inoltre, come puoi vedere nell'immagine sopra, c'è una casella WP Rocket Options. Alcuni plugin applicheranno caselle a quest'area, ma riguarderanno sempre direttamente il documento stesso, non tanto il contenuto oi blocchi.

Metabox aggiuntivi per i messaggi

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

Ciò che appare in questa sezione (se non altro) dipenderà dai plug-in installati (o dalle funzionalità del tema che potrebbero utilizzare l'area). I plugin SEO 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.

Menu a discesa delle opzioni dell'editor di WordPress

Se fai clic sull'icona a discesa con tre punti nell'angolo in alto a destra dello schermo, verrà visualizzato un grande menu a discesa verticale. Qui puoi regolare una serie di impostazioni, tutte valide per l'editor stesso, piuttosto che per il documento, i blocchi o il contenuto.

Per la maggior parte, sono opzioni abbastanza semplici, come gestire i blocchi riutilizzabili o fornire un elenco di scorciatoie da tastiera o riaprire la guida di benvenuto di cui abbiamo parlato all'inizio.

Alcune delle opzioni più utilizzate, tuttavia, sono quasi al top. In particolare le opzioni per la barra degli strumenti superiore , la modalità a schermo intero e le modalità Visual/Code Editor .

L'interruttore della barra degli strumenti in alto significa che invece delle opzioni per un blocco selezionato che appare come un menu contestuale vicino alla parte superiore sinistra del blocco, come accennato in precedenza, sarà in un'area fissa nella parte superiore dello schermo.

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

E gli interruttori Visual/Code Editor funzionano esattamente come nell'editor TinyMCE. Gli esempi in questo post finora sono stati con l'editor visuale. Cioè, vedi una rappresentazione visiva del post mentre lo scrivi. Ottieni pulsanti da premere, menu contestuali e un rendering in tempo reale delle impostazioni mentre le modifichi. Tuttavia, l'editor del codice è proprio questo: codice. Avrai una semplice casella di testo in cui scriverai in testo normale e HTML.

Questo di solito viene fatto per risolvere i problemi con l'editor o per mettere a punto una singola area o blocco. O forse per incollare contenuti scritti in un editor esterno che non si formatterebbero correttamente su più blocchi.

L'editor dei blocchi utilizza tag HTML specifici per indicare a WordPress che tipo di blocchi eseguire il rendering, quindi assicurati di mantenere intatto il codice che assomigli a <!– wp:paragraph –> . Altrimenti, le cose possono diventare piuttosto disordinate.

Scorciatoie globali per l'editor di blocchi di WordPress

Anche l'editor blocchi include una serie di ingegnose scorciatoie. Non sono tutti uguali a quelli del TinyMCE, ma sono ugualmente utili e altrettanto importanti da imparare. Memorizzare quelli più utili ti farà risparmiare un sacco di tempo e fatica, parlando per esperienza. Puoi premere Maiusc+Alt+H per visualizzare il seguente elenco di scorciatoie nell'editor di WordPress stesso.

Collegamenti ai documenti

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

Scorciatoie di selezione

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

Blocca scorciatoie

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

Scorciatoie di testo

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

Avvolgendo

L'editor di WordPress ha fatto molta strada negli ultimi dieci anni e l'attuale editor di blocchi è sicuramente abbastanza potente da portarci attraverso il prossimo. Con il potere di controllare in modo granulare ogni elemento della pagina, puoi creare contenuti più velocemente, più facilmente e in modo molto più efficiente di quanto fosse possibile prima. Tuttavia, se l'attuale Block Editor non fa per te, esiste il plug-in Editor classico e, se sei all'avanguardia, il plug-in Gutenberg rimane alcune versioni prima dell'editor predefinito nel core di WordPress. Quindi, indipendentemente dal modo in cui preferisci creare, WordPress ti copre.

Hai suggerimenti e trucchi che vorresti condividere sull'editor di WordPress? Fateci sapere nei commenti!