Note a pié pagina (footnotes)

Su wordpress.com non esistono automatismi per creare note a pié pagina, né si possono installare plugins. Visto che la domanda mi è stata posta via mail, ho deciso di postare la risposta direttamente qui, anche se questo piccolo tutorial è applicabile a qualsiasi sito web e non necessariamente solo ai blog di wordpress.com.

Innanzitutto bisogna chiarire cosa s’intende per: “nota a piè pagina”. Si tratta di un link interno al post o alla pagina ad una riga di testo, di solito in fondo alla pagina, che contiene un commento o gli estremi di un testo citato. Quindi, prima di tutto, bisognerà crare un link che punta alla nota.

Poniamo che il testo della nota sia:

[1] Referenza

innanzitutto bisognerà darle un “nome” univoco con cui raggiungerla. Chiamiamola “nota1″. Il “codice” per affibbiare il nome alla nota sarà:

<a name=”nota1″>[1] Referenza</a>

A questo punto, per linkare la nota dal testo, basterà la sintassi:

<a href=”#nota1″>bla bla</a>

Cliccando su bla bla si “salterà” al testo: [1] Referenza.

Ora sarebbe bello poter avere un pulsante che ci riporti al testo che stavamo leggendo. Il procedimento è uguale, magari si potrebbe utilizzare addirittura un simboletto sempre uguale; HTML 4.0 offre un paio di possibilità, per esempio:

simbolo	codice HTML
⇑	⇑
↵	↵
Λ	Λ

La nota potrebbe quindi diventare:

<a name=”nota1″>[1] Referenza</a> <a href=”#testo1″>&uArr;</a>

ed il testo:

<a href=”#nota1″ name=”testo1″>bla bla</a>

Se poi volessimo referenziare le note con apici (così; bla bla¹), la sintassi diventerebbe:

bla bla<a href=”#nota1″ name=”testo1″>¹</a>

Non rimane che separare le note a piè pagina visivamente dal corpo del testo. Per farlo basterà una riga (se il vostro tema non fa storie): <hr />.

Infine, con l’attributo title=”bla bla” inserito nel tag <a href=”…”… > si avrà un testo che appare quando il cursore del mouse passa sui link.

Assemblando il tutto:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua1. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea2 takimata sanctus est Lorem ipsum dolor sit amet. 1. Nota ⇑ 2. Nota ⇑