PC zu Hause PC Hilfe und Support, Webseiten mit WordPress
Wie man in WordPress Sprungmarker und Textmarker verwendet

Wie man in WordPress Sprungmarken oder Textanker verwendet

| 2 Kommentare

Wie man in WordPress Sprungmarken oder Textanker verwendet, ist heute Teil aus der neuen Serie „WordPress Einsteiger Tutorials für angehende Blogger„. Ich werde im folgenden Beitrag erklären, wie man in WordPress Sprungmarken oder Textanker einrichten und verwenden kann.

Wie man in WordPress Sprungmarker und Textmarker verwendet

WordPress Sprungmarken und Textanker verwenden

Hintergrund meiner Anleitung: auch auf meiner Seite werden die Beiträge immer länger und damit teilweise unübersichtlicher. Auch wenn Anleitungen und Beiträge in einige Zwischen- und Unterüberschriften gegliedert sind und diese das Gerüst des Beitrags abbilden, sind teilweise doch nur einiege Auszüge aus dem Gesamtcontext interessant. Gerade in Artikeln mit Zusammenfassungen, Aufzählungen oder Vergleichen bietet sich diese Funktion hervorragend an.

Die Vorteile dieser Funktion liegen klar auf der Hand, bei langen Dokumenten kann so aus dem Inhaltsverzeichnis vom Beginn der Seite zur entsprechenden Position im Text, bzw. im Webbrowser gesprungen werden.

WordPress Sprungmarken und Textanker verwenden

Was sind Sprungmarken und was sind Textanker in der EDV?

Als Sprungmarke wird in einigen Bereichen der EDV der Bezugspunkt innerhalb eines Dokumentes oder Programmes bezeichnet. (Quelle: Wikipedia) Als typisches Beispiel ist die Verlinkung einer Zwischenüberschrift mit dem Inhaltsverzeichnis zu nennen. Genau diese Funktion möchten wir uns heute zunutze machen und für unseren Blogbeitrag erzeugen. Wenn man dem erzeugten Verweis aus dem Inhaltsverzeichnis folgt, springt der Webbrowser an den entsprechenden Ankerpunkt auf der Seite.

Wie man in WordPress Sprungmarken oder Textanker verwendet

Ich habe in meinem Beitrag „WordPress Einsteiger Tutorials für angehende Blogger“ genau diese Technik verwendet, um die geordnete Liste mit Sprungmarken zu versehen und an die entsprechende Position der Textanker mithilfe des so erstellten Links zu springen. Die Navigation in einem sehr langen Text, als auch die Möglichkeit schnell zu den gesuchten Informationen zu springen, macht diese Art Verlinkung sehr interessant und hilfreich.

Gehen wir an dieser Stelle darauf ein: Wie man in WordPress Sprungmarken oder Textanker verwendet. In dem folgenden Tutorial werde ich die Schritte und die Einrichtung vorstellen, erklären und beschreiben.

Texte und Artikel mit Inhaltsverzeichnis

Sprungmarken in Inhaltsverzeichnissen verwenden

Inhaltsverzeichnis mit Sprungmarke, als Link angezeigt

Die Vorbereitungen, bzw. die aktuelle Situation im Blogartikel ist eine Liste mit aktuell 16 Punkten und zwei Unterpunkten. Darunter befinden sich jeweils immer recht kurze Abschnitte mit etwa 100 Worten Inhalt.

Im Bild ist bereits die Überschrift „WordPress installieren“ mit einer Sprungmarke versehen und wird als Link dargestellt.

Den Inhalt der Textpassagen habe ich mit dem Lorem Ipsum Generator erstellt. Dieser bietet die Möglichkeit schnell ein Webprojekt, mit Inhalt zu füllen.

Ich nutze den so erzeugten Text für die Darstellung der gesamten Dokumentenstruktur. Aus dem generiertem Blind-, Füll-, Dummy-, oder auch Platzhaltertext, baue ich die ersten beiden Artikel und Textabschnitte, oder auch Passagen auf. An die entsprechenden Stellen im gesamten Dokument werden wir in diesem Tutorial mithilfe des Inhaltsverzeichnis und der noch zu erstellenden Sprungmarken und Textanker navigieren.

WordPress Sprungmarken und Textanker erstellen

Inhaltsverzeichnis und Artikel strukturieren

In Artikeln mit mehreren wichtigen Themen, bzw. einer Gliederung bietet sich die Verwendung von Sprungmarken und Textankern geradezu an.

Texteditor in WordPress

visueller Texteditor in WordPress

Ich verwende die Funktion im folgenden so, dass ich nach der Erstellung des gesamten Textes und der dazugehörigen Überschriften, bzw. Zwischenüberschriften ein Inhaltsverzeichnis in der visuellen Ansicht erstelle. Die Ansicht meines Textes ist im Bild dargestellt und zeigt die Struktur und Einteilung in zwei wichtige Bereiche, markiert mit zwei Überschriften. Die erste Überschrift „1. WordPress installieren“ und die die zweite Überschrift, im Bild noch als normaler Text ausgezeichnet: „2. das Backend von WordPress“

Wenn die gesamte Struktur des Textes vorab bekannt ist, könnte man auch zuerst das Inhaltsverzeichnis erstellen und dann den dazu passenden Text schreiben. Der Inhalt wird dann sofort durch die die entsprechenden Überschriften gegliedert und ein Nacharbeit, bei der man eventuell eine Sprungmarke vergessen könnte, wird minimiert.

Ich bin mir sicher, dass es für die Einrichtung von Sprungmarken und Textankern in WordPress auch nützliche Plugins gibt, aber die Verwendung ist relativ simpel, so dass man an dieser Stelle auf ein weiteres WordPress Plugin verzichten kann.

Für die Erstellung der Sprungmarken und Textanker in WordPress verwenden wir den normalen Texteditor, damit wir die benötigten HTML-Elemente in den soeben geschriebenen Text einfügen können. Am oberen rechten Rand des Arbeitsbereiches ist die Registerkarte „Text“ zu finden. Dort wechseln wir von der visuellen Ansicht in den normalen Texteditor.

HTML Elemente im Texteditor

Texteditor mit HTML Elementen

Die Unterschiede in der Darstellung sind gewaltig. Wichtig dabei ist, die Darstellung von bisher erzeugten HTML-Elementen, wie den Überschriften.

Im Beispiel links zu sehen ist, die Auszeichnung der Überschrift „WordPress Einsteiger Tutorials für angehende Blogger“ mit <h3> und die Zwischenüberschrift „- Inhaltsverzeichnis“ mit dem Element <h4>. In der dritten Zeile von oben sehen wir bereits einen sehr wichtigen Eintrag für die Verwendung von Sprungmarken.

Der Eintrag nennt sich: „1. WordPress installieren“. Insgesamt sieht der komplette Eintrag so aus: <a href=“WordPress installieren“>1. WordPress installieren</a> Dies erzeugt einen Link im Inhaltsverzeichnis. Das Ziel dieses Links, als den dazugehörigen Textanker werden wir gleich noch definieren.

Als Beispiel und zur Zusammenfassung dieses Arbeitsschritt eine kleine Zusammenfassung: Damit an jeder beliebigen Stelle dieser Link erzeugt werden kann, tragen wir vor diesen Text den folgenden HTML Code ein: <a href=“Name der Sprungmarke“>Text der verlinkt werden soll</a>.

Textanker erstellen und zur Navigation verwenden

setzen des Textanker im Artikel

Textanker setzen

Den Textanker erstellen und zur Navigation verwenden ist fast der letzte und abschließende Schritt des Tutorials. An der Position, in meinem Fall an der Stelle der Überschrift im gesamten Text, trage ich zu Beginn der Zeile <h3 id=“WordPress installieren“> und am Ende, den Abschluss der Überschrift mit </h3> ein.

Wichtig zu beachten ist, dass an der Stelle zu Beginn, der Wert „id“ dem Wert, also dem Name der Sprungmarke entspricht. Als Beispiel tragen wir an dieser Position folgenden HTML Code ein: <h3 id=“Name der Sprungmarke“>die Überschrift, oder Zwischenüberschrift</h3>.

Innerhalb des Dokumentes kann man jetzt diese Sprungmarken und Textanker für eine schnelle Navigation verwenden. Zusätzlich könnte man am Ende eines jeden Abschnitt einen Link zum Inhaltsverzeichnis setzen, damit ein Rücksprung gegeben ist.

Aussehen sollte dieser Rücksprung dann in etwa so:

<h3 id=“inhalt“>Inhaltsverzeichnis</h3>

Hier an dieser Stelle sind dann die Artikel und Informationen aus dem Beitrag. Abschnitte und Textpassagen, die zwischen dem Inhaltsverzeichnis und dem Link zurück stehen. Der Link zum Inhaltsverzeichnis wird definiert mit:

<a href=“#inhalt“>zum Inhaltsverzeichnis</a>

Offene Fragen und Probleme

Noch zu überprüfen wären die offenen Fragen und Probleme, wie:
– Wie kann ich WordPress Sprungmarken und Textanker in verschiedenen Blogartikeln und im Menü verwenden?
– Welche Plugins gibt es, die diese manuelle Arbeit eventuell erleichtern und etwas vereinfachen?
– Geht die Verwendung von Sprungmarken und Textankern in allen gängigen Browsern, oder gibt es Einschränkungen in der Funktionalität?

Ich freue mich auf einen Kommentar, wenn euch dieser Beitrag Beitrag gefallen hat,  oder wenn ihr Anregungen, Tipps oder Hinweise für mich habt. Gerne dürft ihr diesen Beitrag in den diversen social media Kanälen teilen und vorstellen.

2 Kommentare

  1. Hi

    ja ist alles richtig beschrieben und ich stimme dir zu, man sollte bei langen Texten wirklich dafür sorgen dass der Besucher genau das findet wonach er sucht. Allerdings frage ich mich dann auch ob das nicht die Verweildauer auf der Seite verkürzen würde?

    Da ich deinen Blog öfters lese würde ich dich bitten, eine Lightbox für Bilder zu installieren. Wenn ich nämlich auf ein Bild klicke gelange ich auf die Bilddatei-URL und muss dann ständig im Browser die Zurück-Taste betätigen. Damit verliere ich die Zeit, die ich durch die Textanker eingespart hatte. ;-D

    lg. Merida

    • Hallo Merida,

      ich glaube, dass der Einsatz von Sprungmarken nur einen geringen Einfluss auf die Verweildauer hat. Selbst wenn ich den Bereich im Artikel durch den Einsatz von Sprungmarken schneller finde, lasse ich meist die Seite im Hintergrund offen, da ich die Informationen an dieser Stelle gern zur Hand habe. Gerade im technischen Bereich ist zum Beispiel eine Source-Code oder eine detaillierte Beschreibung nicht auf den ersten Blick zu verinnerlichen.

      Ich habe auf Deine Anregung hin ein WordPress LightBox Plugin installiert. Ich habe in der letzten Zeit viel am WordPress Themes, PageSpeed und Optimierung gearbeitet, dabei sicherlich den Einsatz eines so nützlichen Tools übersehen.
      Also an dieser Stelle – vielen Dank für diesen Hinweis.

      viele Grüße
      Stefan

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


CommentLuv badge