Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
anker

Anker setzen + Ankerziel konform. – wenn-denn-richtig

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Besucher einer Website empfinden es als effizient, wenn sie mithilfe von Ankerzielen direkt zu einem bestimmten Abschnitt einer Seite springen können, anstatt scrollen zu müssen. Dies ist besonders wichtig, wenn es um die Verlinkung zu einem anderen Dokument geht, da Ankerziele die Navigation für Benutzer vereinfachen.

Beginnen wir damit, wie du gelegentlich den folgenden Code verwenden kannst:

<a href="#">Zum Seitenanfang ↑</a>

Du kannst auch einfach einen Link einfügen, wie im Titel "Zum Seitenanfang ↑" gezeigt, und ihn mit der URL "#" verknüpfen.

Anmerkung: Das Hinzufügen eines Ankers mit dem Plug-in Advanced Editor ist besonders einfach.

Für längere Seiten, Blogs und generell praktikabel ist die Verwendung eines Plug-ins wie Float to Top Button, um schnell nach oben zu gelangen. Oder das Feature selbst erstellen, siehe im Titel Bildlauf zurück nach oben! 

Anker für dasselbe Dokument setzen

  1. Der Anker oder die Textmarke sind der Ort, zu dem der Link führen soll. Das entsprechende HTML-Tag und Attribut sieht so aus:
    <h3><a id="ankername"></a>Anker setzen für selbiges Dokument</h3>
    

    Nachlese, Link und Anker.

  2. Bei der Verwendung des Ankerziels sollte die "id" ohne das #-Zeichen festgelegt werden, wie im folgenden Verlinkungsbeispiel:

    Springe zu Textmarke <a href="#ankername">Anker für dasselbe Dokument ↑</a>

Beispiel: Springe zu Textmarke Anker für dasselbe Dokument ↑

Anker für ein anderes Dokument setzen

Die Textmarke ist ähnlich wie "Anker für dasselbe Dokument". Du kannst sie in einem anderen Dokument verwenden, indem du die Textmarke und die Verlinkung entsprechend anpasst:

Springe zu Textmarke <a href="http://www.deinewebsite.de/#ankername2">Anker für ein anderes Dokument</a>

Beispiel: Klicke hier, um zur Textmarke Anker für ein anderes Dokument zu gelangen (dies öffnet sich in einem neuen Tab / Fenster).

Bemerkung und Beachtung!
Es kann vorkommen, dass aufgrund der Header-Leiste die Anker etwas höher platziert werden müssen. Um dieses Problem zu vermeiden, sieh dir bitte die nächste Überschrift an. Die Schwierigkeiten, die durch das Setzen des Ankerziels an einer anderen Stelle verursacht werden, wurden im Theme Twenty Fourteen behoben. Dennoch könnte die Lösung für dieses Problem in anderen Themes nützlich sein oder um den Anker etwas weiter unten zu platzieren.

Der Link zu einer anderen Seite und das Ankerziel konform, usw.

Siehe HTML Anker als Sprungmarke setzen den Punkt "position: fixed springt zu weit". Falls das deiner Website relevant ist, beginne damit, deine CSS-Klasse über das Dashboard, den Designbereich und den Customizer oder das Child-Theme zu definieren. Die Werte height: 80px und margin-top: -80px müssen individuell angepasst werden.

/* Ankerziel konform, class="position" */
.position::before {
 display: block;
 content: "";
 height: 80px;
 margin-top: -80px;
 visibility: hidden;
 }
  • display: block;: Legt das Pseudo-Element als Blockelement fest.
  • content: "";: Fügt dem Pseudo-Element leeren Inhalt hinzu.
  • height: 60px;: Definiert die Höhe des Pseudo-Elements als 60 Pixel.
  • margin-top: -60px;: Hebt das Pseudo-Element um -60 Pixel (nach oben) an, um den Abstand zum Ankerziel zu schaffen.
  • visibility: hidden;: Macht das Pseudo-Element unsichtbar.

Der Anker erhält dann im HTML einen Class-Selektor (class="position"), wie im folgenden Beispiel:

<h4><a id="ankername2" class="position"></a>Anker setzen für ein anderes Dokument:</h4>

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Anker zu einem Widget setzten
Im Quelltext der Website haben Widgets IDs. Zum Beispiel hier hat das Such-Widget die ID search-7. Daher lautet der Anker-Link #search-7.

<a href="#search-7">Anker-Link</a> <code>#search-7</code>

Anmerkung: Wenn du hier der Website im Lesemodus bist funktioniert das natürlich nicht, da ja hier keine Widgets sind, hierzu müsste in der Headerleiste der Swipe zum Normalmodus betätigt werden.

Bildillustration und Ankerziel in Überschrift
Bei Bildillustrationen und Ankerzielen in Überschriften ist darauf zu achten, dass zwischen der Überschrift und dem Bild ausreichend Abstand vorhanden ist. Dies ist wichtig, wenn eine Überschrift mit einem Anker nicht direkt unter einem Bild platziert wird.

Anker zu einem Rahmen setzen

Um einen Anker zu einem Text in einem Rahmen zu setzen, erfolgt dies nach den Formatierungen des Rahmens:

<p style="border: 1px solid #0e61b5; width; padding: 10px;"><a id="ankername" class="position"></a>Soll der Anker zu einem Text in einem Rahmen führen, folgt dieser nach den Auszeichnungen für den Rahmen</span></p>

Anmerkung: Plug-in für Anker
Zuvor wurde das Plug-in "Scroll to Anchor" ausprobiert, jedoch nur mit teilweisem Erfolg.

Allgemeine Hinweise

Link und Anker
Ein Anker wird genauso wie ein Verweis mit dem "a-Element" erstellt. Der Unterschied besteht darin, dass anstelle des "href"-Attributs das universale "id"-Attribut verwendet wird. Ein vollständiger Anker sieht also so aus: <a id="ankername">...</a>.

Um innerhalb eines HTML-Dokuments auf einen Anker zu verweisen, der sich im selben Dokument befindet, verwende die folgende Vorlage: <a href="#ankername">...</a>. Diese Methode funktioniert auch, um auf Ankerziele in anderen HTML-Webseiten zuzugreifen.

Hier sind einige Beispiele:
Verweis auf einen Anker in einer anderen Seite: <a href="andere-seite.html#ankername">...</a>
Verweis auf einen Anker in einer Webseite mit vollständiger URL: <a href="http://example.org/verzeichnis/seite.html#ankername">...</a>
a-Elemente können sowohl Verweise als auch Anker für Verweise sein, wenn sowohl ein href– als auch ein "id-Attribut" vorhanden sind, wie im letzten a-Element im obigen Beispiel. Die Vergabe des Ankernamens im id-Attribut erfolgt nach eigenen Vorgaben, jedoch sollten keine Leerzeichen verwendet werden. Es ist ratsam, kurze, prägnante und lesbare Namen zu wählen, die sich auf lateinische Buchstaben, arabische Ziffern sowie den Unterstrich (_) beschränken. Der Name sollte mit einem Buchstaben beginnen. Dies ermöglicht eine kompatible Verwendung der "ID-Namen" in JavaScript und CSS. Groß- und Kleinschreibung sind bei der Verlinkung zu unterscheiden. Zum Beispiel wird "#Ankername" nicht gefunden, wenn auf "#ankername" verlinkt wird. – Stefan Münz

Groß- und Kleinschreibung bei Webadressen
Internet- und E-Mail-Adressen machen in der Regel keine Unterscheidung zwischen Groß- und Kleinschreibung. Es gibt jedoch eine Ausnahme: Wenn eine Adresse beispielsweise "www.internetadresse.de/Unterverzeichnis/Datei.html" lautet, sollte alles nach dem "/" (Schlüsselzeichen) genau in dieser Schreibweise verwendet werden. Warum? Das "Unterverzeichnis" ist ein Verzeichnis, und "Datei.html" ist eine Datei auf dem Webserver, ähnlich wie auf einer PC-Festplatte. Es ist wichtig zu beachten, dass Webserver fast ausschließlich auf Unix-Systemen laufen, die im Gegensatz zu Windows die Groß- und Kleinschreibung beachten ("case sensitive"). Daher ist die Schreibweise hier – und nur hier! – von Bedeutung. – Webworker GmbH


Aktualisiert im Jahr 2023-Oktober