In diesem Beitrag zeige ich dir drei schnelle Möglichkeiten, wie du in WordPress Anker setzen kannst.

Sprung zum Inhalt:

Warum soll ich in WordPress Anker setzen bzw. Sprungmarken?

Anker oder Sprungmarken sind Links innerhalb eines HTML-Dokuments, die sich auf einen anderen Abschnitt der gleichen Seite beziehen. Deine Webseitenbesucher und auch Suchmaschinen mögen es gerne, wenn sie eine korrekte, übersichtliche Verlinkung vorfinden. Das betrifft nicht nur externe Links auf andere Webseiten, sondern genauso interne Sprungmarken, z.B. innerhalb deines WordPress Blogs. Diese praktischen Abkürzungen ermöglichen es dem Leser, schnell auf eine bestimmte Stelle im Text zu springen, ohne lange scrollen zu müssen.

Erstellt man ein Inhaltsverzeichnis (siehe oben), ist es sinnvoll, dieses mit Links zu versehen, die zur jeweils passenden Stelle im Blogbeitrag führen.

Klickst du auf dieser Seite oben z.B. auf „Weitere Tipps: …“, dann springst du direkt zum Seitenende. Dort kannst du mein schlaues Bot-Helferlein für zusätzliche hilfreiche Infos anchatten.

Hier sind nun drei zuverlässige Varianten, wie du in WordPress solche Anker bzw. Sprungmarken in deinen Text einfügst:

Variante 1: Anker setzen mit Plugin Tiny MCE Advanced

Es gibt einige kostenlose Plugins, die es dir unkompliziert ermöglichen, in WordPress Sprungmarken zu setzen.

Ich empfehle das Plugin Tiny MCE Advanced , da es mit der aktuellen Gutenberg Version kompatibel ist. Außerdem hast du dann im klassischen Menü neben dem benötigten Ankersymbol WP Ankersymbol Menüverschiedene Schriftarten und sonstige praktische Elemente zur Verfügung.

Der größte Vorteil von Tiny MCE Advanced besteht jedoch darin:

Du kannst mit diesem Plugin nicht nur Sprungmarken zu einer Überschrift (Header) wie im Gutenberg Editor setzen, sondern zu jeder beliebigen Stelle (Absatz, Wort, Zeichen) im Text!

Im folgenden Beispiel verlinke ich Überschrift A aus dem Inhaltsverzeichnis mit der passenden Stelle in einem Abschnitt unterhalb:

Schritt 1

wordpress-anker-setzen-tiny-mce-advanced-schritt1
Abbildung 1: Menü Tiny MCE Advanced
  • Markiere die gewünschte Überschrift aus deinem Inhaltsverzeichnis (Überschrift A).
  • Klicke auf das Link-Symbol (rot markiert) im Menü. Alternativ kannst du auch einfach den Befehl Strg+K eingeben.
  • Gib zuerst die Raute # (Hash) ein und tippe ohne Abstand dein gewünschtes „Ankerwort“ dazu. Dieses kann auch ganz anders als die markierte Überschrift lauten.
  • Enter

Schritt 2

wordpress-anker-setzen-tiny-mce-advanced-schritt2
Abbildung 2: Menü Tiny MCE Advanced
  • Setze den Cursor an die Stelle im gewünschten Abschnitt, zu der von der Überschrift gesprungen werden soll. In dieser Abbildung ist es das Wort „Messenger Bot-Helferlein“.
  • Klicke auf das Ankersymbol im Menü (rot eingekreist). 
  • Gib exakt das gleiche „Ankerwort“ wie oben ein, nur ohne Raute!
  • Ok
  • Der Anker (gelb markiert) erscheint. Fertig!

Variante 2: Anker ohne Plugin im Gutenberg Editor setzen

Im WordPress Gutenberg Editor lässt sich auch ohne Plugin eine Überschrift deines Inhaltsverzeichnisses mit dem passenden Header unterhalb verlinken. Nach dem Klick springt man direkt zur passenden Kapitelüberschrift, die durch einen Rahmen markiert ist.

Wie schon erwähnt, ist es derzeit zwar nicht möglich, einen Anker bei einem einzelnen Wort innerhalb eines Textblocks zu setzen. Doch das ist für Kapitelsprünge auch nicht nötig.

Der Vorgang selbst ähnelt der Variante mit dem Plugin Tiny MCE Advanced.

Wichtig: Es ist für die folgenden Schritte notwendig, dass du die Überschriften deines Blogbeitrags mit der Block-Navigation erstellt hast!

Schritt 1

wordpress-anker-setzen-gutenberg-schritt1
Abbildung 3: Absatzblock Gutenberg
  • Markiere die gewünschte Überschrift aus deinem Inhaltsverzeichnis (Überschrift A).
  • Klicke auf das Link-Symbol (rot markiert) im Blockmenü. Alternativ kannst du auch einfach den Befehl Strg+K eingeben.
  • Gib zuerst die Raute # (Hash) ein und tippe ohne Abstand dein gewünschtes „Ankerwort“ dazu. Dieses kann auch ganz anders als die markierte Überschrift lauten.
  • Enter

Schritt 2

wordpress-anker-setzen-gutenberg-schritt2
Abbildung 4: Überschriftenblock Gutenberg
  • Klicke auf die Überschrift.
  • Falls noch nicht geöffnet, klicke rechts oben auf das Zahnradsymbol .
  • Dann auf Block.
  • Klappe den Inhalt bei „Erweitert“ auf.
  • Gib dort im Feld „HTML-Anker“ genau das gleiche Wort wie oben ein, nur ohne Raute # (Hash).
  • Speichern und fertig!

Meine Zusatzempfehlung: Möchtest du die 3 fatalsten Fehler erfahren, mit denen du deine WordPress-Webseite ruinierst und noch viel mehr? Dann klicke auf die Einladung zum Webinar mit dem WP-Experten Werner Langfritz: https://klickehier.com/wp-masterkurs-webinar

Variante 3: WordPress Sprungmarken als HTML bearbeiten 

Selbstverständlich kannst du deine Überschriften im Gutenberg Editor nicht nur visuell, sondern auch direkt als HTML bearbeiten.

Mit zwei Klicks kommst du zum HTML Code:

HTML Anker setzen
Abbildung 5: Gutenberg als HTML bearbeiten

Im Inhaltsverzeichnis sieht dann zum Beispiel unser HTML Anker bei Überschrift A so aus:

<a href=“#ankerwort3″>Überschrift A</a>

Und das ist der Code für unser Sprungziel im Abschnitt unterhalb zu Überschrift A :

<h2 id=“ankerwort3″>Überschrift A</h2>

Vergleiche zur besseren Anschaulichkeit auch Abbildung 5:

Abbildung 6: HTML Anker setzen

Linkverzeichnis

Plugin Tiny MCE Advanced: https://de.wordpress.org/plugins/tinymce-advanced

Weitere HTML Tutorials und Codes findest du im Wiki SelfHTML.

PS: Frag mein schlaues Bot-Helferlein

Hat es bei dir geklappt? Ist dir noch etwas unklar?

Was ist derzeit dein größtes Problem im digitalen Leben?

Sende meinem digitalen Assistenten eine Nachricht…

Falls du keine automatische Lösung erhalten solltest, antworte ich dir innerhalb von 24 Stunden persönlich!

    "WordPress Anker setzen: Mit Plugin, Gutenberg oder HTML Editor"

    • Avatar Zamyat M. Klein

      Super, vielen Dank, das hat mir sehr geholfen und Variante 2 funktionierte auch!

      • Ambros Ambros

        Freut mich, dass dir mein Beitrag geholfen hat!

Eigenen Kommentar abgeben...

Deine E-Mail-Adresse wird nicht veröffentlicht.