19. September 2017 - 19:07 Uhr
Start » Neues » WordPress – Anker im eigenen Beitrag verwenden

WordPress – Anker im eigenen Beitrag verwenden

Ihr habt einen langen Beitrag verfasst aber möchtet den Lesern aber die Option geben per Links schneller durch den Beitrag zu kommen bzw. zu gewünschten Passagen.Wordpress Anker 2 wuuza.de
Ein Inhaltsverzeichniss für den eigenen Beitrag/Seite mit Links zu Ankern /Sprungmarken.
In diesem Thema behandeln wir 2 Arten von Ankern /Sprungmarken,  den „Bezeichner“ innerhalb eines HTML-Tags und den HTML Verweis Tag.

Dazu nutzt ihr den TextModus beim erstellen von Beiträgen/Seiten in WordPress.

Natürlich gibt es auch unzählige Plugins für WordPress, aber manche Dinge kann man wirklich von Hand machen 🙂

 

ID Bezeichner Anker

Die erste und wesentlich schönere Variante ist die Möglichkeit über den ID Bezeichner.

Dazu nehmen wir einfach einen HTML Tag wie den für Überschriften z.B. <H3> und fügen dem Tag einfach noch eine ID hinzu, das sieht dann so aus <h3 id=“textanker_bezeichner1″></h3>.

Ihr könnt das Bezeichner Attribut ID“*“ für jeden anderen HTML Tag nutzen un nicht nur in <h3>, wichtig ist nur das ihr relativ „ungewöhnliche“ Namen benutzt damit ihr nicht Probleme mit Design-Code bekommt (CSS).

Überlegt euch wo ihr ihr den Anker/Sprungmarke haben wollt, fügt dem HTML-Tag eine ID hinzu und setzt in eurem Inhaltsverzeichnis am Anfang des Beitrages den Link zu der gewünschten Stelle.

Entweder über den Linkersteller im WordPress VisuellModus oder von Hand im TextModus.
Wichtig ist nur das ihr hier bei URL: #eureID eingebt, statt wie gewohnt einen ganzen Link.

Im Textmodus sieht der Link dann so aus:
< a href="#textanker_bezeichner1">Testanker Bezeichner 1< /a>

Link zum Testanker Bezeichner 1
Link zum Testanker Bezeichner 2
Link zum Testanker Bezeichner 3
Link zum Testanker Bezeichner 4

 

HTML-Tag Anker

Als zweites nehmen wir „normale“ Variante mit dem HTML Verweis Tag <a name=“*“>Testname_html</a> der von der abgewandelt Form von dem <a href=“*“> Tag für Links stammt.

Die Anker/Sprungmarken sitzen auf den Zeile weiter unten im Beitrag Testanker HTML 1-5 und damit wir dort auch hingelangen nutzen wir nun in der Zeile unten folgenden Code:

< a name="testanker">< /a>Testanker HTML 1
Den Link dazu seht ihr hier unter, damit euer Browser auch erkennt das es auf der selben Webseite liegt wird eine führende Raute vor dem Namen gesetzt und schon ahbt ihr euren ersten Verweis innerhalb der eigenen Seite.
< a href="#testanker">Testankter HTML 1< /a>

 

Link zum Testanker HTML 1
Link zum Testanker HTML 2
Link zum Testanker HTML 3
Link zum Testanker HTML 4

 

Somit könnt ihr auf gewünsche Passagen in euren Text zu verlinken wenn ihr eure Links an Freund schickt und sie schnell an eine gewünschte Stelle im Text gelotst werden sollen, man achte auf das #Beispiele am Ende des Links:
Beispiel: http://wuuza.de/windows-mehrere-programme-gleichzeitig-starten/#Beispiele
Als kleinen Tipp, viele Browser haben leider Probleme mit der korrekten Anzeige von Ankern weswegen ich meine Anker immer ein wenig höher setze als in der Überschrift wo es sein sollte, denn sonst wir die Überschrift nicht mehr mit angezeigt!

 

Testanker Bereich

Testanker Bezeichner 1

Testanker Bezeichner 2

Testanker Bezeichner 3

Testanker Bezeichner 4

´

Testanker HTML 1  Variante <a href“*“></a>

Testanker HTML 2 Variante <a href“*“></a>

Testanker HTML 3 Variante <a href“*“></a>

Testanker HTML 4 Variante <a href“*“></a>

 

Thx to Wendy for the <h* ID=“*“> idea 😉

Siehe auch

wuuza.d Dia de Los Muertos_1

Día de los Muertos – Der Tag der Toten

Día de los Muertos – Der Tag der Toten In wenigen Monaten neigt sich das ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.