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
&uArr;
&crarr;
Λ &Lambda;

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 bla1), la sintassi diventerebbe:

bla bla<a href=”#nota1″ name=”testo1″><sup>1</sup></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

24 thoughts on “Note a pié pagina (footnotes)

  1. silvana 29 ottobre 2007 / 20:47

    si le ancore le conoscevo pensavo con un plugin di prendere due piccioni con una fava come si dice..
    grazie ancora

    Mi piace

  2. kOoLiNuS 18 maggio 2008 / 12:02

    Isa, conosci un plugin per wordpress che lo faccia in “automagico” ?

    Mi piace

  3. AnimAzzurrA 2 settembre 2009 / 1:54

    GRANDE!!!!
    Sei grande!!!
    😉

    Ma dimmi….come faccio ad inserire un’immagine fissa sotto la testata e una fissa a piè pagina di modo che ad ogni cambio di pagina restino tali, SEMPRE???

    A.A.A.

    Mi piace

    • kOoLiNuS 4 ottobre 2009 / 13:03

      se parli del tuo blog personale, devi mettere mano al footer.php (se usi wordpress) perché il piè di pagina risulti sempre uguale … idem per la sezione della testata (che viene gestita da ciascun tema in maniera diversa)

      Mi piace

      • Pitocco 14 settembre 2010 / 11:00

        No, credo che le note e relativi riferimenti si debbano fare a mano, ovvero ci sono editor che ti aiutano a farlo, ma a scegliere poi gli attributi per ogni tag sarà compito tuo.

        Mi piace

  4. Lavoro a Domicilio 5 ottobre 2009 / 2:10

    Mettere mano inteso che bisogna creare le immagini e inserirle in un codice html che le rendi leggibili nel fotter.php

    Mi piace

  5. Alfredo 14 ottobre 2009 / 21:39

    sei stato diabolico nella spiegazione perchè io mi sto avvicinando a questo settore ,credo informatica,con curiosità e molta ignoranza.quanto hai spiegato spero di ruscire a renderlo praticabilegrazie alfredo

    Mi piace

  6. Pitocco 14 settembre 2010 / 11:28

    Perdonate, ma forse mi sono perso qualcosa. La spiegazione dei tag usati non è corretta, perché il tag seguente:

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

    Non viene evidenziato in un pagina html come una nota, ma come riferimento ad una ancora (Anchor). Sarebbe quindi da scrivere diversamente per avere l’accesso alla nota a piè di pagina:
    – sul testo con la nota –
    nota (1)

    – sul testa della nota a piè di pagina –
    torna alla citazione

    bla bla

    Spero di non aver scritto cavolate…

    Mi piace

    • Pitocco 14 settembre 2010 / 11:30

      Scusate, ma non so come poter evidenziare i codici html senza che vengano tradotti come li vedo io…

      Mi piace

  7. Pietro Barnabe' 3 febbraio 2016 / 12:06

    L’ha ribloggato su pietrobarnabee ha commentato:
    Cercando come inserire una nota in uno scritto su form wordpress, mi sono imbattuto in questa guida, che mi è stata utile.
    Ringraziando l’autore per averla resa disponibile,
    la rilancio, forse può aiutare qualcun altro.

    Mi piace

Lascia un commento!

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...