Sprungmarken / Ankerlinks in WordPress anlegen

Ankerlinks sind praktisch, um zu verschiedenen Inhalten auf einer Seite oder einem Beitrag springen zu können. Dadurch sparen sich deine Besucher ewiges Scrollen und landen schneller an der für sie interessanten Stelle. In diesem Beitrag zeige ich dir, wie du ohne Plugin solche Sprungmarken anlegen kannst.

Letztes Update im März 2021: Abschnitt für Gutenberg-Editor hinzugefügt.

1. Sprungmarke / Ankerlink setzen im klassischen Editor in WordPress

  1. Öffne die Seite / den Beitrag, in dem du Ankerlinks setzen möchtest.
  2. Navigiere dich zu der Stelle, zu der du später “springen” möchtest (= dein Zielort).
  3. Füge vor der Überschrift/ einem Wort/ einem Element im Texteditorbereich eine ID ein:
    <a id="bezeichnung"></a>
  4. Verlinke eine beliebige Stelle auf dieser Seite, von der du zum Zielort springen möchtest:
    <a href="#bezeichnung">Textlink zum Ankerpunkt</a>
  5. Speichern
  6. Testen

Beispiel Sprungmarke

Wenn du alles richtig gemacht hast, springst du beim Klick auf den Textlink / Bildlink an die entsprechende Stelle. In diesem Beitrag habe ich eine Sprungmarke eingefügt.

Wenn du auf diesen Link klickst, springst du wieder nach oben zum ersten Wort des Beitrags unter der Hauptüberschrift.

Problem Sticky Menu und Sprungmarke / Ankerlink

Falls du ein “Sticky Menu” benutzt (ein Menü, das immer angezeigt wird und nicht beim Scrollen verschwindet), kann es vorkommen, dass dieses Menü deine Sprungmarke überdeckt.

Dieses Problem kannst du z.B. mit CSS lösen.

/*Anpassungen Sprungmarken*/
a:target {
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

2. Sprungmarken / Ankerlink im Gutenberg Editor (ab WordPress Version 5.0 Standard)

Im “neuen” Gutenberg-Editor kannst bei den Einstellungen eines Blocks (z.B. Text/Absatz oder Überschrift) unter >Erweitert auf der rechten Seite einen HTML-Anker einfügen:

Sprungmarke Gutenberg WordPress

Danach kannst du an einer beliebigen Stelle im Text wieder zum Block mit dem HTML-Anker wie folgt verlinken:

sprungmarke-link-gutenberg-wordpress-2

Im Beispiel aus dem Screenshot wäre der Link jetzt #sprungmarke2. In dem Fall verlinkt er nach oben zur Überschrift für den Abschnitt mit der Erklärung für Ankerlinks mit dem Gutenberg-Editor.

Das war es auch schon. Auch mit dem Gutenberg Editor ist es also sehr leicht, einen Ankerlink einzufügen.

3. Allgemeiner Hinweis Sprungmarken auf andere Seiten (URLS)

Falls du auf deiner Website an eine bestimmte Stelle auf einer anderen Seite oder einem anderen Beitrag springen möchtest, dann brauchst du neben #sprungmarke auch noch die komplette URL der Zielseite.

Aus #sprungmarke wird dann z.B. https://sebastianwuerfel.com/sprungmarken-ankerlinks-wordpress/#sprungmarke

Wenn du auf diesen Link drauf klickst, kommst du auch wieder nach ganz oben. Aber du könntest ihn auch auf der Startseite oder in einem anderen Beitrag verwenden, um genau an die gleiche Stelle zu kommen.

Aber wenn du die Sprungmarken nur auf einer Seite benötigst, reicht die Variante mit #sprungmarke aus.


Dir gefällt dieser Beitrag? Dann würde ich mich sehr darüber freuen, wenn du ihn teilen oder du einen Kommentar hinterlassen würdest. Vielen Dank! :)


Sebastian Würfel Avatar

Über mich

Seit über zehn Jahren nutze ich WordPress und schreibe auf verschiedenen Blogs. Als Spezialist für Content Marketing und SEO arbeite ich neben meiner Selbstständigkeit seit einiger Zeit für die NETZhelfer GmbH. Dort helfe ich verschiedenen Kunden als Website Booster. Auf meiner persönlichen Website berichte ich über meine Learnings.


Alle neuen Artikel im Newsletter

Keine Sorge, ich spamme nicht! Natürlich ist eine Abmeldung vom Newsletter jederzeit möglich. Die Eintragung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß der Datenschutzerklärung.


Schreibe einen Kommentar