Hast Du schon einmal von Anchor-Links gehört? Anchor-Links sind Sprungmarken, die in der Welt des World Wide Webs äußerst wichtig und vor allem praktisch sein können. Nicht nur im World Wide Web, speziell nämlich auch, wenn Du mit WordPress arbeiten möchtest. Denn auch dort bietet sich die Anchor-Link-Option oftmals an: den Link anklicken und sofort zu der Sektion springen, die gewünscht bzw. gefragt ist.

Damit weißt Du bereits, wozu diese Anchor-Links verwendet werden können. Vor allem sehen und benutzen wir sie in Inhaltsverzeichnissen, damit wir mit einem Link, mit einem „Sprung“ von A nach B gelangen können. Auf diese Weise müssen wir keinen neuen Tab öffnen oder uns ewig durch ein Dokument bzw. auf einer Seite durch scrollen. Im Übrigen können Anchor-Links aber auch in puncto Suchmaschinenmarketing sehr praktisch sein, was mit der Platzierung und Listung von Google zusammenhängt. Nachdem Du nun also weißt, was man unter diesen Anchor-Links, Sprungmarken, internen Verlinkungen versteht und wieso wir sie benutzen, möchte ich im Folgenden Schritt für Schritt erklären, wie wir Anchor-Links verwenden und einbauen können.

Wie man Anchor-Links bei WordPress verwendet und diese dabei manuell hinzufügt? All das ist kein Hexenwerk, wenn Du dich an die folgenden Beschreibungen hältst.

Anchor-Links manuell hinzufügen

Schritt 1: Den Ankerlink erschaffen

Zunächst musst Du den Text in das WordPress-Fenster schreiben. Mit diesem Text wird der Link schließlich verknüpft. Es kann sich beispielsweise um ein simples „Hier“ handeln, damit der Leser weiß, dass er nun eine Sprungmarke zu erwarten hat. Wähle nun die Option „Link einfügen“-Option im WordPress-Editor. Nun hast Du die Möglichkeit, die URL hinzuzufügen oder nach einer Seite bzw. einem Dokument zu suchen, welche bzw. welches Du verknüpfen kannst. Mit der Raute kannst Du dafür sorgen, dass die entsprechende Sektion mit Suchbegriffen gefunden wird. Nachdem du den Enter-Button gedrückt hast, ist der Link auch schon fertig.

Schritt 2: Das ID-Attribut hinzufügen

Sofern Du dich im Texteditor befindest, scrolle auf der Seite noch etwas weiter nach unten. Nun musst Du auswählen, wohin der Website-Besucher navigiert werden soll, wenn er oder sie den entsprechenden Link anklickt. Mithilfe des „Erweitert“-Buttons kannst Du nun noch den HTML-Anker bearbeiten und eingeben. Wähle den HTML-Anker, der mit der Angabe deines Linkziels identisch ist. Lasse die Raute von Schritt 1 für Schritt 2 allerdings weg. Nun kannst Du den Beitrag speichern und Dir die Vorschau anschauen. Dann siehst du sofort, ob dein Ankerlink gesetzt wurde und ob alles so funktioniert, wie Du es dir vorgestellt hast.

Anleitung beim Classic-Editor und bei Gutenberg

Wenn Du immer noch mit dem klassischen WordPress-Generator arbeiten solltest, dann kannst Du dich an der folgenden Anleitung orientieren, welche geringfügig anders ist.

Schritt 1: Den Ankerlink generieren

Auch mit dem klassischen Editor musst Du die Sprungmarke überhaupt erst setzen. Markiere den Text, den Du verlinken willst und wähle den „Link einfügen“-Button in der Übersicht.

Tippe nun auf die Raute-Taste und schreibe den Text des Ankerlinks, der später für die Website-Besucher sichtbar sein wird und der sie zum entsprechenden Ziel weiter navigieren soll.

Schritt 2: Das ID-Attribut hinzufügen

Nun musst Du aussuchen, zu welcher Sektion der Link springen soll. Dafür musst du zum „Textmodus“ umschalten. Springe nun zur Sektion, die gezeigt werden soll. Es geht nun um den entsprechenden HTML-Tag dieses gewünschten Abschnitts, zum Beispiel <h2>, <h3> oder <h4>. Du musst das ID-Attribut nun ohne die Raute einfügen. Das sieht dann etwa wie folgt aus:

<h2 id=“hier-geht-es-zum-text“>

Nun kannst Du die Änderungen speichern und das Ergebnis wieder mit dem Vorschau-Button betrachten.

Im Gutenberg-Editor musst Du auf die drei Punkte im Menüfeld klicken und dann die HTML-Funktion auswählen. Schließlich musst Du wieder denselben Code eingeben, den Du schon zwei Zeilen weiter oben kennengelernt hast. Anschließend wird noch als „HTML konvertiert“ und damit hast Du den Link auch mit dem Gutenberg-Editor erfolgreich gesetzt.

Anchor-Links via HTML

Folgendes musst Du eingeben, um den Ankerlink via HTML zu erschaffen.

Zunächst benötigst du wieder die Raute und den entsprechenden HTML-Befehl. Der Code sieht wie folgt aus: <a href=“#hier-geht-es-zum-text“>Hier geht es zum Text</a>

Scrolle nun nach unten zum Bereich, zu dem du den Website-Besucher navigieren möchtest. Normalerweise handelt es sich um HTML-Tags für Überschriften (h2, h3, h4 etc.), doch es kann sich auch um andere HTML-Tags handeln. Nun musst Du dem HTML-Tag das ID-Attribut hinzufügen und danach den Text anführen.

<h2 id=“hier-geht-es-zum-text“>Best Coffee Shops in Manhattan</h4>

Nun kannst Du den Beitrag wieder speichern und via Vorschau ansehen.