Come aggiungere note a piè di pagina semplici ed eleganti nei post del vostro blog WordPress

Avete mai visto siti web con piccoli numeri in apice nel testo che linkano a informazioni aggiuntive in fondo alla pagina? Si chiamano note a piè di pagina e sono un ottimo modo per fornire un contesto aggiuntivo o citare le fonti senza ingombrare il contenuto principale.

Alcuni lettori ci hanno chiesto come aggiungere note a piè di pagina alle loro pubblicazioni su WordPress, soprattutto quando scrivono contenuti scuri o articoli che necessitano di fonti.

In questo articolo vi mostreremo come aggiungere note a piè di pagina semplici ed eleganti ai vostri post su WordPress, passo dopo passo.

Perché aggiungere note a piè di pagina ai post del blog WordPress?

Se gestite un blog educativo, pubblicate ricerche o vi occupate di notizie, le note a piè di pagina sono un ottimo modo per dare maggiore contesto ai vostri contenuti. Potete usarle per aggiungere commenti, evidenziare fatti importanti o inserire citazioni di fonti accademiche sul vostro sito web.

Una nota a piè di pagina appare in genere come un piccolo numero in apice all’interno del corpo principale del testo. Il contenuto vero e proprio della nota a piè di pagina è collocato in fondo alla pagina o appare come un tooltip per distinguerlo dal contenuto principale.

Ecco un esempio:

Oltre a fornire chiarezza e trasparenza ai lettori, le note a piè di pagina possono far apparire il vostro sito WordPress più professionale e affidabile. Dimostrano che avete fatto le vostre ricerche e che avete le fonti a sostegno delle vostre affermazioni.

Fortunatamente, l’editor di WordPress.org ha una caratteristica integrata per le note a piè di pagina che si può facilmente utilizzare per inserire un contesto aggiuntivo. In questo modo, non dovrete aggiungere manualmente le note a piè di pagina.

Questa guida vi mostrerà come aggiungere note a piè di pagina di WordPress ai post o alle pagine del vostro blog utilizzando due metodi. Uno è l’utilizzo del blocco Note a piè di pagina nell’editor Gutenberg, l’altro è un plugin.

È possibile utilizzare i link sottostanti per passare a un metodo specifico:

Metodo 1: Come aggiungere note a piè di pagina in WordPress senza plugin

Questo metodo è più adatto a chi vuole usare semplici note a piè di pagina nei post dei blog e non vuole installare un plugin per farlo.

Per utilizzare il blocco WordPress Footnotes, è necessario aprire l’editor a blocchi di Gutenberg per una pubblicazione nuova o esistente.

Dopodiché, si può iniziare ad aggiungere blocchi di paragrafi, immagini e altri tipi di contenuto al post del blog. È anche possibile aggiungere dei cappucci per dare stile al testo e attirare l’attenzione dei lettori.

A questo punto, è sufficiente evidenziare una parola del contenuto a cui si desidera aggiungere la nota a piè di pagina. Nella barra degli strumenti del blocco, fare clic sulla freccia a discesa e selezionare “Nota a piè di pagina”.

A questo punto si verrà reindirizzati in fondo alla pagina, dove è stato aggiunto automaticamente il blocco Note a piè di pagina. Qui è possibile inserire le informazioni aggiuntive.

Inoltre, è possibile personalizzare il colore del testo, la tipografia, le dimensioni e il bordo del blocco utilizzando le impostazioni del pannello di destra.

Se nella nota a piè di pagina sono presenti dei link, è possibile cambiare il colore dei collegamenti per farli risaltare.

Ripetete questo passaggio per includere tutte le note a piè di pagina necessarie.

Quando si visualizza l’anteprima del sito WordPress, dovrebbe essere presente un collegamento a piè di pagina alla frase evidenziata in precedenza.

Se si fa clic sul collegamento ipertestuale, si arriva in fondo alla pagina con la nota.

Qui si può anche fare clic sulla freccia ipertestuale per tornare alla sezione in cui è assegnata la nota.

Volete davvero vedere l ‘anteprima del vostro sito web su mobile per assicurarvi che la nota a piè di pagina sia leggibile sulle schermate degli smartphone.

Sebbene questo metodo sia abbastanza semplice per i principianti, non offre molte opzioni di personalizzazione. Se state cercando altri modi per modificare l’aspetto delle note a piè di pagina, continuate con il metodo successivo.

Metodo 2: Come aggiungere note a piè di pagina in WordPress con un plugin

Un altro modo per creare note a piè di pagina è utilizzare il plugin gratuito Modern Footnotes. A differenza del blocco Footnotes, offre molte più opzioni per modificare l’aspetto delle note.

Ad esempio, è possibile far apparire la nota a piè di pagina come un tooltip, oltre a informazioni aggiuntive in fondo alla pagina.

La prima cosa da fare è installare il plugin Modern Footnotes. Per maggiori informazioni sull’installazione dei plugin, consultate la nostra guida su come installare un plugin di WordPress.

Nota: se non siete sicuri di utilizzare questo plugin, potete installarlo sul sito temporaneo WordPress Playground e giocarci.

Configurazione delle impostazioni del plugin Modern Footnotes

Una volta installato il plugin, è possibile andare su Impostazioni ” Note a piè di pagina moderne. Qui è possibile configurare le impostazioni delle note a piè di pagina in base alle proprie preferenze.

Esaminiamo una per una tutte le impostazioni.

Comportamento della nota a piè di pagina” consente di selezionare il comportamento della nota a piè di pagina quando il sito web viene visualizzato su un computer desktop.

È possibile far apparire la nota a piè di pagina quando il cursore passa sopra il tooltip o quando l’utente fa clic sul tooltip. In alternativa, la nota a piè di pagina può espandersi sotto il testo annotato.

La scelta dipende dalle vostre preferenze. Detto questo, la nota a piè di pagina si espanderà sotto il testo per impostazione predefinita sugli schermi mobili.

Inoltre, se necessario, è possibile selezionare la casella “Fai apparire il contenuto della nota a piè di pagina nel tooltip nativo del browser web quando si passa il mouse sul numero della nota”. Ciò significa che la nota a piè di pagina apparirà nel tooltip del browser anziché in quello del plugin quando il cursore passa sopra il testo.

Si consiglia di disattivare questa impostazione se si sceglie l’opzione tooltip per il comportamento della nota a piè di pagina sul desktop. In caso contrario, si avranno due tooltip per la stessa nota, cosa che i lettori potrebbero trovare fastidiosa.

Di seguito, si può anche scegliere di visualizzare l’elenco delle note a piè di pagina in fondo ai post. In questo modo, il lettore può vedere tutte le informazioni aggiuntive in un unico punto.

Si consiglia di attivare questa funzione anche quando il post del blog viene diffuso attraverso i feed RSS.

Scorrendo verso il basso, si può scegliere di inserire un’intestazione per l’elenco delle note a piè di pagina e di scegliere un tag di intestazione. Questo aiuta a separare il contenuto vero e proprio del post dalle note a piè di pagina. Si può scrivere qualcosa come Riferimenti, Note a piè di pagina, Citazioni o Informazioni aggiuntive.

Se si desidera aggiungere un CSS personalizzato per modificare il testo della nota a piè di pagina, è possibile inserirlo nella casella ‘Modern Footnote Custom CSS’.

Infine, è possibile personalizzare lo shortcode Modern Footnotes se non si desidera utilizzare la versione integrata. Assicuratevi di inserire lo shortcode senza le parentesi.

Una volta soddisfatti delle impostazioni, è sufficiente fare clic su “Salva modifiche”.

Aggiunta di note a piè di pagina con il plugin Modern Footnotes

Dopo aver configurato le impostazioni di Modern Footnotes, inseriamo alcune note a piè di pagina nel contenuto. Aprite l’editor dei blocchi per un post o una pagina nuova o esistente.

Ci sono due modi per aggiungere una nota a piè di pagina. Uno è quello di utilizzare uno shortcode, che è quello che consigliamo.

Per prima cosa, individuare la frase in cui si desidera inserire una nota a piè di pagina. Poi, proprio accanto a quella frase, digitate il seguente shortcode:

[mfn]Inserisci la tua nota a piè di pagina qui[/mfn]

Assicuratevi di sostituire il testo tra le parentesi con le vostre informazioni.

Suggeriamo inoltre di inserire lo shortcode all’interno dello stesso blocco della frase, proprio accanto al testo, senza spazi intermedi, come nell’esempio seguente. Altrimenti, la nota a piè di pagina potrebbe sembrare scollegata dal testo.

L’altro metodo consiste nel digitare il testo della nota a piè di pagina accanto alla frase a cui si vuole aggiungere la nota. Assicuratevi che non ci siano spazi tra il testo della nota e la frase.

Nell’esempio seguente, si vuole aggiungere una nota a piè di pagina contenente una citazione accademica per la frase che inizia con “Gli studi suggeriscono…”.

Quindi, evidenziare la nota a piè di pagina e fare clic sul pulsante con la freccia rivolta verso il basso nella barra degli strumenti. Quindi selezionare “Aggiungi una nota a piè di pagina”.

Lo svantaggio del secondo metodo è che può essere difficile tenere traccia di quali righe di testo hanno ricevuto una nota a piè di pagina e quali no, quando si modifica il contenuto. Per questo motivo consigliamo il metodo dello shortcode.

Quando si visualizza l’anteprima del post, si noterà che ora c’è un numero accanto alla frase. Se si utilizza l’opzione tooltip, la nota a piè di pagina apparirà così:

D’altra parte, la nota a piè di pagina apparirà sotto il testo se si utilizza la formattazione espandibile.

Ecco come appare quando si fa clic sul numero:

Infine, se si sceglie di visualizzare tutti i contenuti delle note a piè di pagina in fondo al post, è possibile scorrere verso il basso per trovarli tutti.

Dovrebbero trovarsi da qualche parte sopra la sezione commenti.

Approfondisci i modi per personalizzare i contenuti di WordPress

Oltre alle note a piè di pagina, ci sono molti modi per rendere i contenuti di WordPress più interessanti e leggibili per i visitatori.

Ad esempio, è possibile aggiungere font personalizzati a WordPress. In questo modo, potrete creare una tipografia unica e diversa da quella degli altri concorrenti, rendendo il vostro sito web più memorabile.

Inoltre, è possibile evidenziare determinati testi nei blocchi di testo per indirizzare l’attenzione degli utenti sulle informazioni più importanti.

Un’altra cosa che si può fare è visualizzare un’anteprima dal vivo dei link interni o esterni quando i visitatori ci passano sopra mentre scorrono i contenuti. È un modo semplice e coinvolgente per vedere l’anteprima della pagina che vedranno facendo clic sul link.

Ecco altre verifiche da selezionare:

• Come mettere in evidenza i nuovi post per i visitatori che ritornano in WordPress
• Come aggiungere contenuti dinamici in WordPress (Guida per principianti)
• Come aggiungere un ridimensionamento dei font in WordPress per l’accessibilità
• Come aggiungere la modalità scura al vostro sito web WordPress (facile)
• Come visualizzare le etichette nutrizionali in WordPress

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere note a piè di pagina al vostro sito web WordPress. Potreste anche leggere le nostre scelte degli esperti per i migliori builder di pagine trascina e rilascia per WordPress e la nostra guida su come modificare un sito web WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.