Das Wichtigste im Überblick

Wenn Du weißt, wie sich bei WordPress Anker setzen lassen, kannst Du die Benutzerfreundlichkeit Deiner Seite erhöhen. WordPress-Anker sind nämlich Sprungmarken, über die Deine Besucher per Klick zu einem bestimmten Abschnitt gelangen.

WordPress-Anker werden zum Beispiel in Inhaltsverzeichnissen gesetzt, damit die Besucher sofort zu einem entsprechenden Kapitel springen können.

In diesem Artikel zeigen wir Dir, wie Du auf verschiedenen Wegen, zum Beispiel im Editor oder bei Elementor, WordPress-Anker setzen kannst.

WordPress-Anker: Worum handelt es sich und warum sind diese sinnvoll?

Bei einem WordPress-Anker handelt es sich um eine Sprungmarke auf einer Webseite, mit der Deine Besucher mit einem Klick von einem bestimmten Punkt der Seite zu einem anderen navigieren können. Häufig wird das Anker setzen bei HTML-Webseiten im Inhaltsverzeichnis genutzt, um es den Benutzern zu ermöglichen, sofort zu dem für sie interessantesten Abschnitt zu springen. Wenn Du HTML-Anker setzen kannst, bist Du jedoch in der Lage, diese überall, wo Du möchtest, auf Deiner Seite zu integrieren und so die Usability zu steigern. Das ist vor allem bei längeren Artikeln vorteilhaft, denn wenn Du hier keine HTML-Sprungmarke setzen möchtest, muss der Besucher eventuell lange scrollen, um die für ihn interessanten Inhalte zu finden.

Ob in Inhaltsverzeichnissen, im Menü von One-Pagern oder auch mitten in Texten: Um zu einem themenverwandten Abschnitt oder einer externen Seite zu verlinken, lohnt es sich zu wissen, wie Du eine WordPress-Sprungmarke setzen kannst, um das Nutzungserlebnis deiner Besucher zu verbessern. Nachfolgend stellen wir Dir verschiedene Verfahren vor, wie Du auf Deiner Webseite WordPress-Anker setzen kannst.

WordPress-Profi jetzt kontaktieren

Du suchst einen WordPress-Experten? Bei WordPress-Profi bist Du richtig, denn wir verfügen über langjährige Erfahrung mit WordPress und haben bereits hunderte Projekte mit dem CMS für zufriedene Kunden aus Deutschland, Österreich und der Schweiz umgesetzt. Wir stehen Dir jederzeit per Telefon und E-Mail hilfreich zur Seite.
Mehr erfahren

Anker setzen im herkömmlichen Editor

    1. Um im Editor einen Anker zu setzen, musst Du zunächst von der visuellen Ansicht in die Textansicht wechseln, indem Du oben rechts auf die Schaltfläche „Text“ klickst.
    2. Im Anschluss musst Du an der Stelle, wo Du den Anker setzen willst den HTML-Code um folgenden Befehl erweitern: id=“Bezeichnung“. Möchtest Du zum Beispiel
      – eine H2-Überschrift <h2>Titel</h2> wie verlinken,
      – dann fügst Du eine Zeile darüber <div id=“Bezeichnung“></div> ein.
      – Statt das Wort „Bezeichnung“ zu verwenden, nimmst Du einfach einen Linktext Deiner Wahl
    3. Zum Schluss wechselst Du zurück in den visuellen Editor, markierst den Text, der verlinkt werden soll, und klickst das Link-Symbol an. In die entsprechende Schaltfläche tippst du das Rautensymbol # gefolgt von deinem gewählten Linktext ein. Klicke schließlich auf das Bestätigungssymbol und du bist fertig.
  1.  

Im Gutenberg Editor einen Anker setzen

    1. Wechsel zunächst in der rechten Seitenleiste von „Beitrag“ auf „Block“ und klicke auf „Erweitert“. In dem Kästchen unter HTML-Anker gibst Du nun den Namen des Ankers ein, also zum Beispiel „kapitel4“. Hier ist die Kleinschreibung und ein Verzicht auf ein Leerzeichen zu empfehlen.
    2. Anschließend suchst Du auf Deiner Webseite die Stelle aus, wo Du den Anker setzen willst, markierst diese und gehst auf „Link einfügen“. Hier tippst Du das Rautensymbol und den Ankernamen ein, also „#kapitel4“. Klicke zum Schluss auf „Bestätigen“.

In Elementor Anker setzen

    1. Auch in Elementor kannst Du leicht einen Anker-Link setzen, zum Beispiel um ein Inhaltsverzeichnis zu erstellen. Klicke dazu links oben auf die Kachel und suche das Anker-Widget, indem Du „Anker“ in die Textzeile eingibst. Nun ziehst Du das Widget an die gewünschte Stelle, zum Beispiel direkt über Kapitel 3 in deinem Webseiten-Text.
    2. In der linken Leiste kannst Du dann den Namen eingeben, also z.B. “Kapitel3“. Nun gehst Du in das Textfeld, in dem Fall zum Inhaltsverzeichnis, und setzt einen Link, indem Du Kapitel 3 im Inhaltsverzeichnis anklickst und „#Kapitel3“ links eingibst.
    3. Nun gelangt man, wenn man im Inhaltsverzeichnis auf „Kapitel 3“ klickt direkt zum entsprechenden Abschnitt.

Nützliche WordPress-Themen

WordPress-Aktualisierungen, WordPress-Freelancer, Webshop-Agentur

Bei Divi Anker setzen

    1. Bei Divi kannst Du Anker auf der Ebene von Zeilen, Sektionen, Spalten oder Modulen setzen. Um dies zu machen, klickst Du auf der entsprechenden Ebene auf „Erweitert“ und gibst unter „CDD-ID“ den Ankertitel ein, zum Beispiel „anker1“. Achte darauf, klein zu schreiben und kein Leerzeichen zu verwenden.
    2. Anschließend suchst Du das Element, von dem aus zu diesem Anker verlinkt werden soll und setzt hier das Rautensymbol davor, also: #anker1. Das war es schon, nun gelangst Du per Klick von diesem Element zum zuvor bestimmten Ziel.

Anker setzen per Plugin

Es gibt einige tolle kostenlose Plugins, mit denen Du noch einfacher WordPress-Sprungmarken setzen kannst – ganz ohne HTML-Befehle. Empfehlenswert sind das beliebte TinyMCE Advanced Plugin, das speziell für die Erstellung von Inhaltsverzeichnissen entwickelte Easy Table of Contents und das WP Anchor Header Plugin, mit dem Du ganz simpel einen Ankerlink zu allen Überschriften setzen kannst. Die Bedienung all dieser kostenlosen Tools ist im Grunde kinderleicht. Nachfolgend zeigen wir Dir, wie Du mit dem TinyMCE Advanced Plugin eine Sprungmarke bei WordPress setzt:

    1. Nach der Installation des Plugins gehst Du zu Deinem Text und erstellst einen Hyperlink auf Deinen Ankernamen. Schreibe zum Beispiel „Schneller Sprung zu Kapitel 2“ in den Beitrag, markiere die Passage und weise ihr den Ankernamen #kapitel2 zu.
    2. Nun gehst Du zu der entsprechenden Kapitelüberschrift, mit welcher der Ankerlink verknüpft werden soll und wählst in der oberen Schaltfläche „Einfügen“ und „Anker“. Wähle nun „#kapitel2“ aus klick auf „Bestätigen“ – fertig. Einfacher ist das Anker setzen bei WordPress kaum möglich.

Anker setzen – Spezialfälle

Für ein Inhaltsverzeichnis, Überschriften sowie Buttons ist es vorteilhaft zu wissen, wie man einen Link mit einer Sprungmarke erstellen kann. Wir haben Dir in diesem Artikel gezeigt, dass dies auf verschiedenen Wegen ohne Probleme gelingt.

Anker setzen bei responsive Design oder mobilen Geräten

Wenn Deine Webseite für das responsive Design optimiert ist und Du die Anker richtig gesetzt hast, sollten diese auch auf Handy und Co. einwandfrei funktionieren.

Anker setzen auf externe Webseite

Übrigens kannst Du mit einem Anker nicht nur zu einem Abschnitt Deiner eigenen Seite verlinken, sondern auch auf eine externe Seite. Kopiere hierfür einfach die Adresse der entsprechenden Webseite und setz das Rautenzeichen gefolgt vom Ankernamen dahinter, zum Beispiel #kapitel1. Bei dem gewünschten Element, das verlinkt werden soll, fügst Du den Link anschließend einfach ein.

Das kannst Du tun, wenn der Anker zu tief sitzt

Klickst du auf die Sprungmarke, dann scrollt der Browser automatisch zum definierten Anker. Ganz häufig sitzt der Anker aber zu tief, sodass wichtige Inhalte darüber nicht sichtbar sind oder verdeckt werden.

In nachfolgendem Artikel erklären wir, wie Du dieses Problem vermeiden kannst: Ankerposition einer Sprungmarke mit CSS verschieben

WordPress-Profi jetzt kontaktieren

Du suchst einen WordPress-Experten? Bei WordPress-Profi bist Du richtig, denn wir verfügen über langjährige Erfahrung mit WordPress und haben bereits hunderte Projekte mit dem CMS für zufriedene Kunden aus Deutschland, Österreich und der Schweiz umgesetzt. Wir stehen Dir jederzeit per Telefon und E-Mail hilfreich zur Seite.
Mehr erfahren

Profi-Check für deine Website

Prüfe dein WordPress mit unserem kostenlosen Webseiten-Check und erhalte ausführliche Ergebnisse und Handlungsempfehlungen zur Performance, Sicherheit, Barrierefreiheit und SEO.
Kostenlosen Profi-Check starten