Anleitung<\/a> des Artikels, gehe ich erstmal darauf ein, wie du einen Anker per HTML setzen kannst. Man kann eine Menge \u00fcber diverse Tools machen, aber es ist immer gut, wenn man wei\u00df, wie es auch \u201epur\u201c geht.<\/p>Dann versteht man wesentlich besser, warum die Dinge so funktionieren, wie sie es tun.<\/p>
Schritt 1: Das Anker Ziel festlegen<\/h3> Gehe zu dem Bereich, der \u00fcber den Link erreichbar sein soll. Das kann ein Textabsatz sein, aber auch ein Bild oder bestenfalls eine Zwischen\u00fcberschrift.<\/p>
Denke dir einen m\u00f6glichst eindeutigen Namen f\u00fcr diesen Bereich aus und bearbeite den Bereich direkt im Code.<\/p>
Am Beispiel einer Zwischen\u00fcberschrift w\u00fcrde das so aussehen:<\/strong><\/p><h2 class=\"dies-ist-dein-Link\">Eine tolle Zwischen\u00fcberschrift mit gesetztem Anker<\/h2><\/code><\/pre>Der Trick ist hier der Bereich \u201eclass\u201c mit dem eindeutigen Namen zwischen den Anf\u00fchrungszeichen. Er macht deine Zwischen\u00fcberschrift zu einem echten Anker, den du \u00fcber einen Link in deinem Artikel direkt aufrufen kannst.<\/p>
Schritt 2: Den Anker-Link einbauen<\/h3> Brauchen wir nur noch den Link. Und die gute Nachricht ist, dass jetzt der wirklich einfache Teil kommt \ud83d\ude09<\/p>
Markiere den Text, den du mit einem Link versehen m\u00f6chtest und setze den Link im Format<\/p>
#dies-ist-dein-link<\/code><\/pre>Wenn du in WordPress einen Anker Link setzen m\u00f6chtest, brauchst du weder ein https:\/\/ vor dem Link, noch ein www. noch sonstwas. Das Raute-Zeichen vor deinem Link reicht vollkommen aus, um einem Browser zu sagen, wohin er springen muss.<\/p>
WordPress Anker im Gutenberg Editor setzen<\/h2> Die Einf\u00fchrung des Gutenberg Editors in WordPress ist ja von sehr vielen Nutzern verteufelt worden. Ich pers\u00f6nlich halte Gutenberg f\u00fcr eine sehr gelungene Erg\u00e4nzung zu WordPress.<\/p>
Besonders, weil dieser Editor viele Kleinigkeiten um einiges einfacher macht. Gerade f\u00fcr Anf\u00e4nger.<\/p>
Das gilt auch f\u00fcr das Setzen von Anker-Links in WordPress. Mit dem Gutenberg Editor sparst du dir einen Eingriff in den Code.<\/p>
Schritt 1: Das Anker-Ziel \u00fcber die Blockeinstellungen definieren<\/h3> Markiere den Abschnitt deines Artikels, zu dem der Leser \u00fcber den Link springen soll. Auch hier kann das vom Bild bis hin zur Zwischen\u00fcberschrift so ziemlich alles sein.<\/p>
Klicke rechts in der Einstellungsleiste auf den Bereich Erweitert<\/strong>.<\/li>Im Textfeld mit der Beschriftung Zus\u00e4tzliche CSS-Klasse(n)<\/strong> gibst du jetzt einen eindeutigen Namen f\u00fcr deinen Abschnitt ein und merkst dir den Namen.<\/li>Bei Zwischen\u00fcberschriften zeigt dir der WordPress Gutenberg Editor in der Einstellungsleiste auch direkt die Option HTML-Anker<\/strong> an. Ist diese Option sichtbar, nutze sie lieber, als die CSS-Klasse aus dem 2. Schritt.<\/li><\/ol> <\/figure><\/div>Schritt 2: Den Anker im Text verlinken<\/h3>Markiere den Text, den du zum Link umwandeln m\u00f6chtest und klicke auf das Kettenglieder-Symbol in der kleinen Werkzeugleiste, die sich dabei \u00f6ffnet.<\/li> Im Feld URL einf\u00fcgen, f\u00fcgst du jetzt ein #-Zeichen, gefolgt vom eindeutigen Namen deines Abschnitts ein.<\/li> Zum \u00dcbernehmen deines Links klickst du jetzt auf den Button mit dem eckigen Pfeil rechts daneben.<\/li> Freu dich, dass du soeben deinen ersten funktionsf\u00e4higen Anker-Link mit Anker erstellt hast \ud83e\udd73<\/li><\/ol> <\/figure><\/div>Von einer anderen Seite mit einem Anker verlinken<\/h2> Bislang habe ich dir ja nur erkl\u00e4rt, wie du ein Element innerhalb<\/strong> einer Seite mit einem Anker verlinken kannst. Das Ganze geht aber auch von einer externen Seite aus.<\/p>Beispiel: <\/strong>In einem neuen Blogartikel erw\u00e4hnst du eine Information, die du neulich in einem anderen Artikel ausf\u00fchrlich behandelt hast. <\/p>Dann macht es Sinn, den alten Artikel direkt mit einem Anker zum entsprechenden Abschnitt zu verlinken. Dein Besucher muss nicht lange suchen und bekommt direkt die Info, die er gesucht hat.<\/p>
Um zu definieren, wohin der Anker zeigen soll, gehst du einfach so vor, wie ich es dir in den beiden Kurzanleitungen oben beschrieben habe.<\/p>
Um den Anker Link zu setzen, erweiterst du jetzt deinen normalen Link einfach um den Namen des Anker Ziels mit der Raute. Das sieht dann so aus:<\/p>
https://www.deineseite.de\/artikelname#deinanker<\/code><\/pre>Wie du siehst, k\u00f6nntest du so auch von einer ganz anderen Website aus direkt zielgerichtet auf deinen Anker verlinken.<\/p>
Unter’m Strich<\/h2> Anker Links zu setzen ist eine ganz einfache Geschichte, die du schnell in deinem Know-How-Arsenal abgespeichert hast.<\/p>
Deinen Besuchern gibst du mit clever gesetzten Sprungmarken die M\u00f6glichkeit, schnell und komfortabel zu den Infos zu gelangen, die sie wirklich interessieren.<\/p>
Ein Nachteil von Anker-Links liegt allerdings auch darin, dass deine Besucher sich gar nicht mehr den kompletten Artikel durchlesen, sondern einfach nur Schnipsel konsumieren. Auf die Aufenthaltszeit auf deiner Website kann sich das also auch negativ auswirken. Ein Aspekt, der gerade f\u00fcr dein SEO relativ wichtig sein kann.<\/p>","protected":false},"excerpt":{"rendered":"
Lerne, wie du schnell und einfach Anker-Links in WordPress setzen kannst. Und zwar ganz ohne Plugins und Schnick-Schnack.<\/p>\n","protected":false},"author":1,"featured_media":2846,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"limit_modified_date":"1","last_modified_date":"2021-06-13T19:47:13","inline_featured_image":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"yoast_head":"\n
Wordpress Anker setzen - So geht's auch ohne Plugin - WPFellows<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n\t \n\t \n\t \n