Interfaccia di Gutenberg

Arrivati a questo punto non ci resta che andare a creare il nostro primo articolo con WordPress e Gutenberg.

Vai in Articoli > Tutti gli articoli.

Parleremo di questa schermata in una lezione successiva, ma per adesso premiamo Aggiungi un articolo.

Prima di passare all’analisi dell’interfaccia, inseriamo almeno un titolo e del finto testo.

Ok, passiamo in rassegna le varie funzioni che hai a disposizione per controllare al 100% il tuo articolo.

Come abbiamo detto, un articolo (o anche una pagina se la costruisci con Gutenberg) è l’unione di più blocchi.

L’icona con il + in alto a sinistra da l’accesso a tutti i blocchi che Gutenberg mette a disposizione.

Per facilità di recupero sono organizzati in sotto voci. Abbiamo anche un campo cerca grazie al quale basterà digitare le prime lettere del modulo per averlo a portata di mano.

Le successive due icone sono le classiche di Undo - Redo. Se ti accorgi di aver commesso un errore puoi quindi tornare indietro nella storia al punto che desideri.

L’icona delle informazioni ci mostra dettagli sul articolo che stiamo scrivendo, come il numero di parole, i titoli, paragrafi e blocchi.

Infine abbiamo una navigazione per blocchi. Attualmente abbiamo solo un paragrafo, ma quando l’articolo sarà ricco di elementi, questa funzione è utile per far passare l'utente al blocco desiderato.

Sul lato destro abbiamo 3 pulsanti:

• Salvataggio della bozza
• Visualizzazione della preview
• Pubblicazione dell’articolo.

Mentre sei in fase di lavorazione dovrai solo salvare il tuo lavoro, quindi la tua bozza, e vederne il risultato tramite la preview. Solo quando tutto è finito potrai procedere alla pubblicazione.

Per quanto riguarda le bozze c’è il salvataggio automatico.

Ogni tot di tempo WordPress salverà il contenuto del tuo articolo. Grazie a questa funzione, se immerso nella scrittura, ti dovessi scordare di salvare, allora non perderai tutto il lavoro fatto.

Premiamo Preview. Questa azione crea una pagina front end temporanea, non visibile agli utenti del tuo sito.

Per questa lezione di studio stiamo utilizzando l’ultimo tema di default di WordPress, chiamato Twenty Ninteen.

Per fare i primi passi e a titolo di studio è perfetto, ma il passaggio a sito professionale di alto design lo faremo con i temi avanzati di WordPress.

Torniamo all’interfaccia, con l’icona della rotellina mostriamo e nascondiamo la sidebar delle impostazioni.

Qui troviamo le impostazioni generali del documento e, se selezioniamo un blocco, abbiamo tutte le funzioni dedicate a quel specifico blocco.

Con l’ultima icona a destra, quella con i 3 pallini, abbiamo il controllo di diverse funzioni.

Se attiviamo top toolbar, quando selezioniamo un blocco troviamo le icone per la sua gestione direttamente nella barra superiore.

Altrimenti, disattivandolo, queste icone saranno presenti direttamente sopra il blocco selezionato.

Se non ti da fastidio averle qui, allora puoi lasciare questa impostazione disattivata.

Ci sono altre due modalità di visualizzazione: Spotlight e Fullscreen.

Con fullscreen si passa alla visualizzazione a tutto schermo, utile se stai lavorando con un portatile a risoluzione bassa.

Invece spotlight ti mette in evidenza il blocco su cui stai lavorando, opacizzando gli altri.

A volte, per chi conosce un pochino di HTML è utile poter accedere al codice che compone il blocco.

Selezionando code editor entriamo in questa modalità.

Come notiamo, non c’è solo il codice HTML che identifica il paragrafo, ma anche dei commenti aggiunti direttamente da Gutenberg.

Se non conosci l’html ti consiglio di accedere a questa modalità solo per controllare, magari facendo un copia incolla di testo, di non aver incollato altro codice oltre che del semplice testo.

Ti consiglio infatti, per evitare questo tipo di problema, ogni volta che incolli del testo all’interno dell’editor di assicurarti che sia puro testo, per esempio incollandolo in un blocco note oppure utilizzando la scorciatoia da tastiera cmd + shift + v per mac o control + shift + v da windows, al posto del classico control v.

Procedendo nella sezione Tools abbiamo Manage Reusable Block che vedremo in una lezione a questo argomento dedicata e poi Keyboard Shortcuts.

Se vuoi diventare un vero ninja di WordPress e Gutenberg, allora memorizzare le scorciatoie da tastiera per le operazioni che utilizzi con maggior frequenza, sarà sicuramente di beneficio al tuo workflow di lavoro.

Copy all content serve per copiare tutto il contenuto, ma attenzione: sarà salvato in formato codice.

Infine con options apriamo un pannello per mostrare o nascondere diversi elementi dell’interfaccia.

Se hai mai usato WordPress nelle versioni precedenti, questa funzione era raggiungibile da una linguetta in alto a destra chiamata “impostazioni schermata”.

Analizziamo ora brevemente le impostazioni del documento.

In status e visibility abbiamo le indicazioni sullo stato attuale del nostro articolo (se pubblicato, come bozza ecc), non mi soffermo ora in quanto troverai questa sezione spiegata in una lezione a parte.

Nella sezione permalink vediamo la url del nostro articolo.

Attualmente non avendolo ancora salvato è in formato provvisorio.

Per modificare il permalink basta posizionarsi sopra il titolo.

Il permalink compare in alto con il relativo pulsante per la modifica.

Nel caso ti scordassi di impostarlo come desiderato, allora verrà creato in automatico, prendendo i contenuti dal titolo dell’articolo.

Infatti salvando possiamo notare  come lo slug (che è questa parte del permalink) sia “primo articolo del blog” separato tutto da trattini. Premi edit per modificarlo.

Poi apportare dei cambiamenti alla URL anche della sideabar.

Vai alla sezione permalink e modificalo da li.

Noto che per questo sito di studio non ho ancora modificato la struttura dei permalink, ritrovandomi quella di default con le date + titolo articolo.

Preferisco la struttura category + titolo articolo e pertanto, con il procediamo che abbiamo già visto nella lezione sui permalink, procedo velocemente con la modifica.

Ricarico la pagina dell’articolo…. Ed ecco che la struttura permalink è quella che desidero.

Attenzione ad un aspetto molto importante: cambiare le URL di un articolo o di una pagina, una volta che è già stata pubblicata da tempo può causare dei problemi.

Immagina come se traslocassi, ma non dici a nessuno il tuo nuovo indirizzo.

Quando qualcuno ti viene a cercare non ti trova. In questo caso i visitatori del tuo sito riceveranno una “pagina non trovata”, ma anche Google non saprà dove hai spostato la pagina.

Ok, stiamo parlando di SEO e c’è una lezione a questo argomento dedicata proprio nel relativo corso, torniamo a noi.

Come abbiamo spiegato, ogni articolo deve essere obbligatoriamente inserito in una categoria.

Se non ci sono categorie assegnate, allora WordPress in automatico assocerà l’articolo alla categoria chiamata “senza categoria”.

Aggiungiamo quindi una categoria per questo esempio. Oltre alla sezione categoria che abbiamo visto in una lezione precedente, abbiamo la possibilità di crearne di nuove anche dalla pagina dell’articolo.

Per il nostro esempio, creiamo la categoria Primi piatti.

Lo stesso vale per i tag.

Una piccola nota a questo proposito. Nel momento in cui nel tuo sito avrai scritto diversi articoli a cui avrai associato diversi tag, allora, quelli più utilizzati li vedrai comparire qui sotto per una veloce selezione.

Inoltre, se per esempio hai un tag carne già presente nel momento in cui comincerai a digitare le prime lettere, WordPress in automatico ti mostrerà dei suggerimenti, in modo da utilizzare lo stesso tag.

Infatti se hai già un tag carne, ma scrivi carni, al plurale, non avrai un unico tag, ma bensì due tag diversi.

Andando nella sezione categorie vediamo che a primi piatti non è associato ancora nessun articolo.

Andiamo quindi a salvarlo per aggiornare i dati. Torniamo a controllare, aggiorno la pagina e primi piatti ha il suo articolo assegnato.

Controllando anche nella pagina dei tag possiamo apprezzare che è tutto corretto.

Passiamo ora all’immagine in evidenza.

Questa immagine viene solitamente utilizzata in diverse parti del tuo sito (a seconda del tema che stai utilizzando).

Per esempio nella pagine di archivio, oppure proprio ad inizio articolo. Ogni tema, essendo diverso, gestisce questa immagine in maniera diversa.

Premi il pulsante e si aprirà l’overlay con la libreria media, che vedremo nel dettaglio successivamente.

Su questa pagina, per caricare un’immagine dal tuo computer, basta che la prendi dal desktop o da una cartella e la trascini all'interno della finestra.

Attendi il suo upload e poi sei pronto per dare la conferma di utilizzo premendo Seleziona.

Excerpt è una breve frase di testo che può anche questa essere utilizzata dal tema in diverse posizioni, ad esempio sotto l’anteprima in una pagina archivio come la categoria.

Se non inserisci questa frase, ma il tema richiede del contenuto, allora questo sarà creato in automatico prendendo il testo iniziale questo articolo.

L’excerpt inserito qui viene utilizzato anche nei feed al posto del testo complessivo dell’articolo.

Valuta tu se scriverne per ogni articolo uno personalizzato o se ti soddisfa quello creato automaticamente.

Infine nella sezione Discussion hai la possibilità di abilitare o meno i commenti per questo articolo.

Potrebbe capitare infatti che nelle impostazioni generali del sito hai abilitato l’utilizzo dei commenti, ma per questo specifico articolo non ritieni opportuno utilizzarli.

Per quanto riguarda l’utilizzo dei pingback e trackback ti rimando all’articolo dedicato a questo argomento che trovi sul blog di webipedia.

Direi che dell’interfaccia articolo abbiamo visto proprio tutto, e quindi ti do appuntamento alla prossima lezione.