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.

Sprungmarke / Ankerlink setzen

  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;
}

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.

Schreibe einen Kommentar

17 − 11 =