Sprungmarken in WordPress – einfach ein Inhaltsverzeichnis erstellen

Mit Sprungmarken oder Ankern kann man in WordPress sehr einfach zu beliebigen Stellen in langen Dokumenten springen und so auch ein klickbares Inhaltsverzeichnis realisieren.

Vor allem längere Dokumente profitieren davon, wenn man ihnen ein Inhaltsverzeichnis voranstellt. Das erhöht die Übersichtlichkeit und fördert somit die Zufriedenheit der Besucher, die gezielt zu Inhalten springen können.

Ein Inhaltsverzeichnis bietet darüberhinaus den Algorithmen der Suchmaschinen die Möglichkeit deinen Text einfacher analysieren zu können, was die Sichtbarkeit in den Ergebnisseiten der Suchmaschinen erhöhen dürfte.

Zwei Dinge benötigt man dafür – eine sogenannte „Sprungmarke“ auch „Anker“ genannt, die die Stelle, zu der gesprungen werden soll, genau definiert und einen Link, der so aufgebaut ist, dass er zu genau diesem Anker verweist.

Klickt man dann diesen Link, dann landet man (fast) exakt an der Stelle des Dokuments, an der man den Anker eingebaut hatte.

Hier aber zunächst mal das Inhaltsverzeichnis dieses Artikels. Die Links führen natürlich zu den Ankern, die ich im Text platziert habe. Wie man so ein Verzeichnis erstellt, erkläre ich dann im weiteren Text.

Inhaltsverzeichnis

Kurzanleitung
Anker definieren
Überschrift, zu der gesprungen werden soll
Und springen…
Sprünge auf andere Seiten
Sprungmarken gehen zu weit – Abstand in die Sprungmarke einbauen?

Kurzanleitung

Für Leute die es eilig haben, hier die Anleitung als kurze Liste. Im weiteren Verlauf gehe ich detaillierter auf die Schritte ein.

  1. Anker erstellen indem du eine Überschrift (zB. H3) in den Text einfügst
  2. Blockeigenschaften (rechts) –> Erweitert –> Anker : Hier einen Namen für den Anker eintragen
  3. Link an der Stelle einfügen, von der gesprungen werden soll, Inhalt des Links Raute # plus Ankername: #Name_des_Ankers
  4. fertig

Falls dir das zu schnell ging, kommt jetzt die ausführliche Anleitung.

Sprungmarken definieren

Zunächst definieren wir uns eine Sprungmarke. Wie schon erwähnt werden Sprungmarken auch als Anker bezeichnet. WordPress macht das so.

Dazu gibt es zwei Möglichkeiten. Entweder erweiterst du ein HTML-Tag, das sich an dieser Stelle im Text befinde oder du verwendest die Einstellung für den Block in der rechten Seitenleiste.

Für Überschriften bietet der Block-Editor unter „Erweitert“ die Möglichkeit einen Anker, also die Sprungmarke zu definieren.

Anker und Sprungmarken in WordPress - einfach ein Inhaltsverzeichnis erstellen

Meistens wird man hier eine der Überschriften im Text verwenden also etwa <h3> oder <h2>.

Man kann aber auch andere HTML-Tags abwandeln, dies muss allerdings über den Quelltext gemacht werden.

Dazu muss der HTML-Tag erweitert werden. Und zwar im wie gesagt im Quellcode der Seite. Im Blockeditor bzw. Gutenberg-Editor kann man für jeden Block einzeln zwischen der visuellen Ansicht und der HTML-Ansicht umschalten.

Dann fügt man innerhalb des HTML-Tags folgendes hinzu: id=“Name_des_Ankers“.

Bei einem h3-Tag also <h3 id=“Anker2″> . Dabei kannst du den Namen der Sprungmarke frei wählen, musst also nicht Anker1 usw. verwenden.

Ich mache das mal hier. Zunächst eine Überschrift einfügen und dann den Quelltext anzeigen lassen.

Überschrift, zu der gesprungen werden soll

Im Quelltext sieht die so aus:

<h3>Überschrift, zu der gesprungen werden soll  </h3>

Zwischen Quelltext und visueller Ansicht kannst du über die drei senkrechten Punkte im Kontextmenüs des Blocks hin und herschalten.

Sprungmarken in WordPress - einfach ein Inhaltsverzeichnis erstellen

Wenn du auf die HTML-Ansicht umgeschaltet hast, kannst du jetzt das HTML-Tag erweitern

Etwa so:

<h3 id="Anker2">Überschrift, zu der gesprungen werden soll  </h3>

Damit hat man dann die Stelle markiert, zu der gesprungen werden soll.

Achtung!!!
Sprungmarken sind case-sensitive, das heisst, du musst die Groß/Kleinschreibung beachten!! Anker1 ist nicht dasselbe wie anker1. Das kann zu Verwirrung führen.

Was aber tun, wenn man an eine Stelle springen will an der sich keine Überschrift befindet?

Kein Problem. Falls man irgendwo hin springen will, wo es kein Überschriften-Tag gibt kann das das HTML-Tag <p> mit dem ein Absatz bezeichnet wird verwenden. Für einen Anker, der nachher genau zu diesem Absatz springen wird, wechselst du nachdem du den Paragraph fertig editiert hast, in die Quelltextansicht und erweiterst das HTML-Tag <p> um den Wert id=“Anker3″. Im Blockeditor musst du dazu allerdings den Blocktyp „HTML“ verwenden, weil die Korrekturmechanismen die WordPress mitbringt, diese Konstruktion in einem normalen <p>-Tag bemängeln

Und springen…

Jetzt wollen wir aber auch zu den von uns definierten Ankern hinspringen. An der Stelle deiner Seite, an der du den Sprung anbieten willst musst du jetzt einen Link einfügen.

Dazu fügst an der Stelle, von der aus der Sprung erfolgen soll einen Link ein dem du den Namen des Ankers, mit vorangestellter Raute # gibst.

Dazu markierst du den Text, der zum Link werden soll und klickst dann auf das Linksymbol im Kontextmenü des Blocks.

Das sieht so aus:

Sprungmarken in WordPress - einfach ein Inhaltsverzeichnis erstellen

Du kannst das natürlich auch im Quelltext des Block durchführen.

Also umschalten in den HTML-Modus und dann so etwas einfügen:

<p>  <a href="#Anker2"> Dies ist der Sprung zu Anker2 </a> - mit diesem Verweis springst du zu dem h3-Tag, das ich oben definiert hatte. </p>

Dies ist der Sprung zu Anker1 – mit diesem Verweis springst du zu dem h3-Tag, das ich oben definiert hatte.

Hier geht es zu Anker5 – ein Verweis zu dem Anker den ich im Paragaphen-Tag eingefügt habe

Das geht ja schon mal super.

Es gibt auch eine Standardsprungmarke, mit der man direkt an den Anfang der Seite Springen kann.

Und das ist href=“#“. So baut man es ein

<a href="#"> Zurück zum Anfang <a>

Trägt man dies in den Quelltext des aktuellen Blocks ein, dann springt man direkt zurück zum Anfang der Seite.

Sprünge auf andere Seiten

Bisher sind wir nur innerhalb der gleichen Seite gesprungen. Man kann aber auch gezielt mitten in eine andere Seite springen, selbst wenn sich diese auf einem anderen Server befindet.

Folgende URL spring mitten in einen Artikel auf der Webseite „Amazing Temples“.

Die URL bzw. der Link den ich weiter unten einfüge sieht so aus:

<p><a href="https://amazingtemples.com/en/mexico-en/quintana-roo-en/the-top-5-maya-sites-at-the-riviera-maya-yucatan-peninsula/#ek-balam">Sprung zu Amazing Temples</a></p>

Die eigentliche Sprungmarke ist #ek-balam . Dieser Ankertext wird mittels # hinter die eigentliche Seiten-URL gestellt. Das ist alles. So schaut es aus:

Sprung zu Amazing Temples

Mit Sprungmarken lassen sich wie gesagt hervorragend Inhaltsverzeichnisse für umfangreiche Dokumente erstellen, die es einem Benutzer erlauben gezielt an bestimmte Stellen zu springen.

Natürlich würde man so ein Inhaltsverzeichnis nicht ans Ende, sondern eher an den Anfang des Dokuments stellen.

Inhaltsverzeichnis

Anker definieren
Überschrift, zu der gesprungen werden soll
Und springen…
Sprünge auf andere Seiten
Sprungmarken gehen zu weit?

Sprünge zu Sprungmarken gehen zu weit? Abstand einbauen!

Je nach Theme und Anordung deiner Webseite, kann es vorkommen, dass die Sprünge nicht genau da landen, wo du sie haben willst. Auch, wenn du feststehendes Menü, wie ich da oben, verwendest, dann kann es sein, dass die Informationen an der Sprungmarke davon verdeckt werden. Abhilfe schafft ein kleine Erweiterung im CSS-Code.

Dazu öffnest du die erweiterten Eigenschaften des Blocks, der deine Sprungmarke, also vermutlich eine h3-Überschrift enthält. Dort definierst du dann eine zusätzliche CSS-Klasse. In meinem Fall habe ich sie „Anker-Abstand“ genannt.

Jetzt muss du nur im Customizer diese CSS-Klasse in den „erweiterten Optionen –> zusätzliches CSS“ eintragen und festlegen was passieren soll. Mit „scroll-margin-top“, wie im Beispiel unten, wird an beim Sprung 65 Pixel früher angehalten.

.Anker-Abstand {
    scroll-margin-top: 65px;
}

Wie das mit den erweiterten CSS-Klassen genau geht, habe ich übrigens hier detailliert beschrieben: Zusätzliche CSS-Klassen im Gutenberg-Editor – WordPress optimieren

Und jetzt zurück an den Anfang

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.