Inhaltsverzeichnis mit Anker/ Sprungmarken erstellen – WordPress Anleitung

Titelbild - Inhaltsverzeichnis mit Sprungmarken-Anker erstellen

 

In dieser Anleitung findest du relevante Informationen zur Implementierung von Sprungmarken auf deiner WordPress Website.

 

Inhaltsverzeichnis:

1. Sprungmarken
2. Sprungmarken bei WordPress einfügen
3. Problem: Sprungmarke springt an die falsche Stelle (Sprungmarke springt zu weit)
4. Fazit

 

1. Sprungmarken

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. (Suchmaschinenoptimierung (SEO))

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

 

Eine Sprungmarke setzt sich aus zwei Elementen zusammen:

1. Sprung-Link

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>

Achte auf das # und eine eindeutige bzw. einmalige Bezeichnung!

 

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

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

 

 

2. Sprungmarken bei WordPress einfügen

Als erstes muss der Link erstellt werden, auf den die Besucher klicken sollen.

 

So erstellst du diesen Link 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. Erstes Element fertig!

 

 

Anschließend 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. Fertig!

 

3. Problem: Sprungmarke springt an die falsche Stelle (Sprungmarke springt zu weit)

Dieses Problem tritt normalerweise 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.

Um dieses Problem zu beheben müssen wir etwas Abstand oberhalb der Zielposition der Sprungmarke hinzufügen.

 

So wird es mit WordPress gemacht:

  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:

    /* 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.

    Dieser Code eignet sich perfekt für die Website aus meinem Tutorial bzw. aus meinem Video:

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

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

    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.

  4. Speichern.
  5. Fertig.

 

 

4. 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.

Es gibt für WordPress auch passende PlugIns, allerdings halte ich diese für überflüssig, da man sich die Sprungmarken auch ziemlich einfach selbst machen kann.

 

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 🙂

Inhaltsverzeichnis mit Anker/ Sprungmarken erstellen – WordPress Anleitung
5 (100%) 1 vote

 

Oder empfehle ihn deinen besten Freunden! 😉

 

 

Starte jetzt mit deiner eigenen WordPress Website!

Hier geht’s zur Schritt-für-Schritt Anleitung!

 

Patrick
23 Jahre, Student. In und neben meinem Studium beschäftige ich mich intensiv mit Internet Marketing Marketing, Webdesign, User Experience und Suchmaschinenoptimierung. Meine Freizeit widme ich dem Schlagzeug spielen.

Schreibe einen Kommentar

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