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