Aggiungere un sommario su WordPress

Aggiungere un sommario nelle pagine e articoli di WordPress è una pratica molto efficace per migliorare l’usabilità dei contenuti e il loro posizionamento sui motori di ricerca.

Per realizzare un sommario, chiamato anche tabella di contenuti (table of content in inglese), dobbiamo avvalerci dei cosiddetti “salti di pagina” (page jumps in inglese), per abilitarli bisogna inserire un’ancora HTML come attributo di intestazione e creare un collegamento che salti all’ancora.

Fondamentalmente esistono due metodi per aggiungere una tabella dei contenuti alle pagine di un sito WordPress: manualmente oppure tramite un plugin.

• Aggiungere un sommario manualmente
• Aggiungere un sommario tramite un plugin

Aggiungere un sommario manualmente

Questo è il metodo più semplice da utilizzare perché non richiede nessuna conoscenza tecnica ed è anche quello che impatta di meno sulla velocità di caricamento del sito web.

Di contro, va applicato manualmente su tutte le pagine, quindi dei due metodi è sicuramente quello che richiede più tempo.

Nonostante ciò, questo è il mio metodo preferito: in questo stesso articolo ho creato la tabella dei contenuti manualmente, così come nelle altre pagine di wplab.it.

Si tratta semplicemente di aggiungere delle ancore all’interno di una pagina e i rispettivi link che puntano ad esse.

Individua l’elemento dove vuoi che l’utente sia indirizzato quando clicca su una voce del sommario, ad esempio potresti scegliere un’intestazione H2.

Se utilizzi l’editor di Gutenberg, ti basta selezionare l’elemento H2 che ti interessa, scegliere la scheda Blocco presente nella colonna di destra, cliccare sulla voce Avanzate e inserire una o più parole nel campo Ancora HTML.

Se, invece, utilizzi l’editor classico di WordPress, devi modificare il contenuto della tua pagina in modalità testo in modo da poter visualizzare (e modificare) il codice HTML della pagina e aggiungere l’ancora HTML all’elemento H2 scelto.

Ad esempio:

<h2 id="aggiungere-un-sommario-manualmente">Aggiungere un sommario manualmente</h2>

L’ancora HTML deve iniziare con una lettera, non può includere spazi vuoti, si possono utilizzare i numeri e i seguenti simboli: trattino (-), trattino basso (_), due punti (:) e punto (.).

Una volta inserita l’ancora, devi aggiungere il link che permetterà ai tuoi lettori di “saltare” da una parte all’altra della pagina web.

Ti basta aggiungere un link sul testo che preferisci come fai di solito, ma invece di inserire un normale URL devi digitare un cancelletto (#), seguito dall’ancora che hai associato all’elemento H2 scelto in precedenza.

Ad esempio:

<a href="#aggiungere-un-sommario-manualmente">Aggiungere un sommario manualmente</a>

A questo punto non ti resta che ripetere la procedura per tutte le principali sezioni nelle quali la tua pagina è suddivisa.

Per una questione sia pratica che estetica, personalmente preferisco inserire all’inizio dei miei articoli un elenco puntato con le principali sezioni che puntano, tramite le ancore, alle varie intestazioni (H2).

Ovviamente, tu puoi decidere di inserire i link come e dove preferisci.

Aggiungere un sommario tramite un plugin

Quando realizzo un sito web o un blog con WordPress cerco di limitare al massimo l’utilizzo dei plugin, sia per una questione di sicurezza che di velocità, quindi preferisco evitare di utilizzare un plugin per aggiungere una tabella dei contenuti.

Voglio comunque parlartene perché l’utilizzo di un plugin può portare comunque dei vantaggi interessanti, come ad esempio l’inserimento del sommario nella sidebar oppure l’aggiunta di animazioni per la sua apertura e chiusura.

Inoltre, utilizzare un plugin ti eviterà di dover andare a inserire manualmente tutte le ancore e le tabelle dei contenuti nelle pagine del tuo sito web, perché verranno generate automaticamente.

Nella directory dei plugin di WordPress.org sono presenti diversi plugin gratuiti che permettono questa operazione ma quelli più utilizzati e meglio valutati dagli utenti sono due: Easy Table of Contents e LuckyWP Table of Contents.

Dopo averli testati, posso affermare che si tratta di due plugin che svolgono egregiamente il loro lavoro, funzionano sia con l’editor classico di WordPress che con Gutenberg, ma anche con i principali site builder.

Le differenze tra di loro sono minime e riguardano soprattutto le personalizzazioni grafiche, quindi ti consiglio di provarli entrambi per renderti conto di quale sia quello che più si adatta alle tue esigenze.

Ma vediamo le caratteristiche di questi plugin nel dettaglio.

Easy Table of Contents

• Inserimento automatico di un sommario.
• Compatibile con l’editor classico, Gutenberg, Divi, Elementor, WPBakery Page Builder e Visual Composer.
• Fornisce molte opzioni di facile comprensione per configurare quando e dove inserire il sommario.
• Sono disponibili molte opzioni per configurare la modalità di visualizzazione del sommario.
• Diversi formati di elenchi puntati tra cui scegliere: nessuno, decimale, numeri arabi e romani.
• Possibilità di visualizzare il sommario in modo gerarchico o meno.
• L’utente può facoltativamente nascondere il sommario. Hai il pieno controllo di questa funzione. Può essere disabilitato e puoi scegliere di tenerlo nascosto per impostazione predefinita.
• Supporta lo scorrimento fluido (smooth scroll in inglese).
• Abilita o disabilita selettivamente il sommario.
• Scegli le intestazioni da utilizzare per generare il sommario.
• Escludi facilmente le intestazioni a livello globale e post per post.
• Se preferisci non inserire il sommario nel contenuto del post, puoi utilizzare il widget fornito e posizionare il sommario nella barra laterale del tuo tema.
• Il widget evidenzia automaticamente le sezioni attualmente visibili nella pagina.

LuckyWP Table of Contents

• Inserimento automatico di un sommario.
• SEO-friendly: il codice è compatibile con le caratteristiche degli snippet nelle SERP di Google.
• Inserimentro tramite shortcode, blocco di Gutenberg o widget.
• Pulsante sulla barra degli strumenti nell’editor classico.
• Impostazione del numero minimo di intestazioni per visualizzare il sommario.
• Impostazione della profondità delle intestazioni per il sommario.
• Salta le intestazioni per livello o testo.
• Visualizzazione gerarchica o lineare.
• Voci di numerazione: numeri decimali o romani, ordinati o annidati.
• Aspetto personalizzabile: larghezza, allineamento, dimensione e colore.
• Combinazioni di colori: scuro, chiaro, bianco, trasparente o ereditato dal tema.
• Pulsante Mostra / Nascondi facoltativo.
• Etichette personalizzabili.
• Scorrimento fluido opzionale.
• Impostazione dell’offset superiore per lo smooth scroll.
• Supporto RTL.