Anker-Link in WordPress setzen ohne Plugin

Möchtest du in WordPress einen Anker-Link setzen, weißt aber nicht wie oder dein Anker-Verweis funktioniert nicht? Hier kommt die Lösung. Ich erkläre dir, wie du ohne Einsatz von Plugins funktionsfähige Anker-Verlinkungen innerhalb eines Beitrags und zu einer anderen Seite deiner Website anlegen kannst.

Die nachfolgende Anleitung bezieht sich auf den „Classic-Editor“ von WordPress.org, nicht auf Gutenberg und Blöcke (wie du diese vollständig deaktivierst, siehe mein Artikel).

Was ist ein Anker-Link?

Bei einem Anker-Link (engl.: Anchor-Link) handelt es sich um eine pure Verlinkung zweier Textstellen. Wie bei einem normalen Hyperlink (kurz: Link), der zu einer externen (fremden) Internetseite führt – mit dem Unterschied, dass Anker-Links hauptsächlich innerhalb der eigenen Website verwendet werden.

Anker-Links existieren schon solange, wie es Internetseiten gibt. Da diese anfangs rein in HTML programmiert wurden und WordPress.org damals wie heute HTML-Code beinhaltet, besteht die Möglichkeit, Anker-Links mit ein paar HTML-Befehlen manuell anzulegen.

Einen Anker-Link nennt man auch Sprungmarke. Denn sobald man auf einen Link klickt, der mit einem Anker versehen ist (Anfangspunkt, auch „Verweis“ genannt), springt er automatisch zu der Textstelle, die als Anker-Ziel (Endpunkt) festgelegt wurde.

Das Anker-Ziel kann sich innerhalb der gleichen Seite bzw. des gleichen Beitrags befinden oder auf einer anderen Seite bzw. in einem anderen Beitrag.

Vorteile und Nachteile von Anker-Links

Hast du sehr lange Texte geschrieben, entpuppt sich der Anker-Link eindeutig als VORTEIL für die Leser:innen deines Beitrags. Suchen diese zum Beispiel nur einen ganz bestimmten Textauszug, ist es hilfreich, wenn sie direkt zur entsprechenden Stelle springen können (zum Beispiel vom Inhaltsverzeichnis zum passenden Absatz). Möchtest du mit deiner Website oder deinem Blog Geld verdienen, könnte sich genau das als NACHTEIL herausstellen, beispielsweise wenn Werbeblöcke oder Affiliate-Links übersprungen werden.

Möchtest du deine Besucher:innen nicht von einer Seite wegführen, solltest du besser keine Anker-Links einbauen. Als großer NACHTEIL hat sich nämlich herausgestellt: Befinden sich diese erst einmal auf der anderen Seite, kehren sie meist nicht zurück. Denn Anker-Links kennen nur eine Richtung – hin zum Anker-Ziel.

Ein weiterer VORTEIL ist, dass Anker-Links im Text zu wichtigen Hinweisen an anderer Stelle der Website führen können. Dabei ist es unwichtig, ob sich der Anker in einem Text im Beitrag oder auf einer Seite befindet. Hauptsache, Anfangs- und Endpunkt sind richtig eingerichtet.

Soweit zur Theorie. Jetzt geht’s an die Praxis.

Anker-Link richtig setzen in WordPress

Vier Punkte, die man bei der Arbeit mit Ankern beachten sollte

• Um Anker in Beiträgen oder Seiten einzurichten, ist es notwendig, zwischen Visuell- und Text-Modus des Classic-Editors von WordPress hin- und herzuwechseln – also von der Ansicht „Visuell“ zu „Text“ und umgekehrt zu wechseln. Öffne dazu einfach den Beitrag oder die Seite, die du bearbeiten möchtest, und klicke auf die jeweilige Registerkarte. Den HTML-Code des Beitrags oder der Seite findest du nur im Text-Modus. Dort fügst du an entsprechender Stelle die unten in den Anleitungen genannten HTML-Befehle ein.

• Um die jeweiligen Änderungen zu erkennen, solltest du den Beitrag oder die Seite in einem separaten Vorschau-Fenster öffnen. Das geht so:
  • Klicke ganz oben im WordPress-Dashboard auf Beitrag ansehen oder Seite ansehen.
    Alternativ klicke rechts neben dem geöffneten Beitrag oder der Seite auf den Button Vorschau oder Vorschau der Änderungen. Nun öffnet sich ein separates Fenster und zeigt dir den Beitrag oder die Seite so an, wie sie auf deiner Website erscheinen und von Besucher:innen wahrgenommen wird.
  • Damit du die jeweilige Änderung im separaten Vorschaufenster zu Gesicht bekommst, klicke zuerst neben dem Beitrag (oder der Seite) auf den Button Speichern oder Aktualisieren. Anschließend aktualisiere die Browser-Ansicht im separaten Vorschaufenster (klicke im Browser auf das Symbol „Seite neu laden“). Wiederhole diese Schritte nach jeder Änderung, damit keine Änderung verloren geht.
  • Lasse die Vorschau im separaten Fenster solange geöffnet, bis du mit der Bearbeitung fertig bist.
  • Klingt kompliziert, ist es aber nicht und man gewöhnt sich schnell an diese Arbeitsweise. 😉

• Wichtigste Voraussetzung für das Setzen von Anker-Links ist, dass du umgekehrt arbeitest: erst den Endpunkt einrichten (ID), dann den Anfangspunkt (#). Bei Anker-Links verhält es sich nämlich wie bei Hyperlinks: Erst wenn du das Link-Ziel kennst, kannst du auf deiner Webseite einen Link zur (externen bzw. fremden) Webseite setzen. Oder anders ausgedrückt:

„Weißt du nicht, wo der Hafen liegt, kannst du ihn nicht ansteuern.“

• Zuguterletzt solltest du beherzigen, dass jeder Anker eine einmalige ID haben muss, sprich: eine Link-Bezeichnung, die nicht doppelt vorkommen darf (externe Links inbegriffen), sonst funktioniert die Verankerung nicht. Achte dabei auch auf die genaue Schreibweise: Die Bezeichnung von Anfangs- und Endpunkt muss genau übereinstimmen!

MERKE: Du kannst im Bearbeitungsmodus zwischen der Ansicht „Visuell“ und „Text“ wechseln. Öffne die Vorschau in einem separaten Fenster. Damit Anker-Links funktionieren, arbeite umgekehrt: zuerst den Endpunkt (das Anker-Ziel) anlegen, dann den Anfangspunkt. Jeder Anker muss eine einmalige ID haben. Die Schreibweise von Anfangs- und Endpunkt muss genau übereinstimmen.

Alles klar? Dann spiele ich mal Kapitänin und sage: „Ahoi und Anker anlegen“.

Anker-Link innerhalb eines Beitrags setzen

Anhand zweier Beispiele erkläre ich dir, wie man Ankerlinks in ein und demselben Beitrag anlegt. Die Anleitungen in diesem Abschnitt sind für Beiträge und Seiten gleichermaßen geeignet.

Beispiel 1 – Anker zu einer Zwischenüberschrift:

Der Anker-Anfangspunkt bzw. Begriff im Text lautet „Torte“.
Der Anker-Endpunkt (Anker-Ziel) ist eine Zwischenüberschrift namens „Erdbeertorte backen“.

Die Zwischenüberschrift ist in der Größe h2 formatiert.
Die Zeile im HTML-Code lautet: <h2>Erdbeertorte backen</h2>
Die Anker-ID lautet „erdbeere-auf-torte“.

Anleitung 1 – Anker zu einer Zwischenüberschrift:

1. Öffne den von dir gewählten Beitrag zum Bearbeiten (im Dashboard unter: Beiträge / Alle Beiträge / Klick unter dem entsprechenden Beitragstitel auf Bearbeiten).
2. Markiere in der Bearbeitungs-Ansicht Visuell die Zeile im Text, die als Anker-Ziel festgelegt werden soll (in meinem Beispiel die Zwischenüberschrift „Erdbeertorte backen“).
3. Wechsel zur Bearbeitungs-Ansicht Text und scrolle zu der Stelle, die markiert ist. Sollte die Markierung zwischenzeitlich aufgehoben sein, navigiere zu der Zeile im HTML-Code, die als Anker-Ziel vorgesehen ist (in meinem Beispiel zur Zeile <h2>Erdbeertorte backen</h2>).
4. Füge dieser Code-Zeile eine einmalige Anker-ID hinzu (in meinem Beispiel „erdbeere-auf-torte“), und zwar wie folgt:

<h2 id="erdbeere-auf-torte">Erdbeertorte backen</h2>

5. Wechsel zur Bearbeitungs-Ansicht Visuell und navigiere zu dem Begriff oder der Textfolge, die du als Anfangspunkt festlegen möchtest (in meinem Beispiel „Torte“).
6. Markiere den Begriff bzw. die Textfolge (in meinem Beispiel den Begriff „Torte“)
7. Jetzt verlinke den Begriff bzw. die Textfolge mit der vergebenen Anker-ID (in meinem Beispiel „erdbeere-auf-torte“). Das geht so: Klicke auf das Link-Symbol , schreibe in das leere Feld #erdbeere-auf-torte (Hashtag gefolgt von der Anker-Bezeichnung, ohne Leerzeichen!) und klicke daneben auf das blaue Symbol für Übernehmen.
8. Speichere deinen Beitrag (klicke auf den Button Speichern oder Aktualisieren).
9. Prüfe in der Beitrags-Vorschau (klicke auf den Button Vorschau oder Vorschau der Änderungen), ob der Anker-Link funktioniert, wie ganz unten in diesem Artikel beschrieben.

Hat alles geklappt? Gut gemacht! 🙂 Jetzt weißt du sicher, worauf es bei Anker-Links ankommt. Probiere es gleich an einem weiteren Beispiel aus.

Beispiel 2 – Anker zu einem beliebigen Begriff:

Der Anker-Anfangspunkt bzw. Begriff im Text lautet „Sicherheit“.
Der Anker-Endpunkt (Anker-Ziel) ist ein englischer Begriff namens „Firewall“.

Der Begriff „Firewall“ ist nicht formatiert.
Den Begriff findet man im HTML-Code einfach unter „Firewall“.
Die Anker-ID lautet „firewall-gibt-sicherheit“.

Anleitung 2 – Anker zu einem beliebigen Begriff:

1. Öffne den gewählten Beitrag zum Bearbeiten.
2. Markiere in der Bearbeitungs-Ansicht Visuell den Begriff im Text, der als Anker-Ziel festgelegt werden soll (in meinem Beispiel „Firewall“).
3. Wechsel in die Bearbeitungs-Ansicht Text und navigiere zu dem Begriff im HTML-Code, der als Anker-Ziel vorgesehen ist (in meinem Beispiel zum Begriff „Firewall“).
4. Füge dem Begriff eine einmalige Anker-ID (in meinem Beispiel „firewall-gibt-sicherheit“) und etwas Code hinzu:

<div id="firewall-gibt-sicherheit" class="">Firewall</div>

Die Angabe class=““ ist in diesem Fall unbedingt notwendig, da hier das Block-Element DIV eingesetzt wird. Ohne die CLASS-Angabe setzt WordPress ungewollte Absätze.

5. Wechsel zur Bearbeitungs-Ansicht Visuell und navigiere zu dem Begriff, den du als Anfangspunkt festlegen möchtest (in meinem Beispiel „Sicherheit“).
6. Markiere den Begriff.
7. Jetzt verlinke den Begriff mit der vergebenen Anker-ID (in meinem Beispiel „firewall-gibt-sicherheit“), indem du auf das Link-Symbol klickst, in das leere Feld #firewall-gibt-sicherheit einträgst und auf das blaue Symbol Übernehmen klickst.
8. Speichere deinen Beitrag.
9. Prüfe die Anker-Verlinkung, wie unten in diesem Artikel beschrieben, in der Beitrags-Vorschau.

Wow, jetzt bist du schon eine ganze Ecke weiter. 🙂 Gönne dir eine Pause, bewege dich vom Computer weg und komme wieder, wenn du eine weitere Verankerungsmöglichkeit ausprobieren möchtest.

Anker-Link zu einer anderen Seite setzen

Anhand eines Beispiels erkläre ich dir in diesem Abschnitt, wie man Ankerlinks von einer Seite zu einer anderen Seite anlegt. Die Anleitung ist für Seiten und Beiträge gleichermaßen geeignet.

Beispiel:

Die Eingangsseite lautet „Anker-Anfangsseite“.

Die Ausgangsseite lautet „Anker-Zielseite“.

Der Anker-Anfangspunkt auf der Eingangsseite lautet „Erfolg“.
Das Anker-Ziel auf der Ausgangsseite lautet „IT-Berufe“.

Der Begriff „IT-Berufe“ ist nicht formatiert.

Den Begriff findet man im HTML-Code einfach unter „IT-Berufe“.
Die Anker-ID lautet „erfolg-im-it-beruf“.

Anleitung:

1. Öffne die Ausgangsseite zum Bearbeiten, in der das Anker-Ziel festgelegt werden soll (in meinem Beispiel die „Anker-Zielseite“).
2. Wechsel in die Bearbeitungs-Ansicht Text der Ausgangsseite und navigiere zu dem Begriff im HTML-Code, der als Anker-Ziel vorgesehen ist (in meinem Beispiel zum Begriff „IT-Berufe“).
3. Füge dem Begriff eine einmalige Anker-ID (in meinem Beispiel „erfolg-im-it-beruf“) und etwas Code hinzu:

<div id="erfolg-im-it-beruf" class="">IT-Berufe</div>

4. Speichere bzw. aktualisiere deine Ausgangsseite.
5. Öffne nun die Eingangsseite zum Bearbeiten, in der der Anker-Anfangspunkt festgelegt werden soll (in meinem Beispiel die „Anker-Anfangsseite“).
6. Wechsel zur Bearbeitungs-Ansicht Text der Eingangsseite und navigiere zu dem Begriff, den du als Anker-Anfangspunkt festlegen möchtest (in meinem Beispiel zum Begriff „Erfolg“).
7. Jetzt verlinke den Begriff, indem du die vergebene Anker-ID (in meinem Beispiel „#erfolg-im-it-beruf“) und die vollständige URL der Ausgangsseite („Anker-Zielseite“) hinzufügst. Die Code-Zeile sieht in meinem Beispiel dann so aus:

<a href="https://www.deine-domainadresse.de/anker-zielseite/#erfolg-im-it-beruf">Erfolg</a>

8. Speichere bzw. aktualisiere deine Eingangsseite.
9. Prüfe die Anker-Verlinkung in der Beitrags-Vorschau der Eingangsseite, wie im nachfolgenden Abschnitt beschrieben.

MERKE: Je nach Formatierung des Anker-Ziels (Endpunkts) muss entweder ein <h>-Tag oder <div>-Tag im HTML-Code hinzugefügt werden. Unterscheide zwischen Ankern auf der gleichen Seite (bzw. Beitrag) und Ankern, die von einer zur anderen Seite (bzw. Beitrag) führen. Liegt das Anker-Ziel auf einer anderen Seite als der Anker-Verweis (Anfangspunkt), muss der Verweis immer die vollständige URL der Ziel-Seite enthalten.

Überprüfung der Anker-Links

Ist alles korrekt eingerichtet und du befindest dich in der Seiten- oder Beitrags-Vorschau,

• erscheint der Anker-Anfangslink-Begriff oder -Text wie ein Standard-Link im Beitrag oder auf der Seite (zum Beispiel unterstrichen und farbig hervorgehoben – je nach Einstellung deines Themes);
• weist der Anker-Ziel-Begriff oder -Text vom äußeren Erscheinungsbild her keinerlei Veränderungen auf;
• muss nach Klick auf den Anker-Anfangslink der Anker direkt zum Anker-Ziel springen;
• muss nach Klick auf den Anker-Anfangslink die Adresszeile der Ziel-Seite im Browser hinter der URL ein Hashtag gefolgt von der Anker-Ziel-Bezeichnung anzeigen (zum Beispiel: https://www.deine-domainadresse.de/anker-zielseite/#erfolg-im-it-beruf).

Darüber hinaus gibt es weitere Anwendungsmöglichkeiten für Anker-Links in WordPress, zum Beispiel in Widgets, Menüs und vieles mehr. Einen Anker habe ich beispielsweise in einer Textzeile eines Plugins untergebracht – das Ergebnis findest du unter dem Werbebanner in meinem Artikel WebP Bilder in Windows anzeigen und öffnen. Davon abgesehen habe ich einen funktionierenden Anker-Link in diesem Artikel versteckt. Hast du’s bemerkt? 😉