Come creare un indice dei contenuti di una pagina o in un articolo di WordPress

Quando si realizzano pagine web con contenuti corposi e strutturati (ovvero, con titoli h1, h2, ecc.) può essere utile inserire a inizio pagina una “table of content”, ovvero un indice dei contenuti della pagina i cui link fanno scorrere a video la pagina web fino al titolo ad esso collegato.

Questa funzione, utile ad esempio quando si creano guide o tutorials per il web, può essere creata manualmente utilizzando un’“ancora HTML” o installando un plugin che svolge tale funzione.

Creare un indice dei contenuti manualmente con il codice HTML

Per creare un indice dei contenuti a inizio pagina che faccia scorrere la pagina web al punto desiderato si creano dei link interni alla pagina chiamati “ancora” e si utilizzano tali riferimenti nelle singole voci inseriti nell’indice. Vediamo un semplice esempio di questa procedura.

Dopo aver creato i contenuti utilizzando per i singoli paragrafi o capitoli degli header (h1, h2, h3, …) selezioniamo un titolo e nel riquadro BLOCCO di WordPress, nel campo ANCORA HTML della sezione AVANZATE digitiamo il titolo o una sua abbreviazione (si consiglia di utilizzare i trattini anziché gli spazi tra le parole).

Ripetiamo l’operazione per i titoli delle altre sezioni della pagina alle quali vogliamo indirizzare il visitatore nel momento in cui seleziona le voci del sommario della pagina.

Terminate queste operazioni creiamo un indice della pagina web all’inizio utilizzando dei punti elenco e, successivamente creiamo un collegamento all’ANCORA anteponendo il simbolo “cancelletto”.

Creiamo, infine gli altri link per le voci dell’indice dei contenuti.

Quando pubblichiamo la pagina web, cliccando su ciascuna delle voci dell’Indice dei contenuti, si assisterà allo scorrimento della pagina fino a visualizzare l’ancora nella parte alta della finestra del browser.

Da notare che questa procedura può essere utilizzata anche per creare siti a pagina singola dove le voci del menu fanno scorrere la pagina web nella posizione desiderata (le cosiddette landing page); in questo caso sarà sufficiente collegare i link interni direttamente con le voci del menu principale del sito.

Creare un indice dei contenuti con un plugin di WordPress

Ci sono numerosi plugin di WordPress che permettono la creazione di una “tabella dei contenuti”. Uno molto interessante per la sua semplicità di utilizzo e delle numerosi funzionalità, anche nella versione gratuita, è EASY TABLE OF CONTENTS.

Per installarlo digitiamo il suo nome nel campo di ricerca dei plugin di WordPress e procediamo con l’installazione e l’attivazione.

La schermata delle impostazioni appare subito dopo l’installazione ma è possibile accedervi attraverso la voce INDICE DEI CONTENUTI che viene creata nel menu IMPOSTAZIONI di WordPress.

Vediamo quali parametri sono utili impostare per utilizzare al meglio questo plugin.

Nella scheda di impostazione del plugin alla voce ABILITA SUPPORTO è possibile scegliere innanzitutto se attivare il plugin nella pagine di costruzione degli Articoli e/o delle Pagine del sito.

Attivando queste opzioni, in fondo all’articolo o alla pagina appare il riquadro del plugin nel quale è possibile decidere se inserire o meno l’INDICE DEI CONTENUTI nella specifica pagina o articolo che stiamo elaborando, e scegliere se mantenere alcune impostazioni di settaggio predefinite per il sito o cambiarle.

Tra le altre opzioni che possono essere settate troviamo l’inserimento automatico in tutte le pagine o articoli del sito (operazione sconsigliata a meno che si tratti di un sito che richieda per ciascuna pagine un indice dei contenuti), la posizione in cui mostrare l’indice dei contenuti, il tipo di punto elenco da utilizzare, la dimensione (fluido o ridotto), l’aspetto grafico, ed altro ancora. Di norma i parametri impostati sono più che sufficienti per avere un’ottima TABLE OF CONTENTS nelle pagine o articoli del sito web.

Particolarmente interessante abbiamo trovato l’opzione STICKY TOGGLE OPTION disponibile sempre nella scheda delle IMPOSTAZIONI di EASY TABLE OF CONTENTS.

L’opzione, se spuntata, permette di visualizzare una linguetta sulla pagina web dalla quale sarà sempre possibile aprire il riquadro dell’indice e selezionare un’altra voce dall’elenco.

Per concludere facciamo notare come l’indice dei contenuti può essere inserito anche in un Widget di WordPress (ad esempio, posizionato in una barra laterale) inserendo lo shortcode [ez-toc]