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 finden es performant, wenn sie durch Ankerziele direkt zu einem bestimmten Abschnitt einer Seite springen können, anstatt scrollen zu müssen. Dies ist besonders relevant, wenn es um die Verlinkung zu einem anderen Dokument geht. Durch die Verwendung von Ankerzielen wird die Navigation für die Benutzer erleichtert.

Anker setzen

Fangen wir mal an:
Für hin und wieder eignet sich auch folgender Code:

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

Dargestellt:
Zum Seitenanfang ↑

Oder einfach durch Link einfügen, s. Titel "Zum Seitenanfang ↑" und mit Link verknüpfen = URL: #

Anmerkung: Das Einfügen eines Ankers mit Plug-in TinyMCE Advanced ist besonders einfach.

Für längere Seiten oder Blogs und alles in allem praktikabel ist zum Schwimmen nach oben ein Plug-in wie Float to Top Button.

Anker setzen für selbiges Dokument

  1. Der Anker oder die Textmarke ist die Location, welche der Hinweis (Link) hinführen soll. HTML-Tag und Attribut:
    <h3><a id="ankername"></a>Anker setzen für selbiges Dokument</h3>
    

    … das ist die Darstellung der Überschrift. S. Link und Anker.

    Merke: Das Ankerziel, die id ohne #-Zeichen setzen, als wie folgend die Verlinkung <a href="#ankername>" mit #-Zeichen.

  2. Die Verlinkung, also der Hinweis zur Textmarke (Anker):
    Springe zu Textmarke <a href="#ankername">Anker setzen für selbiges Dokument ↑</a>

    Das Beispiel: Springe zu Textmarke Anker setzen für selbiges Dokument ↑

Anker setzen für ein anderes Dokument

Die Textmarke ist wie "Anker setzen für selbiges Dokument". Und die Verlinkung zu anderem Dokument mit Textmarke.

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

Diesen bspw ergibt sich für den Link folgende Adresse: https://wegerl.at/zurueck-nach-oben-button/#ankername2.
Springe zur Textmarke → Anker setzen für ein anderes Dokument (zum Bspw öffnet das in neuem Tab / Fenster.)

Bemerkung und aufgepasst!

Ein" Ankerziel selbiger Seite ist im Vorhinein visuell konform.

  • Indessen, die Anker zu verlinkter Seite müssten von wegen Abdeckung durch die Header-Leiste etwas darüber gesetzt sein* . Umständlich daher siehe hier die nächst Überschrift
    * Bei Schriftvergrößerung würde das Ankerziel der verlinkten Seite etwas weiter unter dem Header dargestellt, indes bei Schriftverkleinerung das Ankerziel gleich bliebe.

Der Link zu anderer Seite und das Ankerziel

S. im Tiel HTML Anker als Sprungmarke setzen s. position:fixed springt zu weit.

Vorerst ist also über Dashboard / Design / Customizer oder so Childs Tehme der style.css die Class zu definieren.

/* Ankerziel konform, class="position" */
.position::before {
 display: block;
 content: "";
 height: 80px;
 margin-top: -80px;
 visibility: hidden;
 }

Danksagung dem Autor

Der Auszeichnungen height: 80px; margin-top: -80px; bedarf es des Attributwerts  der Pixel individuelle Anpassung.

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

Der Anker erhält dann im HTML einen Class-Selektor:
Ebd. des Beispiels class="position". Hiermit sieht das im Editor so aus:

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

Anker zu einem Widget, wie geht das?

Im Quelltext der Website sind die Widgets mit ID. Bspw ist das hier für das Search-Widget <aside id="search-7" class="widget widget_search">. Also der Anker-Link heißt da  #search-7.

Merkzettel

Bildillustration und Ankerziel in Überschrift

Ergibt sich das Ankerziel in einer Überschrift unter einem Bild, entsteht durch Class-Selektor gewisser Abstand der Überschrift zum Bild und hiermit ist bei der Illustration darauf zu achten, eine Überschrift mit Anker nicht nächst unter ein Bild zu setzen.

Anker zu einem Rahmen setzen

Anker zu einem Text in einem Rahmen führen, folgt dieser nach den Auszeichnungen für den Rahmen:

<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>
Plug-in für Anker

Vorhinein Plug-ins wie "Scroll to Anchor" probiert, mit nur teils Erfolg.


Allgem. Hinweise

Link und Anker
von Stefan Münz

Ein Anker wird genau wie ein Verweis mit "a-Element" erstellt. Der Unterschied besteht darin, dass kein Attribut "href" gesetzt wird, stattdessen das Universal-Attribut "id". Ein ganzer Anker sieht also so aus: <a id="ankername">…</a>

Um innerhalb einer Datei einen Verweis zu einem im selben HTML-Dokument vorhandenen Anker zu setzen, gilt folgende Vorlage:
<a href="#ankername">…</a>
Auch Anker innerhalb anderer HTML-Webseiten sind auf diese Weise adressierbar.

Beispiele:
<a href="andere-seite.html#ankername">…</a>
<a href="http://example.org/verzeichnis/seite.html#ankername">…</a>

"a-Elemente" sind zugleich Verweis als auch Anker für Verweise, wenn sowohl ein "href-" als auch ein "id-Attribut" vorhanden ist, so wie das letzte "a-Element" im obigen Beispiel. Den Ankernamen bei "id" wird frei vergeben, jedoch ohne Leerzeichen, möglichst kurze, prägnante und lesbare Namen. Beschränkung auf lateinische Buchstaben, arabische Ziffern sowie den Unterstrich (_). Das erste Zeichen des Namens sollte ein Buchstabe sein. Damit sind die "ID-Namen" auch gleich kompatibel für den Zugriff via JavaScript und CSS. Groß- und Kleinschreibung werden unterschieden: #Ankername wird nicht gefunden, wenn auf #ankername verlinkt ist.

Groß- und Kleinschreibung bei Webadressen –

Tipps rund um’s Internet Webworker GmbH

Internet- und eMailadressen kennen im Grunde keine Unterscheidung zwischen Groß- und Kleinschreibung. Ausnahme: Lautet eine Adresse bspw.. www.internetadresse.de/Unterverzeichnis/Datei.html, so ist alles nach dem "/" (Slash) in genau dieser Schreibweise einzusetzen. Weil: Das "Unterverzeichnis" ist ein Verzeichnis und die "Datei.html" eine Datei auf dem Webserver, wie man sie auch von der PC-Festplatte her kennt. Da aber Webserver beinahe ausschließlich auf Unix-Systemen laufen, die im Gegensatz zu Windows auch physikalisch auf Groß-/Kleinschreibung achten ("case sensitive"), ist die Schreibweise hier – und nur hier! – wichtig.


Aktualisiert im Jahr 2023-Juni