[HTML für WordPress] 2. interne Verweise und Inhaltsverzeichnise

Diese Rubrik soll euch beim Gestalten eurer Blogartikel helfen. Sie verrät euch Geheimnisse, die hinter dem mystischen HTML-Editor stecken. Solltet ihr noch gar nichts von HTML gehört haben, bitte ich euch zuerst meinen HTML-Basics Artikel zu lesen.

Unbenannt.PNG


In diesem Beitrag möchte ich euch erklären was interne Verweise sind und wie man damit ein Inhaltsverzeichnis aufbauen kann. Ein Beispiel für ein sehr einfaches Inhaltsverzeichnis findet ihr z.B. auf meinem Beitrag über Marseille. Dort kann man leicht von ganz oben zu den unterschiedlichen Stadtteilen oder Sehenswürdigkeiten springen. Alternativ kann man einen Link auch so gestalten, dass man von einem Beitrag zu einer bestimmten Stelle auf einem anderen Beitrag gelangen. Klick hier, wenn du dir Bilder von Notre-Dame de la Garde anschauen willst.

Inhaltsverzeichnis.PNG

Wie man einen Link erstellt

Wie man einen Link zu seinen Beiträgen setzt, weiß wahrscheinlich jeder. Das geht recht einfach durch den Knopf „Link einfügen/ändern“. Link.PNG Danach kann man entweder einen Link auf den eigenen Blog auswählen oder die komplette URL (Internetadresse) rein schreiben.

Link-auswahl.PNGWordPress erzeugt im HTML-Editor dann automatisch das Tag, das nötig ist um auf eine Internetseite zu verlinken. Wenn man es im HTML-Editor anschaut, sieht es so aus:

a href=“https://itsablob.wordpress.com/2017/08/12/html-fuer-wordpress-0-basics/“>HTML-Basics Artikel </a

Dieser Beispiel-Link referenziert auf meinen Artikel „[HTML für WordPress] 0. Basics„, als Text werden aber die Worte „HTML-Basics Artikel“ angezeigt. Der Code besteht einfach aus einem Tag mit dem Namen a, welcher das Attribut href beinhaltet. <a ist der Tag, welches für Links verwendet wird. Das a steht für Anker. href beschreibt, wo der Link hinführen soll und heißt Hyper-Referenz. Man spricht vom Sprungziel.

Wie springt man auf derselben Seite hin und her

Wenn man über eine Referenz an eine Stelle auf der aktuellen Seite springen will, dann kann man das, indem man das Sprungziel etwas anders definiert. Man kann zum Beispiel nach ganz oben im Beitrag springen, indem man #top als URL angebe. Dazu muss man nicht mal in den HTML-Editor wechseln. Es funktioniert über den bekannten, oben erwähnten Button. Zu beachten ist dabei die Verwendung des Raute(#)-Zeichens. Das Stichwort top ist dabei eine Stelle, die den meisten Internetbrowsern, wie Firefox oder Chrome, bekannt ist. Wenn man aber an eine Stelle springen will, die man selbst festlegt, muss man das dem Browser im HTML-Code mitteilen. Das Stichwort dafür ist id. Wir können fast jedem Tag den Parameter id mitgeben. Bei einer Überschrift sieht es z.B. so aus

h3 id=“springe_hier“>Springe Hier her </h3

Springe Hier her

Mit der ID hat man eine Sprungmarke mit dem Namen „springe_hier“ erstellt. Dieses Sprungziel verwendet man nun einfach wieder mit dem Anker-Tag, im href Atribut. Man muss davor wieder die Raute # verwenden. Es ist auch möglich dafür den entsprechenden Button im WordPress-Editor verwenden. Das sieht so aus:

a href=“#springe_hier“> springe zur Überschrift </a

springe zur Überschrift

Wie man auf einer anderen Seite an eine spezielle Position springt

Man kann auch ganz einfach auf eine andere Seite zu einer beliebigen Position springen. Dazu muss man nur dort ein Sprungziel definieren. Auf meinem Artikel über Marseille habe ich z.B. das Ziel dame für Notre-Dame de la Garde definiert. Um direkt dort hin zu springen kombiniert man die URL dieser Seite mit der Raute und dame. Das gesamte Sprungziel ist also: https://itsablob.wordpress.com/2017/09/27/marseille-stadt-der-gegensaetze/#dame. Das kann man dann auch so über den Button „Link einfügen/ändern“ angeben.

a href=“https://itsablob.wordpress.com/2017/09/27/marseille-stadt-der-gegensaetze/#dame“>Notre-Dame de la Garde</a

Ein Inhaltsverzeichnis erstellen

Mein Inhaltsverzeichnis habe ich so erstellt, dass ich erst die Überschriften vor den jeweiligen Abschnitten erstellt habe. Dann bin ich zum HTML-Editor gewechselt. Dort habe ich in jeder Überschrift das Attribut id angelegt und somit Sprungziele erstellt. Zurück im WordPress-Editor habe ich ganz oben auf dem Beitrag die Überschriften untereinander geschrieben und dann für jede einen Link hinzugefügt und das Sprungziel mit der Raute angegeben. Konkret sieht das so aus:

 <ol> <li><a href=“#marseille“>Marseille der Gegensätze</a></li> <li><a href=“#port“>Der Vieux Port</a></li> <li><a href=“#panier“>Quartier du Panier</a></li> <li><a href=“#pharo“>Pharo</a></li> <li><a href=“#dame“>Notre-Dame de la Garde</a></li></ol>

MERKE:

Man benötigt eine Sprungmarke an der Stelle, an die man auf seiner WordPress-Seite springen möchte. Definiert wird diese, indem man im HTML-Editor einem Tag das Attribut id zuweist.  Danach muss man die Referenz erstellen, die den Nutzer zur Sprungmarke leiten soll. Dafür kann man den Button „Link einfügen/ändern“ verwenden. Dort gibt man # gefolgt von der zuvor erstellten id an.

Habt ihr nach Fragen oder Anregungen? Dann freue ich mich über Kommentare.

 

earlier: Ordnung durch Tabellen                                          next: coming soon…

Advertisements

6 Kommentare zu „[HTML für WordPress] 2. interne Verweise und Inhaltsverzeichnise

  1. Ich hab irgendwo anders im www eine Erklärung gefunden, der ich gefolgt bin und es hat auch funktioniert. Ich muss aber zugeben, dass ich mir wesentlich leichter getan hätte, wenn ich gleich auf Deine super verständliche Anleitung gestoßen wäre.
    LG Gabi

    Gefällt 1 Person

    1. Es freut mich, dass meine Erklärung auch für andere verständlich ist. 🙂 Ich finde es immer gar nicht so leicht diese Artikel so zu schreiben, dass sie möglichst jeder versteht. Danke für deinen lieben Kommentar.

      Gefällt 1 Person

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s