Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
WordPress Anker (auch Sprungmarke genannt) sind ein einfacher Weg den Besuchern zu einem bestimmten Punkt Deiner Website springen zu lassen.
Wie Du kinderleicht in WordPress Ankerlinks erstellen kannst, erfährst Du in diesem kompakten Artikel. Dir werden 6 spannende Methoden gezeigt, die mit unserer Anleitung jeder umsetzen kann.
Zudem entdeckst Du nicht nur, wie Du Anker im Inhaltsverzeichnis, bei Links oder Buttons setzt, sondern auch, wie Du Anker im Menü setzen kannst. Und vieles mehr…
Also… Lass uns direkt starten…
Inhaltsverzeichnis
- Für was sollte man WordPress Ankerlinks nutzen?
- 6 Wege in WordPress Anker zu setzen
- Anker setzen im Menü
- Fazit
- FAQ – Fragen zum Thema WordPress Anker setzen
1. Für was sollte man WordPress Ankerlinks nutzen?
Allgemein nutzt man Ankerlinks, um eine bessere Navigation zu gewährleisten.
WordPress Nutzer verwenden Ankerlinks oft für Inhaltsverzeichnisse. So kann der Besucher deiner Webseite direkt zu den Punkten deiner Artikel springen, die für ihn relevant sind (Wie Du siehst, haben wir das in diesem Artikel auch gemacht 😀).
Wenn deine Webseite ein OnePager ist (Website, die aus nur einer Seite besteht), dann macht es Sinn Ankerlinks im Menü zu nutzen. Damit kann der Nutzer direkt zum gewünschten Abschnitt gelangen.
Auch bei Buttons lohnen sich Ankerlinks: entweder verlinkst du zu einem Abschnitt einer anderen Seite oder zu einem Abschnitt auf der gleichen Seite.
Außerdem können Ankerlinks sinnvoll sein, wenn du den Nutzern die Möglichkeit geben möchtest von einem Abschnitt einer Seite zu einem damit in Verbindung stehenden Abschnitt zu springen. Mithilfe von Ankerlinks kannst du auch zu einem bestimmten Abschnitt einer externen Seite verlinken.
2. 6 Wege in WordPress Anker zu setzen
2.1 Anker setzen im Gutenberg Editor
Schritt 1: Auf gewünschten Block klicken
Um im Gutenberg Editor einen WordPress Anker zu setzten, musst du zuerst dein Zielelement auswählen und anklicken.
Schritt 2: In rechter Seitenleiste auf Block wechseln
Anschließend wechselst du in der rechten Seitenleiste von Beitrag zu Block.
Schritt 3: Auf Erweitert klicken
Unter Block klickst du auf Erweitert.
Schritt 4: Unter HTML-Anker ein Wort eingeben
Jetzt kannst du bei HTML-Anker deine Anker ID eingeben. Heißt: Gib dem Anker einen Namen, zum Beispiel „kapitel1“, „abschnitt1“, „wort“… Wir empfehlen Dir den Namen klein zu schreiben und KEIN Leerzeichen zu nutzen, sonst kann es zu Problemen kommen.
Schritt 5: Wort/Satz für Verlinkung auswählen
Dann wählst du ein Element auf deiner Seite, in welches du den Anker-Link einbauen möchtest, und markierst es. Nun klickst du auf das Kettensymbol (Link einfügen).
Schritt 6: Anker-ID eingeben
Zum Schluss gibst du in das „Link einfügen“-Feld eine Raute (#) ein und dann die entsprechende Anker ID (in unserem Beispiel die Anker ID #wort) ein und klickst auf den Pfeil. Fertig.
Wichtig: Du musst im Link unbedingt vor der Anker ID eine Raute (#) setzen.
2.2 Anker setzen im klassischen Editor
Schritt 1: Texteditor aktivieren
Um im klassischen Editor einen WordPress Anker setzen zu können, wechselst Du als erstes vom Visuellen Editor in den Texteditor (Gelb markiert im unteren Bild).
Schritt 2: Einfügen
Springe nun zum entsprechenden Element, für das Du den Anker setzen willst. Im oberen Beispiel springen wir zur H2 Überschrift. Wir erweitern hier den HTML Code folgendermaßen:
Aus „<h2>Deine Überschrift</h2>“ wird <h2 id=“deinankertext“>Deine Überschrift</h2>.
Heißt: Du fügst id=“deinankertext“ nach dem ersten h2 ein. Das Wort deinankertext ersetzt Du mit dem gewünschten Namen Deines Anker Textes. Im Bild oben lautet der Ankertext beispielsweise text1. Wichtig: Die Anführungszeichen vor und nach dem Ankertext-Namen müssen unbedingt gesetzt werden.
Schritt 3: Anker-Link setzen
Wechsle nun wieder vom Text-Editor in den Visuellen-Editor. Springe nun zum entsprechenden Text, den Du verlinken willst. Markiere diesen Text und klicke auf das Link Symbol. Gib nun eine Raute (#) und dann die Anker-ID, also den Ankernamen ein. Vergiss nicht die Raute einzugeben, sonst funktioniert es nicht.
Klicke dann auf den Blauen Übernehmen-Button, um den Link zu setzen. Fertig ist der Ankerlink & die entsprechende Verlinkung.
2.3 Ganz einfach Anker setzen mit Advanced Editor Tools Plugin – (früher: TinyMCE Advanced)
Schritt 1: Plugin installieren und aktivieren
Bevor du den WordPress Anker setzt, musst du das Plugin Advanced Editor Tools installieren und aktivieren.
Schritt 2: Zu Einstellungen des Plugins gehen
Anschließend gehst du zu den Einstellungen von Advanced Editor Tools.
Schritt 3: Ankerlink-Funktion in Werkzeugleiste ziehen (beim Block Editor und beim klassischen Editor)
Dort kannst du die Ankerlink-Funktion in die Werkzeugleiste ziehen. Das kannst du einmal beim Gutenberg Block Editor und einmal beim klassischen Editor machen (Je nachdem, welchen Editor Du nutzt).
Schritt 4: Beim Blockeditor klassischen Absatz einfügen
Um diese Ankerlink-Funktion jetzt im Block Editor nutzen zu können, musst du statt einem normalen Absatz einen klassischen Absatz einfügen. Im klassischen Editor taucht die Ankerlink-Funktion nun direkt in der Werkzeugleiste auf und du musst nicht mehr den Weg über Einfügen gehen.
Schritt 5: Anker ID beim gewünschten Zielelement setzen
Anschließend gehst du wieder die gleichen Schritte wie oben für den Gutenberg Block Editor und den klassischen Editor beschrieben. Das heißt, du wählst ein Element für die Anker ID aus und gibst ein Wort ein.
Schritt 6: Wort/Satz für Ankerlink auswählen
Dann wählst du ein Element für den Ankerlink aus und fügst dort einen Link ein.
Schritt 7: #wort eingeben
Zum Schluss gibst du wieder die Raute (#) und dann die Anker ID ein und klickst zur Bestätigung auf den Pfeil.
2.4 Anker setzen mit dem Easy Table of Contents Plugin
Schritt 1: Plugin installieren und aktivieren
Bevor du mit dem Easy Table of Contents Plugin WordPress automatische Inhaltsverzeichnisse erstellen kannst, musst du das Plugin installieren und aktivieren.
Schritt 2: Zu Einstellungen des Plugins gehen
Anschließend gehst du zu den Einstellungen von Easy Table of Contents.
Schritt 3: Haken bei Unterstützung aktivieren und Automatisches Einfügen setzen
In den Einstellungen setzt du die Haken bei Unterstützung aktivieren und Automatisches Einfügen bei den WordPress Inhaltstypen, wo du später ein automatisch erstelltes Inhaltsverzeichnis haben möchtest.
Wir empfehlen Dir „Beiträge“ auszuwählen. Auf Seiten macht es meist weniger Sinn.
Schritt 4: Position, Einblenden, wenn und andere Einstellungen auswählen
Bei den weiteren Einstellungsmöglichkeiten kannst du z.B. die Position des Inhaltsverzeichnisses bestimmen und entscheiden ab wie vielen Überschriften ein automatisches Inhaltsverzeichnis erstellt werden soll. Du findest noch viele weitere Einstellungsmöglichkeiten, um das Design der Inhaltsverzeichnisse anzupassen.
Schritt 5: Beitrag erstellen
Jetzt musst du nur noch deinen Beitrag erstellen und die Überschriften setzen. Das Plugin Easy Table of Contents erstellt dann automatisch das Inhaltsverzeichnis für den Beitrag und fügt es automatisch ein.
2.5 Anker setzen mit Elementor
Im folgenden Video ist ganz genau erklärt, wie Du mit Elementor Anker setzen kannst. Dir werden alle wichtigen Wege Mausklick für Mausklick gezeigt:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
2.6 Anker setzen mit dem Thrive Architect
Um mit dem Thrive Architect WordPress Anker zu setzen, nutzt du entweder das Table of Contents-Element oder machst es von Hand:
Schritt 1: Wort/Satz für Ankerlink auswählen
Zuerst wählst du das Element aus, in welches du den Link einfügen möchtest.
Schritt 2: Auf Verlinkung klicken (Kettensymbol)
Dann klickst du auf das Kettensymbol, um einen Link einzufügen.
Schritt 3: Von Static zu JumpLink wechseln
Jetzt wechselst du von Static zu JumpLink.
Schritt 4: Smooth Animation für Runterscrollen oder nichts für direkten Sprung
Wenn du möchtest kannst du auch eine Animation für den Ankerlink auswählen. Mit dieser Smooth Animation scrollt die Webseite automatisch bis zum Zielelement. Wählst du keine Animation aus, dann ist es ein schneller Sprung.
Schritt 5: Select Target
Anschließend wirst du dazu aufgefordert ein Zielelement für den Ankerlink auszuwählen.
Schritt 6: Auf der Seite das Zielelement anklicken
Du kannst nun über die Seite scrollen und das gewünschte Element anklicken.
Schritt 7: Add Jumplink
Nach dem Klick auf das Zielelement, musst du nur noch Add Jumplink auswählen und dann bist du auch schon fertig.
3. Anker setzen im Menü
Wenn du einen OnePager (also eine Webseite, die nur eine Seite hat) erstellst, dann kannst du WordPress Anker setzen, um vom Hauptmenü direkt zum ausgewählten Abschnitt deiner Webseite zu gelangen.
Schritt 1: Über Design zu Menüs
Um das zu tun, gehst du unter Design zu Menüs.
Schritt 2: Individuelle Links
Wenn du bei den Menüs bist, dann wählst du Individuelle Links aus.
Schritt 3: URL des Ankerlinks eingeben
Dort fügst du bei URL die URL der Ziel-Seite ein und fügst an diese eine Raute (#) und Deine Anker ID an.
z.B. https://wperfolg.de/reviews/#ankeridname
Schritt 4: Link-Text eingeben
Bei Link-Text kannst du entscheiden wie der Ankerlink im Menü heißen soll.
Schritt 5: Zum Menü hinzufügen
Zum Schluss fügst du den individuellen Link zum Menü hinzu und ziehst ihn an die gewünschte Stelle.
4. Fazit
WordPress Anker zu setzen verbessert die Navigation deiner Webseite deutlich. Solltest du längere Blogbeiträge veröffentlichen, dann kommst du kaum drumherum Ankerlinks für deine Inhaltsverzeichnisse zu nutzen. Für den Leser ist das deutlich angenehmer, als wenn man die interessanten Abschnitte selbst suchen muss.
Auch um zu Abschnitten einer Seite zu springen, sind WordPress Anker eine sehr gute Möglichkeit. Gerade bei OnePagern.
Und wie du hoffentlich hier im Artikel gesehen hast, sind WordPress Anker wirklich nicht schwer zu setzten.
5. FAQ – Fragen zum Thema WordPress Anker setzen
Wie setze ich Ankerlinks auf andere Seiten?
Einen WordPress Anker auf einer anderen Seite zu setzen funktioniert ähnlich wie einen Ankerlink im Menü zu setzen. Du kopierst die URL der Seite, auf die du verlinken möchtest und setzt #ankername dahinter. Diesen Link fügst Du jetzt beim entsprechenden Element ein (z.B. Text, Button, Menü etc.).