Come aggiungere salti di pagina ai contenuti su WordPress
Pubblichi articoli molto lunghi? Vuoi facilitare la navigazione all’interno dei tuoi contenuti? Abbiamo la soluzione!
Aggiungere salti di pagina a pagine e post su WordPress è una soluzione molto semplice, ma anche veramente efficace.
Se non sai esattamente cos’è un salto di pagina, dai un’occhiata alla nostra guida su come guadagnare online. All’inizio abbiamo creato un indice del post, così che questo sia facilmente navigabile. Cliccando su una voce dell’indice, gli utenti possono saltare alla sezione desiderata.
Alla fine di questa guida, potrai aggiunge salti di pagina anche sul tuo sito, senza dover installare alcun plugin aggiuntivo o fare modifiche al tuo tema!
Se sei interessato ad approfondire questo aspetto, il nostro video corso di HTML e il video corso di CSS possono aiutarti a padroneggiare questi due linguaggi e permetterti di personalizzare al massimo il tuo sito web.
Aggiungere salti di pagina con i codici HTML
Aggiungere salti di pagina è molto semplice. È sufficiente fare due cose:
- step 1: aggiungere un ID all’elemento sul quale vuoi portare l’utente (per esempio, un sottotitolo, un paragrafo, una lista puntata, eccetera)
- step 2: aggiungere all’interno del contenuti un link che porta all’elemento a cui è stato assegnato l’ID.
Per prima cosa, devi accedere la pagina o il post in questione, e modificare il contenuto in modalità Editore di Testo.
Non farti spaventare dai codici che vedi nell’Editore di Testo, si tratta di semplice HTML.
Step 1: aggiungi l’ID all’elemento di destinazione
Per prima cosa, individua l’elemento dove vuoi che l’utente sia portato quando ‘fa un salto di pagina’. Per esempio, potrebbe essere un sottotitolo di misura H2.
Il codice sarebbe questo:
<h2>Questo è il sottotitolo</h2>
Dobbiamo ora aggiungere un ID a questo elemento. Semplicemente, modifichiamo il codice HTML in questo modo:
<h2 id="salto-pagina-destinazione">Questo è il sottotitolo</h2>
Tra le virgolette di id=”” , puoi aggiungere qualunque ID a tua scelta! Non puoi però usare lettere accentate e altri caratteri speciali.
Step 2: inserisci il link
È arrivato il momento di aggiungere il link interno al contenuto, che di fatto farà ‘fare il salto’ all’elemento di destinazione.
Per prima cosa, identifica in quale parte del testo vuoi inserire il link. Per esempio, potrebbe essere una frase del tipo Clicca qui per andare al sottotitolo.
Aggiungi un link come fai di solito; però invece di inserire un normale url digita un cancelletto, seguito immediatamente dall’ID che hai associato all’elemento scelto nello step 1.
Ecco un esempio funzionante:
Ora cliccando qui, sarai portato all’inizio del post ;)
Riassumendo, ciò che devi fare è modificare il tag HTML dell’elemento di destinazione aggiungendo un ID. Quindi, inserire un link al testo con l’ID preceduto dal simbolo del cancelletto.
Tutto qui! Come vedi, aggiungere salti di pagina ai contenuti su WordPress è molto semplice, ed anche utile.
Se hai domande, puoi come sempre lasciare un commento qui sotto al post. Ti risponderemo al più presto.
NOTA: Questa guida è stata aggiornata il
Perfetto grazie, ha funzionato benissimo.
Ottimo Tiziano!
Ciao Chiara, ho seguito alla lettera le tue istruzioni, ma col mio tema Awaken non riesco a farle funzionare. Quando cerco di inserire il # con il nome dell’ancora, non trova la destinazione.
Quindi, la pagina non scrolla? Che comportamento ha?
Ciao! Quando digito il nome dell’ancora (ad esempio: #esempio) nel box che si apre cliccando su “inserisci link”, non trova la destinazione. Il testo viene visualizzato come link, cioè blu e sottolineato, ma di fatto non funziona.
Fai un altro test, usando un plugin specifico come il seguente per inserire l’ancora nel contenuto.
Ciao Chiara, utilizzo da molto le ancore, ma una cosa che mi sono sempre chiesto è:
ho una navbar fissa sul top della pagina, e quando clicco sull’ancora il titolo rimane sempre nascosto,.. come posso ovviare a questo?
Ciao Massimiliano, che tema stai utilizzando?
Un tema custom… è un problema?
No, solo che dovremmo vedere direttamente il sito per capire meglio l’origine di questo comportamento.