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 Juni 2022: Alternative für Abstand nach oben bei angeheftetem Menü mit Scroll Offset
• 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;
}

Da diese Lösung zuletzt teilweise nicht mehr funktioniert hat, hier auch noch eine Alternative mit Scroll Offset für Sprungmarken / Scroll Targets:

/* Abstand Sprungmarken h2 und h3 Überschriften für Elemente mit einer ID*/ 
h2[id], h3[id] {
    scroll-margin-top: 70px;
} 

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:

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

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.