Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

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>

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.

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

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Juli