Sprungmarken sind eine feine Sache. Mit ihnen ist es zum Beispiel möglich, von einem Beitrag zu einer konkreten Textstelle eines anderen Beitrags zu verlinken. Aber auch bei Links auf derselben Seite leisten sie gute Dienste. So vor allem im Kontext von Inhaltsverzeichnissen oder Fußnoten. Doch bevor man den entsprechenden Link setzen kann, muss man vorher erst einmal eine Sprungmarke anlegen. Dieser Beitrag beschäftigt sich also mit der Frage, wie sich in WordPress Anker setzen und gewünschte Ziele erreichen lassen.
WordPress Anker = HTML-Anker
Die Möglichkeit der Sprunglinks, also jener Verlinkung, die zu einer vordefinierten Stelle im Text auf derselben oder einer anderen Seite springt, ist keine Erfindung von WordPress. Tatsächlich fanden sie schon Anwendung in der allerersten HTML-Version, die 1992 das Licht der Welt erblickte und sich nur für Texte interessierte.
Gelernt habe ich das Ganze noch mit dem „name“-Attribut des Anker-Elementes <a name=""> </a>. Doch das gilt schon lange als veraltet. Viel leichter ist es ohnehin, mit einer ID als Sprungziel zu arbeiten. Wie das im HTML-Sinn funktioniert, hatte ich schon einmal in dem Beitrag gezeigt, der sich mit dem Setzen von Fußnoten beschäftigt.1
Bezogen auf WordPress war es bis zum Gutenberg Editor gar nicht so einfach, diese HTML-Anker zu nutzen. Das zeigt auch meine Erklärung in dem Fußnoten-Beitrag. Dort ist die Rede von der Text- im Gegensatz zur visuellen Bearbeitung, die der Classic Editor zur Verfügung stellt. Die Text-Bearbeitung war jedenfalls nötig, weil die visuelle ein elementares Problem mit HTML-Code hat.
Mit Gutenberg Sprungmarken anlegen
Seit es Gutenberg gibt, ist es nun sehr einfach, mit WordPress Anker zu setzen. Dafür gibt es das Panel Erweitert. Das bietet Gutenberg schon lange für jede Überschrift, seit WordPress 5.5 aber auch für fast alle anderen Blöcke. Ausnahmen sind hier so ziemlich alle Widget-Blöcke wie Neueste Beiträge, Neueste Kommentare, der Shortcode- oder der Kategorien-Block.
Mit anderen Worten: Wollte ich das folgende Zitat zum Ziel eines Sprunglinks machen, würde ich in der rechten Seitenspalte bei der Bearbeitung dieses Zitat-Blocks im Panel Erweitert beim HTML-Anker meine Sprungmarke definieren. WordPress gibt an der Stelle die Anleitung:
Gib ein oder zwei Wörter – ohne Leerzeichen – ein, um eine eindeutige Webadresse nur für diese Überschrift zu erstellen, die als „Anker“ bezeichnet wird. Dann kannst du direkt zu diesem Abschnitt deiner Seite verlinken.
WordPress Anweisung zum Anker Setzen
Korrekt müsste es mittlerweile »… nur für diesen Block …«, statt »… nur für diese Überschrift …« heißen. Aber wie gesagt, die Möglichkeit, mehr Blöcke als nur die Überschriften zu Sprungzielen zu machen, ist noch recht neu. Dem Zitat habe ich jedenfalls den HTML-Anker anweisung verpasst. Daraus macht WordPress eine ID, die es dem Element <blockquote> gibt.
Im ganzen Satz sieht das HTML zu dem Zitat-Block dann also wie folgt aus:
<blockquote class="wp-block-quote" id="anweisung"><p><em>Gib ein oder zwei Wörter – ohne Leerzeichen – ein, um eine eindeutige Webadresse nur für diese Überschrift zu erstellen, die als „Anker“ bezeichnet wird. Dann kannst du direkt zu diesem Abschnitt deiner Seite verlinken.</em></p><cite>WordPress Anweisung zum Anker Setzen</cite></blockquote>
Nun, da ich dem Zitat tatsächlich einen Anker verpasst habe, können wir den auch anspringen. Den Link dazu setzt man wie jeden anderen Link. Der einzige Unterschied: Statt den/die zu verlinkenden Beitrag oder Seite zu suchen oder die URL komplett einzugeben, lautet die Eingabe #linkziel. In meinem Fall ist dies konkret
#anweisung ↑
Mit Page Scroll To ID sanft zum Anker
Ohne das Plugin Page Scroll To ID würde ein solcher Sprunglink wie ein normaler Link zu seinem Ziel springen. Dagegen ist an sich nichts zu sagen. Allerdings kann es durchaus sinnvoll sein, Nutzern zu verdeutlichen, dass sie sich noch immer auf derselben Seite befinden. Diesen Eindruck verschafft das Plugin mit seiner sanften Scroll-Animation.
Page Scroll To ID hat auch eine eigene Einstellungsseite, die sich unter Einstellungen > Page Scroll To ID findet und sogar recht umfangreich ist. Da das Plugin aber bereits mit seinen Standardeinstellungen in meinen Augen optimal funktioniert, gab es für mich noch nicht die Notwendigkeit, Aspekte wie die Scroll Dauer, das Scroll Verhalten oder das Link Verhalten zu modifizieren.
Das Plugin bringt im Übrigen auch einen eigenen Block mit. Der heißt Page Scroll to ID target und findet sich unter den Design Blöcken. Sein einziger Zweck: Mit diesem Block lassen sich WordPress Anker setzen, die nicht an einen der üblichen Blöcke gebunden sind. Soll heißen: Dieses Page Scroll to ID target Block produziert einen DIV-Bereich mit der ID, die man ihm gibt. Ein solches Sprungziel habe ich in diesem Beitrag natürlich auch angelegt. Und zwar direkt oberhalb des WordPress Zitats. Die vergebene ID lautet #anweisungtarget und lässt sich mit diesem Link anspringen.
Im Einsatz ist das Plugin auf dieser Website vor allem wegen der Möglichkeit, vom Header zu den wesentlichen Inhalten meiner Start-, der Kurse- und der Angebote-Seite zu scrollen. Würden die Sprunglinks, die ich dort jeweils gesetzt habe, tatsächlich springen, wäre Nutzern wahrscheinlich gar nicht klar, dass sie sich noch immer auf der jeweiligen Seite befinden.
WordPress Anker zu externen Seiten setzen
Ob WordPress oder nicht, HTML-Anker funktionieren auch bei der Verlinkung zu anderen Websites. Allerdings hat man bei anderen Websites keinen Einfluss auf die Sprungmarke. In diesem Beitrag verweisen alle Links auf externe Websites direkt auf dortige Sprungmarken. Bei einem Anbieter wie der Wikipedia ist es nämlich immer möglich, zu einem thematischen Bereich auf der jeweiligen Seite zu verlinken.
Wenn ich also auf der Wiki-Seite Hypertext Markup Language zu der Auflistung der HTML-Versionen verlinken will, dann lautet der Link:
https://de.wikipedia.org/wiki/Hypertext_Markup_Language#VersionenDem Link zu der Seite muss mal also nur noch die ID #Versionen hinzufügen.
Ob eine externe Website Sprungmarke gesetzt hat, ist nicht immer so leicht zu erkennen wie bei der Wikipedia mit ihren Inhaltsverzeichnissen. Die wesentliche Erkenntnis ist jedenfalls: Wo ein Inhaltsverzeichnis, da auch Sprungmarken. So zum Beispiel auch auf meiner FAQ-Seite. Und wie die Anker-Adressen im Einzelnen lauten, steht nach dem Klick auf einem der Einträge des Inhaltsverzeichnisses in der Adresszeile des Browsers. Oder man wirft vor dem Klick mal einen Blick an das untere linke Ende des Browserfensters, während der Mauszeiger auf den Link weist. Der Browser zeigt dort den hinterlegten Link an.
- Apropos Fußnote: Viele Links in diesem Beitrag sind Sprunglinks. Zum Beispiel dieser hier, mit dem es wieder nach oben geht: ↑
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar