Un indice automatico WordPress JavaScript può leggere i titoli H2 e H3 di un articolo, creare collegamenti interni e aggiornarsi senza inserire manualmente ogni voce. La soluzione proposta usa JavaScript standard, quindi non richiede plugin aggiuntivi né librerie esterne. Il codice assegna un identificatore univoco ai titoli, costruisce la struttura dell’indice e gestisce lo scorrimento verso la sezione selezionata. L’implementazione funziona con l’editor a blocchi e può essere adattata ai temi WordPress che usano classi diverse per il contenuto dell’articolo. Per ottenere un risultato accessibile è importante usare un elemento nav, testi descrittivi e una gerarchia coerente tra H2 e H3. Prima della pubblicazione conviene verificare il funzionamento su desktop, smartphone e pagine con pochi o molti sottotitoli.

Come preparare il contenitore dell’indice in WordPress

L’indice deve essere inserito prima del testo dell’articolo, normalmente all’interno di un blocco HTML personalizzato nell’editor WordPress. Il contenitore iniziale può rimanere vuoto perché JavaScript inserirà automaticamente i collegamenti ai titoli H2 e H3.

Nel post o nella pagina, aggiungi un blocco HTML personalizzato e inserisci questo codice:

<nav id="indice-articolo" class="indice-articolo" aria-labelledby="titolo-indice">
<strong id="titolo-indice">Indice dell'articolo</strong>
<ul></ul>
</nav>

L’elemento nav comunica ai lettori dello schermo che il blocco contiene una navigazione interna. L’attributo aria-labelledby collega il menu alla scritta “Indice dell’articolo”, evitando un’etichetta ambigua.

Il codice JavaScript deve sapere quali elementi rappresentano il contenuto principale. Molti temi WordPress utilizzano .entry-content, mentre diversi temi basati sull’editor del sito usano .wp-block-post-content. Se il tema usa una classe personalizzata, il selettore va modificato nel file JavaScript.

Come aggiungere lo script che legge H2 e H3

Crea un file chiamato indice-articolo.js nel tema child, preferibilmente nella cartella js. Il file seguente seleziona il contenitore dell’indice, individua i titoli e genera i collegamenti con identificatori compatibili con gli URL interni.

Passo 1: inserire il codice JavaScript

document.addEventListener('DOMContentLoaded', function () {
const indice = document.querySelector('#indice-articolo');
const contenuto = document.querySelector(
'.entry-content, .wp-block-post-content'
);

if (!indice || !contenuto) {
return;
}

const elenco = indice.querySelector('ul');

if (!elenco) {
return;
}

const titoli = contenuto.querySelectorAll('h2, h3');

if (titoli.length === 0) {
indice.remove();
return;
}

const usati = new Set();

function creaSlug(testo) {
return testo
.toLowerCase()
.normalize('NFD')
.replace(/[u0300-u036f]/g, '')
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '') || 'sezione';
}

titoli.forEach(function (titolo) {
const testo = titolo.textContent.trim();

if (!testo) {
return;
}

let base = creaSlug(testo);
let slug = base;
let contatore = 2;

while (usati.has(slug) || document.getElementById(slug)) {
slug = `${base}-${contatore}`;
contatore++;
}

usati.add(slug);
titolo.id = slug;

const voce = document.createElement('li');
voce.className = titolo.tagName.toLowerCase() === 'h3'
? 'indice-livello-3'
: 'indice-livello-2';

const collegamento = document.createElement('a');
collegamento.href = `#${slug}`;
collegamento.textContent = testo;

voce.appendChild(collegamento);
elenco.appendChild(voce);
});

if (elenco.children.length === 0) {
indice.remove();
}
});

Lo script trasforma, per esempio, il titolo “Come configurare WordPress” nell’ID come-configurare-wordpress. Gli accenti vengono rimossi e gli spazi diventano trattini, così l’URL del collegamento resta leggibile.

Il controllo con Set evita duplicati quando due titoli hanno lo stesso testo. Se una pagina contiene già un elemento con lo stesso ID, lo script aggiunge un suffisso numerico come -2 o -3.

Passo 2: caricare il file nel tema child

Per caricare correttamente JavaScript in WordPress, aggiungi il seguente codice al file functions.php del tema child. Il caricamento viene limitato alle pagine singole di articoli e pagine, evitando lo script nelle sezioni dove l’indice non serve.

function backdigit_carica_indice_articolo() {
if (is_singular('post') || is_page()) {
wp_enqueue_script(
'indice-articolo',
get_stylesheet_directory_uri() . '/js/indice-articolo.js',
array(),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'backdigit_carica_indice_articolo');

get_stylesheet_directory_uri() punta al tema child attivo, mentre l’ultimo parametro true carica lo script nel footer. Il file deve trovarsi quindi nel percorso wp-content/themes/nome-tema-child/js/indice-articolo.js.

Se il codice viene inserito nel tema principale, un aggiornamento del tema può sovrascriverlo. Il tema child è la scelta più sicura; in alternativa è possibile usare un plugin per aggiungere codice personalizzato, verificando che il plugin carichi JavaScript solo sul front-end.

Come organizzare correttamente i titoli dell’articolo

Un indice automatico WordPress JavaScript funziona meglio quando i titoli seguono una gerarchia semantica. Il titolo dell’articolo dovrebbe essere H1, le sezioni principali H2 e gli approfondimenti subordinati H3.

Usa un solo H1 per il titolo principale della pagina.
Usa H2 per gli argomenti principali dell’articolo.
Usa H3 soltanto per sezioni contenute in un H2.
Non scegliere H2 o H3 soltanto per aumentare la dimensione del testo.
Mantieni titoli brevi e descrittivi, perché saranno mostrati anche nell’indice.

Il codice seleziona tutti gli H2 e gli H3 presenti nel contenitore del contenuto. Per questo motivo è preferibile non inserire titoli decorativi o intestazioni di widget dentro .entry-content, altrimenti potrebbero comparire nell’indice.

Se vuoi escludere una sezione specifica, puoi aggiungere una classe al titolo e modificare il selettore JavaScript. Per esempio, un H2 con classe senza-indice può essere escluso con questo selettore:

const titoli = contenuto.querySelectorAll(
'h2:not(.senza-indice), h3:not(.senza-indice)'
);

La classe va aggiunta nell’editor a blocchi attraverso le impostazioni avanzate del blocco Titolo, nel campo Classe CSS aggiuntiva.

Come migliorare l’aspetto e lo scorrimento dell’indice

Il CSS rende l’indice riconoscibile e consente di distinguere visivamente i titoli H3 dagli H2. Puoi aggiungere queste regole in Aspetto > Personalizza > CSS aggiuntivo, se il tema mostra ancora il Personalizzatore, oppure nel foglio di stile del tema child.

.indice-articolo {
margin: 1.5rem 0 2rem;
padding: 1rem 1.25rem;
border: 1px solid #d9d9d9;
border-radius: 6px;
background: #f7f7f7;
}

.indice-articolo strong {
display: block;
margin-bottom: 0.75rem;
}

.indice-articolo ul {
margin: 0;
padding-left: 1.25rem;
}

.indice-articolo li {
margin: 0.4rem 0;
}

.indice-articolo .indice-livello-3 {
margin-left: 1rem;
font-size: 0.95em;
}

.indice-articolo a {
text-decoration: none;
}

.indice-articolo a:hover,
.indice-articolo a:focus {
text-decoration: underline;
}

html {
scroll-behavior: smooth;
}

La proprietà scroll-behavior: smooth attiva uno scorrimento graduale verso il titolo selezionato. Se il tema usa una barra di navigazione fissa, il titolo potrebbe finire nascosto sotto l’intestazione; puoi compensare il problema con questa regola:

.entry-content h2,
.entry-content h3 {
scroll-margin-top: 90px;
}

Il valore 90px non è universale: deve corrispondere, almeno approssimativamente, all’altezza della barra fissa del tema. Se il sito non usa un’intestazione fissa, questa regola può essere omessa.

Dopo l’inserimento, svuota la cache di WordPress, del plugin di ottimizzazione e della rete di distribuzione dei contenuti, se presente. Controlla il codice sorgente della pagina per verificare che ogni H2 e H3 abbia un ID e che ogni collegamento dell’indice punti a un ID esistente.

L’indice automatico WordPress JavaScript è pronto quando i titoli generano collegamenti interni senza interventi manuali.

Potrebbe interessarti anche:

Vorresti trasformare la tua casa in un Hosting per siti Web?

FAQ

Sì, purché il contenuto dell’articolo utilizzi una classe riconosciuta dallo script, come .entry-content o .wp-block-post-content.

Sì. Sostituisci querySelectorAll('h2, h3') con querySelectorAll('h2') per mostrare esclusivamente le sezioni principali.

No. Il codice usa JavaScript standard e può essere caricato dal tema child tramite functions.php.

Verifica che esistano il blocco con ID indice-articolo, il file JavaScript nel percorso indicato e una classe corretta per il contenitore del testo.

Non garantisce un miglioramento diretto del posizionamento, ma facilita la navigazione e crea collegamenti interni chiari verso le sezioni dell’articolo.

Altri articoli di questa serie: