Divi Theme - 10% OFF

Erhalte 10% Rabatt auf das meistverkaufte WordPress Theme.

Divi Theme - Cyber Monday Sale

Das meistverkaufte WordPress Theme!

Tage
Stunden
Minuten
Sekunden

WordPress Anker setzen – Inhaltsverzeichnis mit Sprungmarken erstellen!

Titelbild - Inhaltsverzeichnis mit Sprungmarken-Anker erstellen
Zuletzt aktualisiert: 18. Januar 2022

Nutzerbewertungen

4.7/5 – (26 votes)

In dieser Anleitung erfährst du wie du Anker-Links setzst oder mithilfe eines Plug-ins ein Sprungmarken Inhaltsverzeichnis auf deiner WordPress Webseite implementierst.

Inhaltsverzeichnis

Was du über Sprungmarken wissen solltest!

Mit Hilfe von Sprungmarken lassen sich ganz einfach Inhaltsverzeichnisse erstellen. Dies macht vor allem bei längeren Artikeln mit mehreren Abschnitten Sinn, da sich so deine Besucher einfacher zurechtfinden können und direkt zur gewünschten Passage springen können.

Das steigert die Benutzerfreundlichkeit deiner Website und hat somit in der Regel immer einen positiven Einfluss auf deine Position in den Suchergebnissen von Suchmaschinen. (SEO –Suchmaschinenoptimierung (Was ist SEO?))

Eine Sprungmarke ist ein einfacher Link zu einer definierten Stelle auf einer Website. Wenn ein Besucher diesen Link klickt, scrollt bzw. springt die Seite zu der von dir definierten Stelle.

Die 2 Komponenten einer Sprungmarke

Komponente 1: Sprunglink

Ein Link worauf der Besucher klicken kann, um zu einem bestimmten Abschnitt zu springen.

Beispiel:

<a href=“#eindeutiger-beispieltext1″>Beispiel für einen Linktext im Inhaltsverzeichnis</a>

Komponente 2: Anchor Ziel

Das markierte Ziel, wohin der Link springen soll. Die gewünschte Stelle lässt sich auf zwei Arten markieren. Entweder mit Hilfe eines ID-Attributs für ein beliebiges Element oder einem Link ohne Text, welchen man an der gewünschten Stelle einfügt.

Beispiel 1: ID Attribut zu einer H2 Überschrift:

Vorher:
<h2>Das ist eine beispielhafte Überschrift</h2>

Nachher:
<h2 id=“eindeutiger-beispieltext1″>Das ist eine beispielhafte Überschrift</h2>

Beispiel 2: Link ohne Text an gewünschte Stelle einfügen

<a name=“eindeutiger-beispieltext1″></a>

Sprungmarken ohne PlugIn einfügen!

Als erstes müssen wir hierfür einen Link erstellen, auf den die Besucher klicken sollen.

So erstellst du diesen Anker Link im HTML Editor bei WordPress:

1. Logge dich in dein WordPress Dashboard ein.

2. Gehe auf die Seite/ den Beitrag auf dem du die Sprungmarken einfügen möchtest.

3. Klicke oben in der WordPress Administratorleiste auf „Seite bearbeiten bzw. Beitrag bearbeiten“

WordPress Administrator Leiste - Beitrag bearbeiten

4. Markiere ein Wort bzw. mehrere Wörter und versehe diese mit einem eindeutigen Link (#beispiel, Achte auf das #!)

WordPress Visual Editor - Link für Sprungmarke erstellen

5. Komponente 1: Fertig!

Als Nächstes muss definiert werden, zu welchem Punkt auf der Seite der Link springen soll.

So definierst du das Ziel der Sprungmarke bei WordPress:

1. Auf die HTML Ansicht wechseln. („Text“ Reiter rechts oben klicken, um die HTML Ansicht zu bearbeiten.

2. Beliebligem Element eine „id“ hinzufügen oder einen bezeichneten Link an beliebiger Stelle einfügen.

WordPress HTML Texteditor - markierte Sprungmarken

3. Speichern.

4. Komponente 2 und deine Sprungmarke ist fertig!

Inhaltsverzeichnis mit PlugIn einfügen!

Alternativ kannst du Inhaltsverzeichnisse auch ganz einfach mithilfe eines PlugIns erstellen lassen.

WordPress PlugIn - Easy Table of Contents

Das PlugIn „Easy Table of Contents“ erkennt deine gesetzten H-Tags und generiert ein Inhaltsverzeichnis automatisch.

Und so sieht das Ganze dann aus:

Beispiel Inhaltsverzeichnis mit dem WordPress PlugIn "Table of Contents"

Gerade bei Seiten mit vielen Beiträgen ist dies von Vorteil, da du mit nur einem Klick einstellen kannst, dass in allen Beiträge solche Inhaltsverzeichnisse erstellt werden sollen.

Dennoch sollte man diese unbedingt nochmal alle überprüfen!

Problem: Sprungmarke springt zu weit!

Dieses Problem tritt häufig auf, wenn du einen fixierten Header auf deiner Website verwendest und/ oder wenn du in WordPress eingeloggt bist und die Administrator Leiste oben angezeigt wird. So wird die Stelle von dem Header oder der Administrator Leiste verdeckt. Das sieht unschön aus und verwirrt Besucher.

So gehst du vor:

1. Füge eine Klasse hinzu. (In WordPress über die „Text“-Ansicht)

Beispiel an einer H2 Überschrift:

Vorher:
<h2 id=“eindeutiger-beispieltext1″>Das ist eine beispielhafte Überschrift</h2>

Nachher:
<h2 id=“eindeutiger-beispieltext1″ class=“position“>Das ist eine beispielhafte Überschrift</h2>

2. Speichern.

3. Folgenden Custom CSS Code hinzufügen.Am Einfachsten machst du das über:

a) ein Custom CSS PlugIn. (z.B. „Simple Custom CSS“)
b) ein bereits im Theme integriertes Custom CSS Feld.

/* Sprungmarke Position – Abstand hinzufügen */
.position::before {
display: block;
content: „“;
height: 120px;
margin-top: -120px;
visibility: hidden;
}

Achtung! Der Wert für Height und Margin-Top hängt von der Höhe eures Headers ab und muss eventuell verändert werden.

 

/* Sprungmarke Position – Abstand hinzufügen */
@media only screen and (min-width: 768px){ .position::before {
display: block;
content: „“;
height: 120px;
margin-top: -120px;
visibility: hidden;}
}

Info: Hier habe ich noch ein Media Query hinzugefügt, da bei der Demoseite aus meinem Tutorial der Header erst ab einer Breite von 768px fixiert ist.

4. Speichern.

5. Fertig.

Fazit

Sprungmarken sind super benutzerfreundlich und in Form eines Inhaltsverzeichnis ein Muss für lange Artikel. Deine Besucher können sich so leichter orientieren und finden gesuchte Informationen wesentlich schneller. Das führt zu einer höheren Zufriedenheit beim Besucher und deshalb in der Regel immer zu besseren Rankings bei Suchmaschinen.

 

Ich hoffe meine Anleitung hat dir weitergeholfen und wünsche dir viel Spaß mit deinen neuen Sprungmarken!

Hat dir meine Anleitung gefallen? Dann gebe doch eine positive Bewertung 🙂

4.7/5 – (26 votes)

Oder empfehle ihn deinen besten Freunden! 😉

Starte jetzt mit deiner eigenen WordPress Website: zum WordPress Tutorial!

4.7/5 - (26 votes)
Patrick Ruh

Patrick Ruh

Im Jahr 2017 gründete er WP Wizard, um Selbstständigen und kleinen Unternehmen bei der Erstellung einer Webseite unter die Arme zu greifen. Er absolvierte seinen Master in Business Development, Produkt- und Start-up Management und studierte Internet Marketing, User Experience und Entrepreneurship in den USA. Seine Tutorials werden monatlich von mehreren Tausend Besuchern angeschaut und inzwischen von verschiedenen Universitäten, Hochschulen und Volkshochschulen genutzt, um in das Thema „WordPress“ einzuführen. Seit 2019 ist er Co-Founder und CMO bei timeBuzzer, einer Zeiterfassungslösung für Freiberufler und Unternehmen.

14 Kommentare

  • Kann man den den Sprung denn auch smooth machen? Also eher dass es runter scrollt als springt? Sonst vielen Dank für die gute Erklärung, funktioniert auf jeden Fall.

    Antworten
  • Hallo, leider funktioniert kein Pluign mit Anker setzen. Freut mich das ich Ihre Seite gefunden habe. Sehr gute beispiele wie man es manuell hinkriegen kann. Lg Peter

    Antworten
  • Während meine erste Frage von gestern immer noch auf Moderation wartet, bin ich selbst auf die Lösung gekommen: nach dem Sprungname darf man kein Slash eintragen, also Dateiname#Sprungame ohne / am Ende, dann funktioniert es

    Antworten
    • Hi Xenia,

      super das du die Lösung bereits selbst herausfinden konntest und sie den anderen Nutzern mitteilst! 🙂

      Beste Grüße
      Patrick

      Antworten
  • Hallo Patrick, was mich fuchst ist, dass ein Sprung von Seite 1 auf bestimmten Textstelle in Seite 2 nicht zuverlässig funktioniert.
    Also ich schreibe auf Seite 1 den Link:
    https://www.domain.de/seite2#sprungname/ , auf Seite 2 ist z.B. eine Überschrift
    Sprungname Seite 2
    Ich komme zwar auf Seite 2, nicht aber auf den Ankerpunkt! Was mache ich falsch?

    Antworten
  • Mit ein paar Handgriffen genau das erreicht was ich gebraucht habe, Danke hierfür ;o)

    Antworten
  • Hi Patrick, gute Anleitung aber da kann man noch einiges ergänzen. 🙂 Hier paar Anmerkungen:
    Z.B., wie installiert man Simple Custom CSS, wie fügt man den Code dort ein, was bedeutet Height/was Margin – was genau lässt sich dadurch ändern. Bei deiner Überschrift „So definierst du das Ziel der Sprungmarke bei WordPress:“ statt nur den Screenshot direkt den Code hinschreiben, sodass man sich den sofort raus kopieren kann (ich weiß, dass der Code weiter oben steht aber doppelt hält besser :D). WP-Neulinge werden dir dankbar sein 🙂
    LG, Milena

    Antworten
    • Hi Milena,

      vielen Dank für dein Feedback! Werde den Artikel demnächst updaten. 🙂

      Beste Grüße
      Patrick

      Antworten
    • Hi,
      schicke mir doch eine Mail mit 1-2 Screenshots von deinem Editor. 😉 Bei Sprungmarken passieren gerne mal kleine Fehler.
      Beste Grüße
      Patrick

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Aktueller Top Deal!

10% Rabatt auf das Divi Theme von Elegant Themes!