Info echo

Ist der Classic-Editor schon zu kennen? –

“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced

“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

… die Welt gehört dem, der sie genießt.

“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

TinyMCE aktive Installationen: 2+ Millionen

“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Ansprechend! – so gehts hier zur Lancierung

“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

… und NEU! – Classic Widgets

“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Für Besucher von Website und dort in Verlinkung zu anderem Artikel ist ein Ankerziel sehr komfortabel. Sonst ist in Scrollarbeit erst mal zu finden. Somit sollte man sich befassen. Insbesondre ist das mit dem Ankerziel für ein anderes Dokument.

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 / Beitrag 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 mit Childs 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

<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>

Aktualisiert im Jahr 2021-Juli