{"id":239573,"date":"2022-03-13T12:41:00","date_gmt":"2022-03-13T09:41:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=239573"},"modified":"2022-04-27T11:51:53","modified_gmt":"2022-04-27T08:51:53","slug":"so-verlinken-sie-auf-einen-bestimmten-teil-einer-wordpress-seite-schritt-fuer-schritt","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-verlinken-sie-auf-einen-bestimmten-teil-einer-wordpress-seite-schritt-fuer-schritt\/","title":{"rendered":"So verlinken Sie auf einen bestimmten Teil einer WordPress-Seite (Schritt f\u00fcr Schritt)"},"content":{"rendered":"<p>Wenn Sie eine lange Seite auf Ihrer Website haben, kann es hilfreicher sein, Besucher direkt zu einem Abschnitt dieser Seite zu verlinken als ein normaler Link.<\/p>\n<p>Gl\u00fccklicherweise hat der <a href=\"https:\/\/themewp.inform.click\/kak-ispolzovat-redaktor-blokov-wordpress-osnovnoe-rukovodstvo-po-gutenbergu\/\" title=\"Gutenberg-Editor\">Gutenberg-Editor<\/a> dies einfach gemacht und Sie m\u00fcssen keine neuen Plugins installieren.<\/p>\n<p>Und nur um das klarzustellen, ich spreche von einem Link wie diesem, der Sie zu der folgenden \u00dcberschrift f\u00fchrt: <a href=\"#first-heading\">Scrollen Sie zur n\u00e4chsten \u00dcberschrift<\/a>.<\/p>\n<p>In diesem Tutorial erfahren Sie, wie Sie solche Links erstellen, die auf dieselbe Seite oder einen Abschnitt auf einer separaten Seite verweisen k\u00f6nnen.<\/p>\n<p>Dieses Tutorial enth\u00e4lt auch <strong>Schritte f\u00fcr den Classic Editor<\/strong>, aber bitte lesen Sie zuerst den Rest des Beitrags, um zu erfahren, wie Sie richtig verlinken.<\/p>\n<h2>So verlinken Sie einen Teil einer Seite<\/h2>\n<p>Wenn Sie Video-Tutorials bevorzugen, k\u00f6nnen Sie dieser Schritt-f\u00fcr-Schritt-Anleitung folgen, anstatt die Anweisungen in diesem Beitrag zu lesen.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/ghVHEzlLVqw\" frameborder=\"0\"><\/iframe><\/div>\n<p><a href=\"http:\/\/link.competethemes.com\/subscribe\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Abonnieren Sie Compete Themes auf Youtube<\/a><\/p>\n<p>Um auf einen bestimmten Teil einer Seite zu verlinken, m\u00fcssen Sie zwei Dinge tun.<\/p>\n<ol>\n<li>F\u00fcgen Sie einen Anker zum Verlinken hinzu<\/li>\n<li>Link zum Anker<\/li>\n<\/ol>\n<p>Zuerst m\u00fcssen Sie das Element angeben, zu dem Sie einen Link erstellen m\u00f6chten. Dies kann ein beliebiges Element sein, aber wir verwenden eine \u00dcberschrift, da dies das h\u00e4ufigste Element ist, auf das verlinkt wird.<\/p>\n<p>Sobald der Anker hinzugef\u00fcgt wurde, m\u00fcssen Sie ihn nur mit dem normalen Link-Editor und einem etwas anderen URL-Format verlinken.<\/p>\n<p>Es wird in der Praxis leicht zu verstehen sein, also fangen wir an.<\/p>\n<h3>So f\u00fcgen Sie einer \u00dcberschrift einen Anker hinzu<\/h3>\n<p>Beginnen Sie mit der Auswahl eines \u00dcberschriftenblocks im Editor. In der rechten Seitenleiste wird ein Abschnitt &quot;Erweitert&quot; angezeigt, der standardm\u00e4\u00dfig ausgeblendet ist.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a1bc135c.png\"><\/a><\/p>\n<p>\u00d6ffnen Sie den Abschnitt Erweitert, und das erste, was Sie sehen, ist die Option HTML-Anker.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a1da4d9e.png\"><\/a><\/p>\n<p>WordPress nennt dies einen Anker, aber Entwickler bezeichnen dies als die ID des Elements<\/p>\n<p>Geben Sie der \u00dcberschrift im HTML-Ankerfeld einen kurzen und beschreibenden Namen. Es darf keine Leerzeichen enthalten, aber Sie k\u00f6nnen Bindestriche verwenden, um W\u00f6rter zu trennen. Zum Beispiel k\u00f6nnte ein Abschnitt \u00fcber Ern\u00e4hrung in einem Artikel \u00fcber die Pflege eines Hundes einen Anker wie \u201eDi\u00e4t&#8220; oder \u201eHundedi\u00e4t&#8220; haben.<\/p>\n<p>Nachdem Sie den Anker hinzugef\u00fcgt haben, k\u00f6nnen Sie ihn verlinken.<\/p>\n<h3>So verlinken Sie einen Anker<\/h3>\n<p>Die Schritte unterscheiden sich geringf\u00fcgig, je nachdem, ob sich der Link auf derselben Seite befindet oder nicht. Beginnen wir mit denselben Seitenlinks.<\/p>\n<p>Um zu einem Anker auf derselben Seite zu verlinken, markieren Sie den Text, den Sie verlinken m\u00f6chten, und klicken Sie auf das Link-Symbol (oder verwenden Sie die Tastenkombination cmd+k).<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a1f81764.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a1f81764.png\" alt=\"So verlinken Sie auf einen bestimmten Teil einer WordPress-Seite (Schritt f\u00fcr Schritt)\"><\/a><\/p>\n<p>Geben Sie dann im URL-Feld einen Hashtag gefolgt vom Anker ein.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a214c345.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a214c345.png\" alt=\"So verlinken Sie auf einen bestimmten Teil einer WordPress-Seite (Schritt f\u00fcr Schritt)\"><\/a><\/p>\n<p>WordPress f\u00fcgt sogar ein Label hinzu, um Sie wissen zu lassen, dass es sich um einen \u201einternen&#8220; Link handelt<\/p>\n<p>Sobald Sie die Eingabetaste dr\u00fccken, wird der Link hinzugef\u00fcgt. Sie k\u00f6nnen den Artikel in der Vorschau anzeigen, um ihn sofort auszuprobieren.<\/p>\n<p>Um diese Technik f\u00fcr einen Anker auf einer anderen Seite zu verwenden, ben\u00f6tigt die URL eine kleine \u00c4nderung.<\/p>\n<p>Der einzige Unterschied besteht darin, dass Sie zuerst die vollst\u00e4ndige URL gefolgt von Hashtag und Anker hinzuf\u00fcgen, wie folgt:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a2317207.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a2317207.png\" alt=\"So verlinken Sie auf einen bestimmten Teil einer WordPress-Seite (Schritt f\u00fcr Schritt)\"><\/a><\/p>\n<p>Der Link funktioniert m\u00f6glicherweise nicht ohne den Schr\u00e4gstrich am Ende der URL vor dem Anker, also stellen Sie sicher, dass Sie ihn jedes Mal einf\u00fcgen. Es kann auch <a href=\"https:\/\/themewp.inform.click\/vse-36-sposobov-uskorit-rabotu-vashego-sajta-na-wordpress\/\" title=\"das Laden Ihrer Website beschleunigen,\">das Laden Ihrer Website beschleunigen,<\/a> indem die automatische Weiterleitung zur Schr\u00e4gstrich-Version der URL \u00fcbersprungen wird.<\/p>\n<p>Das deckt wahrscheinlich alles ab, was Sie \u00fcber das Hinzuf\u00fcgen interner Ankerlinks zu WordPress wissen m\u00fcssen, aber ich habe noch ein paar Tipps f\u00fcr neugierige K\u00f6pfe.<\/p>\n<p>Sie k\u00f6nnen dieselbe Technik verwenden, um eine <a href=\"https:\/\/themewp.inform.click\/11-luchshih-odnostranichnyh-tem-wordpress\/\" title=\"einseitige Website\">einseitige Website<\/a> zu erstellen .<\/p>\n<p>Bei einer einseitigen Website haben Sie nur eine Startseite, und das Men\u00fc f\u00fchrt Besucher zu verschiedenen Abschnitten auf dieser Seite und nicht zu v\u00f6llig neuen Seiten.<\/p>\n<p>Um diese Art von Site zu erstellen, erstellen Sie Ihre Anker mit derselben Methode, die Sie gerade gelernt haben. Dann k\u00f6nnen Sie Ihr Men\u00fc im Customizer \u00f6ffnen und den Abschnitt Benutzerdefinierte Links verwenden, um auf Ihre Anker zu verlinken.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a24dc72b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a24dc72b.png\" alt=\"So verlinken Sie auf einen bestimmten Teil einer WordPress-Seite (Schritt f\u00fcr Schritt)\"><\/a><\/p>\n<p>Wenn Sie diese Technik f\u00fcr eine mehrseitige Website verwenden, stellen Sie sicher, dass Sie die vollst\u00e4ndige URL vor dem Hashtag angeben.<\/p>\n<h2>So verlinken Sie mit anderen Elementen<\/h2>\n<p>\u00dcberschriften sind nicht die einzigen Elemente, die die HTML-Ankeroption enthalten.<\/p>\n<p>Sie k\u00f6nnen auch Anker hinzuf\u00fcgen zu:<\/p>\n<ul>\n<li>Abs\u00e4tze<\/li>\n<li>Bilder<\/li>\n<li>Listen<\/li>\n<li>Galerien<\/li>\n<li>Tabellen<\/li>\n<li>Zitate<\/li>\n<\/ul>\n<p>Tats\u00e4chlich konnte ich beim Durchsuchen von Gutenberg-Bl\u00f6cken keinen einzigen finden, der die HTML-Ankeroption nicht unterst\u00fctzte.<\/p>\n<p>Wenn Sie jedoch einen von einem Plugin hinzugef\u00fcgten Block verwenden, kann diese Option fehlen. Au\u00dferdem ist die Ankeroption nicht verf\u00fcgbar, wenn Sie den klassischen Editor verwenden. So k\u00f6nnen Sie den HTML-Code bearbeiten, um jedem Element auf Ihrer Website einen Anker hinzuzuf\u00fcgen.<\/p>\n<h2>So f\u00fcgen Sie Ankerlinks mit HTML hinzu<\/h2>\n<p>Wenn Sie den klassischen Editor verwenden (oder einen Block ohne HTML-Ankerfeld verwenden), m\u00fcssen Sie den Link in einigen weiteren Schritten hinzuf\u00fcgen.<\/p>\n<p><strong>Die Art und Weise, wie Sie mit dem Anker verlinken, ist dieselbe<\/strong>. Der einzige Unterschied besteht darin, wie Sie den Anker zum Element hinzuf\u00fcgen.<\/p>\n<p>Um den Anker hinzuzuf\u00fcgen, m\u00fcssen Sie den HTML-Code bearbeiten. Im Gutenberg-Editor k\u00f6nnen Sie das Optionsmen\u00fc des Blocks \u00f6ffnen und Als HTML bearbeiten ausw\u00e4hlen. Verwenden Sie im Classic Editor die Registerkarten oben rechts, um von der visuellen Ansicht zur Textansicht zu wechseln.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a2684f8f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a2684f8f.png\" alt=\"So verlinken Sie auf einen bestimmten Teil einer WordPress-Seite (Schritt f\u00fcr Schritt)\"><\/a><\/p>\n<p>Wenn Sie den HTML-Code anzeigen, sehen Sie, dass Ihre \u00dcberschriften wie folgt mit HTML-Tags umschlossen sind:<\/p>\n<pre><code>&lt;h3&gt;This is a heading&lt;\/h3&gt;<\/code><\/pre>\n<p>Um einen Anker hinzuzuf\u00fcgen, m\u00fcssen Sie der \u00dcberschrift das ID-Attribut hinzuf\u00fcgen. Hier ist ein Beispiel, das der \u00dcberschrift einen Anker namens \u201edog-di\u00e4t&#8220; gibt:<\/p>\n<pre><code>&lt;h3 id=\"dog-diet\"&gt;This is a heading&lt;\/h3&gt;<\/code><\/pre>\n<p>Jedes HTML-Element kann das ID-Attribut verwenden, sodass Sie nicht auf \u00dcberschriften beschr\u00e4nkt sind. Im klassischen Editor wird ein Gro\u00dfteil des HTML-Codes nicht wirklich angezeigt, aber Sie k\u00f6nnen einen Abschnitt jederzeit in \u201ediv&#8220;-Tags einschlie\u00dfen, um einen Anker hinzuzuf\u00fcgen, wie folgt:<\/p>\n<pre><code>&lt;div id=\"link-target\"&gt;<\/code><\/pre>\n<p>Das Hinzuf\u00fcgen des div-Elements macht keinen visuellen Unterschied auf der Seite, aber Sie k\u00f6nnen direkt auf diese Abs\u00e4tze verlinken.<\/p>\n<p>Das Bearbeiten des HTML-Codes funktioniert genauso, egal ob Sie Gutenberg oder den Classic Editor verwenden. Sobald der Anker platziert ist, m\u00fcssen Sie ihn nur mit der oben beschriebenen Methode verkn\u00fcpfen.<\/p>\n<h3>Lerne weiter WordPress<\/h3>\n<p>Mit Kenntnissen \u00fcber Ankerlinks und ein wenig HTML k\u00f6nnen Sie von \u00fcberall auf Ihrer Site auf jeden Abschnitt auf jeder Seite verlinken.<\/p>\n<p>Wenn das Erlernen neuer WordPress-Techniken f\u00fcr Sie aufregend und erf\u00fcllend ist, werden Sie wahrscheinlich meinen kostenlosen WordPress-E-Mail-Kurs lieben:<\/p>\n<p><a href=\"https:\/\/www.competethemes.com\/subscribe\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Nehmen Sie am 7-t\u00e4gigen WordPress Mastery E-Mail-Kurs teil<\/a><\/p>\n<p>Wenn es Ihnen nicht gef\u00e4llt, k\u00f6nnen Sie sich mit einem Klick abmelden, aber Sie werden sicher mindestens einen neuen wertvollen Tipp mitnehmen. Der 7-t\u00e4gige E-Mail-Kurs vermittelt Design-, Marketing- und Leistungstaktiken, um eine rundum bessere Website zu erstellen.<\/p>\n<p>Vielen Dank, dass Sie diese Anleitung zum Verlinken auf Teile von Seiten in WordPress gelesen haben. Bitte denken Sie dar\u00fcber nach, sie \u00fcber die unten stehenden Schaltfl\u00e4chen f\u00fcr soziale Netzwerke mit anderen zu teilen.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Erfahren Sie, wie Sie auf einen bestimmten Teil eines WordPress-Beitrags oder einer WordPress-Seite verlinken. Es dauert nur eine Minute und erfordert keine neuen Plugins.<\/p>\n","protected":false},"author":1,"featured_media":21644,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[175,649,567,607],"tags":[845],"class_list":["post-239573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chrome-3","category-wie-macht-man","category-wordpress-grundlagen","category-uncategorized-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/239573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=239573"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/239573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/21644"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=239573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=239573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=239573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}