Fußnoten sind eine feine Sache. Das wissen nicht nur Leute, die irgendwann mal im Studium Hausarbeiten oder im Rahmen einer späteren wissenschaftlichen Tätigkeit Fachtexte schreiben mussten. Die Fußnote gehört dabei zum guten Ton. Aber auch in anderen Zusammenhängen kann sie sehr sinnvoll und manchmal durchaus ganz lustig sein. Doch wie lassen sich bei WordPress Fußnoten setzen? Braucht es dafür zwangsläufig ein Plugin – oder geht das auch anders, von Hand?
Update: Seitdem WordPress mit dem Gutenberg Editor arbeitet, ist das manuelle Setzen von Fußnoten etwas übersichtlicher geworden. Die Überarbeitung dieses alten Beitrags trägt vor allem dieser Neuerung Rechnung.
Einsatzgebiete für Fußnoten
Der typische Einsatz von Fußnoten findet sicherlich im wissenschaftlichen Bereich statt. Und hier spielen vor allem Zitate eine wesentliche Rolle. Über fehlende oder unzulängliche Quellenangaben sind immerhin schon so manche Promovierte gestolpert und mussten dann von ihrem Amt zurücktreten.
Dabei darf man nicht vergessen, dass es nicht nur um direkte Zitate geht. Wenn ich hier also etwas zitiere, sollte ich auf jeden Fall auch angeben, wen ich da zitiere. Und wo dieses Zitat zu finden ist.
Aber auch das indirekte Zitat, Paraphrase genannt, spielt hier eine große Rolle. Das heißt, dass ich auch die Quelle angeben muss, wenn ich mich mit der grundlegenden Idee eines anderen auseinandersetze und sie mit meinen eigenen Worten wiedergebe. Denn auch dann hat der oder die Urheber/in ein Recht auf Nennung.
Fußnoten fern der Wissenschaft
Dieses Recht auf Nennung gilt natürlich nicht nur im wissenschaftlichen Bereich. Viele denken, wenn sie bedeutsame Sätze, die sie bei anderen klauen, nur gut genug umformulieren, wäre das schon okay. Nein, ist es nicht. Aber es ist okay, sich mit dem Gedankengut anderer zu beschäftigen und zum Beispiel im Rahmen einer Fußnote auf die Quelle zu verweisen. Ein Link im Text kann auch nicht schaden.
Überdies kann so eine Fußnote aber auch sinnvoll sein, wenn es um gedankliche Ergänzungen geht, die den Fluss des Textes stören würde. Ein Beispiel wäre eine Rezension, an der ich mitgeschrieben habe. Da wollte der Chef vom Dienst auch noch seinen Beitrag leisten und hat sich nicht einfach in den Text gestohlen, sondern eine Fußnote gesetzt.
Oft dienen Fußnoten aber auch einfach nur der gedanklichen Ergänzung. Vor allem können sie sinnvoll sein, wenn es um die Erläuterung oder Übersetzung einzelner Begriffe oder Zusammenhänge geht. Würde diese Erläuterung oder die Übersetzung den Lesefluss stören – ab in die Fußnote damit. Wer das dann lesen will – bitte schön. Alle anderen werden so nicht belästigt.
Fußnoten finden sich selbst in der Erzählliteratur. Und es gibt sogar eine Doktorarbeit, die sich mit diesem Zusammenhang beschäftigt. Ich erinnere mich jetzt nur an ein solches Werk. »Der zweite Engel« (handelt von einem tödlichen Virus, aber zum Glück erst am Ende des 21. Jahrhunderts – puh!) von Philip Kerr. Das Buch strotzte nur so vor Fußnoten, war aber auch sonst recht anspruchsvoll.
Im Rahmen eines Blogbeitrags wie diesem müssen Fußnoten jedenfalls nicht zwangsläufig sein. Aber es kann von Vorteil sein, wenn Sie im Einzelfall wissen, wie Sie bei WordPress Fußnoten setzen können.
Die Plugin-Lösung für das Setzen von Fußnoten in WordPress
Im Jahr 2016 hatte ich an dieser Stelle noch das Plugin FD Footnotes empfohlen. Es war (und ist wohl auch immer noch) extrem einfach zu nutzen. Allerdings war dieses Plugin schon damals lange nicht mehr aktualisiert worden. Zwar gehe ich davon aus, dass es immer noch funktioniert. Andernfalls hätte WordPress es aus dem Plugin Repository geworfen. Aber empfehlen möchte ich es nun doch nicht mehr.
Alternativ schlage ich nun das Plugin Modern Footnotes vor.1 Dessen Optionen sind auch sehr übersichtlich und auf jeden Fall ausreichend. Und wie das veraltete Plugins arbeitet auch dieses mit einem Shortcode.
[mfn] text ... text ... text ... [/mfn]Alles, was Sie tun müssen, ist diesen Shortcode an gewünschter Stelle im Text einzufügen. Den Text, den Sie als Fußnotentext anzeigen wollen, fügen Sie einfach anstelle meines Platzhalter-Textes ein. In der Beitragsbearbeitung bleibt es dann bei dieser Ansicht. Im Frontend aber zeigt Ihr Beitrag an dieser Stelle eine hochgestellte 1.
Modern Footnotes Optionen
Je nachdem welche Einstellungen Sie für das Plugin gewählt haben, erscheint an dieser Stelle mit der hochgestellten 1 nun ein Tooltip mit Ihrem Fußnotentext.
Alternativ können Sie das Ganze aber auch so einstellen, dass der Fußnotentext an dieser Stelle im Fließtext aufklappt. Oder sagen wir besser: Er nimmt sich dort einfach den Platz, den er braucht. Das ist vor allem auf Smartphones sicherlich eine sinnvolle Variante.
Auch können Sie entscheiden, ob die Fußnotentexte zudem unterhalb Ihres Beitrags als Liste erscheinen sollen. Und ob diese dann eine Überschrift haben sollen. Gehen wir es man ganz gewagt an und betiteln wir mit: Fußnoten. Wie genau diese Überschrift lauten soll, können Sie jedenfalls auch selbst entscheiden.
Was dieser Liste dann allerdings fehlt, sind die Verlinkungen zurück zum Text. Überdies sollten Sie die Option nutzen, diese Liste per CSS zu formatieren. Denn in der Tat sorgt das Plugin für eine recht kleine Schriftgröße, die Google ganz bestimmt als zu klein erachtet. Die folgende Definition sollte helfen:
.modern-footnotes-list {
font-size: 1em;
}Mir erscheint dieses Plugin als eine gute Lösung für all jene, die öfter mit Fußnoten arbeiten. Wer wie ich aber doch eher selten solche Zusatzinformationen anbietet, kann getrost darauf verzichten und im Einzelfall Fußnoten als Sprunglinks setzen.
Die manuelle Lösung: Fußnoten auch in WordPress als Sprunglinks setzen
Die Idee, die hinter allem steht, basiert auf einer grundlegenden HTML-Idee: dem Sprunglink. Der Sprunglink ist dem handelsüblichen Verweis auf eine Seite Ihrer eigenen oder einer externen Website gar nicht so unähnlich. Nur bleiben wir bei dieser Art von Verweis auf derselben Seite.2
Ein Sprunglink braucht dabei ein Sprungziel. Im Sinne der Fußnote heißt dies: Da ist auf der einen Seite das Verweiszeichen für die Fußnote. Wir sprechen hier von der hochgestellten, anklickbaren Ziffer im Text, die auf das Sprungziel verlinkt. Und das Sprungziel ist der Fußnotentext am Ende Ihres Beitrages.
Zurück soll das Ganze aber auch funktionieren. Das heißt, auch am Ende des Fußnotentextes braucht es ein Verweiszeichen mit Sprunglink. Dessen Sprungziel ist die hochgestellte, anklickbare Ziffer im Text, die uns gerade noch zum Fußnotentext geführt hat.
Fußnoten mit dem Classic Editor
Sagen wir, Sie wollten am Ende eines Absatzes ein Verweiszeichen auf einen Fußnotentext einfügen. Weil wir nun im Bereich der HTML-Auszeichnung sind, müssen Sie in der Beitragsbearbeitung von der visuellen in die TEXT-Bearbeitung schalten. Dort schreiben Sie an das Ende des Absatzes eine 1 und zeichnen Sie wie folgt aus:
<sup><a href="#fn-1" id="fnref-1">1</a></sup>
Das tag <sup> </sup> sorgt dafür, dass die Ziffer 1 hochgestellt dargestellt wird. Mit <a href=#...> </a> geben Sie das Ziel des Verweises an, und die ID fnref-1 sorgt dafür, dass der Sprung zurück funktioniert.
Im zweiten Schritt gehen Sie zum Ende des Beitrags und fügen hier Ihren Fußnotentext ein, inklusive der HTML-Markierung, die ihn zum Sprungziel macht:
<ol><li id="fn-1">fußnotentext ... text ... text... text... <a href="#fnref-1">↑</a></li></ol>
Das HTML-tag <ol> </ol> macht aus allem einem nummerierte Liste. <li> </li> steht für den einzelnen Listeneintrag und erhält als Attribut die passende ID, die sie zum Sprungziel macht. In unserem Beispiel ist dies id="fn-1" für den Link mit der Zielangabe #fn-1.
Der Weg zurück funktioniert über den Sprunglink #fnref-1, der zu der ID fnref-1 führt. Als Verweiszeichen für den Weg zurück benutze ich einen Pfeil nach oben. Dafür benutze ich das HTML-Sonderzeichen ↑.
Fußnoten mit WordPress Gutenberg setzen
Auch mit Gutenberg ist es nötig, die Möglichkeit der HTML-Bearbeitung zu nutzen. Die aber bezieht sich dann immer nur auf den einzelnen Block und ist somit sehr übersichtlich.
Dabei geht es dann nicht nur um das HTML-Sonderzeichen für das Verweiszeichen »Pfeil nach oben« im Fußnotentext. Hier geht es vor allem um die jeweilige ID als Attribut für das Sprungziel.
Zwar bietet Gutenberg den HTML-Anker. Der würde die passende ID auszeichnen, jedoch bezieht er sich auf das übergeordnete Element. Im Text mit der hochgestellten Ziffer wäre dies also der gesamte Absatz. Und beim Fußnotentext unten würde WordPress die gesamte Liste so kennzeichnen und nicht den einzelnen Listeneintrag. Beides könnte man sicherlich so machen, wenn es nur einzelne Fußnoten gibt, die im Text gut verteilt sind. Aber eigentlich wäre das kein sinnvolles Vorgehen.
Das sinnvolle Vorgehen beginnt mit einem normalen Block. Im Text wäre dies ein normaler Absatzblock. In den fügen Sie wieder an der gewünschten Stelle eine 1 ein. Und damit diese 1 nun hochgestellt und kleiner erscheint, nutzen Sie die Option, die WordPress Ihnen dafür bietet. Erreichbar ist diese über den Button in der Werkzeugleiste, der weitere Block-Werkzeuge anzeigt. Dort erscheint neben Durchgestrichen und Hervorgehoben et cetera eben auch die Option Hochgestellt.
Nun können Sie das hochgestellte Verweiszeichen auch gleich als Link auszeichnen. Den passenden Button dafür sollten Sie bereits kennen.
Für die Vergabe der ID als Attribut für das Sprungziel vom Fußnotentext zurück müssen Sie den Block als HTML bearbeiten. Die Option finden Sie unter dem Butten Ansicht anpassen.
Wenn Sie die Verlinkung für das Verweiszeichen bereits gesetzt haben, finden Sie das entsprechenden HTML-tag <a href="fn-1"> </a> schon vor. Hier ergänzen Sie dann nur noch id="fnref-1".
Den Fußnotentext mit Gutenberg erstellen und bearbeiten
Ähnlich gehen Sie nun für den Fußnotentext vor. Hier erstellen Sie einen Listenblock und wählen die Variante der nummerierten Liste.
Für die Erstellung und Auszeichnung des Pfeils nach oben sowie für die Auszeichnung der Sprungziel-ID schalten Sie wieder um in die HTML-Bearbeitung des Blocks.
Das war es auch schon. Minimal umständlicher als mit der Plugin-Lösung. Dafür aber eben auch ohne Plugin, das Sie regelmäßig aktualisieren müssten.
Sprunglinks in anderen Kontexten
Sprunglinks lassen sich natürlich sonst auch in anderen Kontexten nutzen. Ich zum Beispiel habe in diesem Beitrag einen solchen Link von dem Update-Hinweis auf die Überschrift zu der Anleitung für Gutenberg gesetzt. Hierfür lässt sich nun die Option HTML-Anker gut nutzen, die Gutenberg für einzelne Blöcke unter dem Panel Erweitert anbietet.
Damit für alle Leser/innen ersichtlich ist, dass es sich hierbei um einen Link handelt, der ein Ziel auf derselben Seite hat, nutze ich seit Kurzem übrigens eine kleine CSS-Definition:
.entry-content a[href^="#"]::after {
content:" \2193";
}Und damit nicht die Sprunglinks von dieser Ergänzung betroffen sind, die den Fußnoten dienen, gibt es nun auch noch folgende Definition:
.entry-content a[href^="#fn"]::after {
content:"";
}Somit zeigen also nur alle anderen Sprunglinks diesen Pfeil nach unten (im Allgemeinen geht es bei mir immer nach unten…), dessen HTML-Sonderzeichen übrigens ↓ist. Das hat im Rahmen von CSS aber nichts zu suchen. Der passende Unicode \2193 hingegen schon.
Fußnoten
- Diese Website benutzt das Plugin Modern Footnotes allerdings nicht. Dafür setze ich zu selten Fußnoten. Und dann mache ich es doch eher von Hand. ↑
- Den Sprunglink gab es schon in der HTML Version 1.0! ↑
Beitragsbilder: Britta Kretschmer
Schreibe einen Kommentar