A volte, soprattutto quando un articolo è molto lungo, sarebbe corretto inserire all’inizio dei contenuti una sorta di indice.

Un elenco puntato di sezioni a cui si applicano dei link che portano con lo scroll automatico ad una determinata sezione del contenuto.

Ora con Gutenberg è ancora più semplice gestire questo tipo di interventi sul codice HTML.

Essendo la pagina composta da singoli blocchi, accedere alla modalità HTML solo per quel elemento risulta più facile. Invece prima la modalità HTML era per tutto il contenuto, dovendo così andare alla ricerca del punto specifico della pagina su cui ci interessava intervenire.

Per inserire link che portano alla stessa pagina, ma ad una sezione differente bisogna fare due cose:

  • Creare un link HTML tramite il tag <a>.
  • Modificare il codice HTML di una titolazione assegnandogli un ID univoco.

Partiamo dalla prima ed eseguiamo la procedura per inserire un normale link. La differenza? Nella URL.

Come vedi non abbiamo la solita URL come può essere https://webipedia.it/blog/ ma semplicemente #titolo01, dove l’asterisco indica che l’attributo è un id e “titolo01” il valore di tale attributo.

Non essendoci il protocollo, gli slash ed il resto, il link punterà alla pagina stessa, per la precisione all’elemento HTML con ID titolo01

Per assegnare un ID HTML ad un elemento, come in questo esempio faremo per una titolazione, basta attivare l’elemento, accedere al menu e poi selezionare Modifica come HTML.

Ora potrai modificare il tag HTML del titolo aggiungendo un attributo id=”…”

<h2 id="#titolo02">Sotto titolo 02</a>

Per tornare a modificare il blocco in formato visivo premi il Menu > Modifica visuale

Link a una sezione di una pagina diversa

Puoi anche creare un link da un’altra pagina che punta a una sezione specifica di un contenuto.

Il link in questo caso ha il formato https://tuosito.it/blog/#titolo02

Come vedi l’ID #titolo02 è stato aggiunta alla fine della URL della pagina.

Ovviamente quella pagina all’interno del suo HTML deve avere un elemento con id impostato a titolo02.

Ora se hai delle pagine con tanti testi sai come rendere un servizio migliore creando degli indici personalizzati che puntano alle diverse sezioni dei tuoi contenuti.

7 commenti
    • Lorenzo
      Lorenzo dice:

      Ciao Anna,
      passami il link della pagina e dimmi dove hai messo l’id nel codice HTML.

    • Anna
      Anna dice:

      L’errore era che c’era uno / di troppo.
      Praticamente togliendo lo / dopo blog ha funzionato.

    • Gianluca
      Gianluca dice:

      Ciao Anna,
      Quello che chiedi tu è spiegato nell’ultima parte dell’articolo.

      Devi inserire l’ID all’interno del codice della pagina di destinazione e poi aggiungere #nomeID dopo la url, quando vuoi che quella sezione sia raggiunta da pagine differenti.

      Buona giornata

    • Gianluca
      Gianluca dice:

      Ci deve essere sicuramente qualche errore o nel link o nel codice dell’ID, ma non so bene come altro aiutarti, posso solo farti vedere il procedimento in azione.

      Ad esempio, questo è un link che porta ad usa sezione di una pagina esterna da quello in qui si trova: https://webipedia.it/wordpress/migliori-temi-wordpress/#divi

      Nella pagina di destinazione è inserito id=”divi” in corrispondenza del titolo, come mostrato su questo articolo.

      Cerca di replicare il processo sul tuo progetto, e se non ci riesci puoi contattarci al supporto personalizzato.
      Buona giornata

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *