WordPress Anker setzen (2021): In 2 Minuten mit & ohne Plugin

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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

  1. Für was sollte man WordPress Ankerlinks nutzen?
  2. 6 Wege in WordPress Anker zu setzen
    1. Anker setzen im Gutenberg Editor
    2. Anker setzen im klassischen Editor
    3. Advanced Editor Tools Plugin – (hieß früher Tinymce advanced)
    4. Anker setzen mit dem Easy Table of Contents Plugin
    5. Anker setzen mit Elementor
    6. Anker setzen mit dem Thrive Architect
  3. Anker setzen im Menü
  4. Fazit
  5. FAQ – Fragen zum Thema WordPress Anker setzen
    1. Wie setze ich Ankerlinks auf andere Seiten?

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

wordpress anker setzen

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

gutenberg link einfügen

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

wordpress anker klassischer editor id

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

anker link setzen visueller editor

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

tiny plugin

Bevor du den WordPress Anker setzt, musst du das Plugin Advanced Editor Tools installieren und aktivieren.

Schritt 2: Zu Einstellungen des Plugins gehen

tiny aktivieren

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)

tiny anker menüpunkt
tiny anker ins menü ziehen
tiny anker ins menü block 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

tiny klassischer absatz

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

easy plugin

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

easy aktivieren

Anschließend gehst du zu den Einstellungen von Easy Table of Contents.

Schritt 3: Haken bei Unterstützung aktivieren und Automatisches Einfügen setzen

easy unterstützung aktivieren

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.

easy automatisches einfügen

Schritt 4: Position, Einblenden, wenn und andere Einstellungen auswählen

easy andere einstellungen

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

easy table of contents
easy table of contents

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:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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.

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

menü anker

Um das zu tun, gehst du unter Design zu Menüs.

Schritt 2: Individuelle Links

menü 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.).


Diese Artikel könnten Dir auch gefallen

Verkaufsseite erstellen (2021): 3-Schritte-Sofortanleitung | Mit und ohne WordPress

Verkaufsseite erstellen (2021): 3-Schritte-Sofortanleitung | Mit und ohne WordPress

Top 14 WordPress Quiz Plugins (2021): Das #1 Plugin für Quizze und Umfragen

Top 14 WordPress Quiz Plugins (2021): Das #1 Plugin für Quizze und Umfragen

WordPress Video einbinden (2021): 3 simple Wege

WordPress Video einbinden (2021): 3 simple Wege

WordPress Widgets (2021): Simpel erklärt | Übersicht | Hinzufügen & mehr

WordPress Widgets (2021): Simpel erklärt | Übersicht | Hinzufügen & mehr

Über den Autor

Pascal Alius


Tags

Wordpress anker, Wordpress anker menü, Wordpress anker plugin, Wordpress anker setzen, Wordpress anker setzen plugin, Wordpress elementor anker setzen, Wordpress sprungmarken, Wordpress sprungmarken plugin, Wordpress sprungmarken setzen

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Du bist nur einen Klick entfernt, mit Deiner Website richtig durchzustarten...