Sprungmarken und Fußnoten in WordPress

|
Posted on

Note: Content might be outdated!

Sprungmarken und Fußnoten kannst du in WordPress mit einfachem HTML erstellen. Das geht tatsächlich so leicht, dass jeder Umweg über einen Shortcode oder ein Button im visuellen Editor nichts weiter als unnützen Ballast für deinen Workflow bedeuten würde. Hier findest du ein Beispiel, wie du Sprungmarken (oder: Anker) und Fußnoten über den Text-Editor in WordPress hinzufügst.

  1. Kreiere so etwas für jeden Anker in deinem Text: <a id="a(n)" href="#f(n)"><sup>[(n)]</sup></a>.
  2. Ersetze (n) mit einer aufsteigenden Nummerierung (1, 2, 3 …), oder denk’ dir ein komplett anderes Namenschema aus.
  3. Kreiere nun für jede Sprungmarke in deinem Text eine entsprechende Fußnote. Platziere die HTML-Eigenschaften id und href sozusagen „umgekehrt“ zueinander, so dass jedes href von oben zu einer id in einer Fußnote verweist, und umgekehrt.
  4. Wahlweise kannst du deine Fußnoten mit einem <footer>-Element umgeben, für weitere Styling-Optionen.

Wann immer du nun auf einen Anker #a(n) klickst, wirst du nach unten zum Anker #f(n) in einer Fußnote springen. Klickst du dann auf eben diesen Anker #f(n) in der Fußnote, bringt dich das wieder nach oben zu #a(n) in deinem Text.

Das war’s! Benutze das Code-Beispiel nach Belieben, wenn du Verwendung dafür hast. (Die vielen Leerzeilen haben mit der auto-p-Funktion in WordPress zu tun. Wenn du den Code woanders einsetzt, erstelle die entsprechenden <p>-Elemente von Hand!)

2 reactions on “Sprungmarken und Fußnoten in WordPress”

  1. Danke für den Artikel! Jedoch kann ich mich optisch mit einem Aspekt nicht anfreunden: Sobald ich in der Fußnote einen Link setze, ist dieser auch hochgestellt, weil die Sprungmarke ja auch ein Link ist. Ich hätte also gerne die Fußnotenziffer vorweg hochgestellt (wie im Code-Beispiel) aber bei einem im Fußnotentext einen enthaltenen Link soll dieser nicht hochgestellt sein. Lässt sich dies realisieren?

    1. Hi Stefan, wenn Links innerhalb deiner Fußnoten hochgestellt erscheinen, kann das aus meiner (Blind-)Sicht eigentlich nur daran liegen, dass du für diese Links das <sup>-Element verwendest (wie oben im Text). Vielleicht mit-kopiert?

Reactions are closed.