Wordpress:Fußnoten einfügen

Aus VeloWikiRuhr
Wechseln zu: Navigation, Suche

Man kann Fußnoten in Wordpress mit dem Plugin Footnotes realisieren, aber man hat dann wenig Einfluss auf Gestaltung und Lage der Fußnotenzeichen und des Textes in den Fußnoten. Jedes Plugin kann auch die Quelle von Problemen sein oder irgendwann nicht mehr kompatibel sein. Daher arbeiten wir mit html (steuert die Struktur der Seite) in Verbindung mit CSS (steuert das Aussehen der Seite).

An der Stelle, an der das Fußnotenzeichem stehen soll, fügt man in der html-Ansicht folgendes ein:

<a id="anker1" class="fussnote" title="Zur Fußnote" href="#fn1">1</a>

Es handelt sich also technisch um ein Link (Anker, daher das a). Zur Anwendung ein paar Hinweise ohne das HTML dahinter zu erklären.

  • Der Text in den Anführungszeichen bei ID kann frei gewählt werden. Für jede Fußnote braucht es einen eigene Anker.
  • Der Abschnitt mit title kann weggelassen werden. Der Text hier wird angezeigt, wenn man über die Fußnote fährt.
  • Mit href wird eine Sprungmarke definiert. Das ist quasi eine andere ID (s. u.). Die # wird immer vor das Sprungziel gesetzt und ist nicht Teil der ID.
  • Dann folgt die Fußnotennummer zwischen den spitzen Klammern.
  • Angezeigt wird nur die letzte Ziffer. Die Anker können auch ohne Ziffern sein.
  • <ankerX> und <fnX> sind also frei gewählt und nicht durch html vorgegeben. Das Prinzip kann man auch für Querverweise etc. nutzen.

An der Stelle, wo die Fußnote angezeigt werden soll, gibt man dann ein:

<footer class="fussnotenbereich">

Danach folgen die Fußnoten:

<a id="fn1" class="fussnote" title="Zur Textstelle" href="#anker1">1 </a>

Hier sind die Bezeichnungen von id und href andersrum als im Text. Hinter der Ziffer sollte man direkt ein Leerzeichen einfügen. Wer das Prinzip verstanden hat, ist damit sehr flexibel in der Gestaltung.

Abgeschlossen wird der Bereich durch

</footer>


Es ist das Plugin AddQuicktag installiert, dass die Codes bereit stellt. Es muss für jede Seite getrennt aktiviert und eingerichtet werden. (Bei Fragen an Norbert wenden)

Addquicktag1.jpg

Einfach den jeweiligen Code einfügen. Ab der zweiten Fußnote kommt man um html nicht drum herum, um die Anker festzulegen. Dafür Rechts auf <Text> klicken (Nr. 1 in der folgenden Grafik). Dort stehen die Codes dann als Buttons zur Verfügung.

Addquicktag2.jpg

An der Stelle der Fußnote im Text einmal auf <Fußnote (Textanker)> klicken und ab der zweiten Fußnote die drei Zahlen anpassen. Unter dem eigentlich Text dann <Fußnotenbereich einfügen>. Es werden direkt Leerzeilen zwischen den beiden Tags eingefügt, in die man <Fußnote (Fußnotenapparat)> einfügen kann, um dort den Fußnotentext einzugeben. Ab der zweiten Fußnote müssen auch hier die drei Zahlen angepasst werden.


Wenn man diesen Weg wählt, kann das dann dauerhaft problemlos angezeigt werden weil für die Anzeige kein Plugin mehr nötig ist, da alles reines HTML/CSS ist. Wenn AddQuickTags deinstalliert wird oder nicht mehr kompatibel ist, hat das keine Folgen, weil es nur beim Erstellen hilft.

Achtung: Keine Fußnoten in wörtliche Zitate setzen! Man kann sie z. B. davor setzen. (z. B. wie XYZ VeloCityRuhr sagte²:")

Fußnoten in der Textverarbeitung vorbereiten

Bei längeren Texten bietet es sich an, den Text in einem Textverarbeitungsprogramm zu schreiben. Den Text dann in der visuellen Ansicht einfügen und in die Text-Ansicht wechseln.

  • Der Code sieht für die Fußnoten so aus: <a href="#_ftn1" name="_ftnref1">[1]</a>. Da ergänzt man dann einfach überall class="fussnote" title="Zur Fußnote" und löscht die eckigen Klammern. Den Rest am besten so lassen wie er ist. Der Code sieht dann z. B. so aus: <a href="#_ftn1" name="_ftnref1" class="fussnote" title="Zur Fußnote">1</a> Das wirklich entscheidende ist die Angabe der Klasse zwischen den spitzen Klammern.
  • Das gleiche nur mit class="fussnote" title="Zur Textstelle" bei den Fußnoten unter dem Text machen.
  • Die Fußnoten müssen noch durch die Klasse für den Fußnotenbereich umschlossen werden wie oben beschrieben,

Die Code-Schipsel kann man sich durch einmaliges Einfügen (s. oben) der Code-Schnipsel schnell holen. Die Rest davon natürlich löschen.;-)


Ungelöst/Ablage

  • Bedingter Nullbreitenwechsel in langen URL zur Steuerung des Umbruchs.


Ablage

http://www.stichpunkt.de/beitrag/umbruch.html

&#8203; (dez.)

https://dnaber.de/blog/2009/fussnoten_in_html/#comment-1338 Randnoten Einfach an der Stelle der Fußnote die Existenz einer solchen vermerken (z.B. durch eckige Klammern oder Sternchen oder eine hochgestellte Zahl oder sonst ein passendes Zeichen) und danach die Fußnote im Quelltext direkt anschließen und als span-class ausweisen (diese definiert man in der css einfach als flow right, dann landet sie am rechten Rand; man kann sie auch so formatieren, dass sie neben dem eigentlichen Text steht und nicht wie bei meinem Beispiel in diesen eingeklinkt wird). --> http://www.zanjero.de/2004/lanzelet/