Computer

Inhaltsverzeichnis für WordPress Beitrag

Mach Dir ein Inhaltsverzeichnis ohne zusätzliches Plugin

AUTOR : Helmut Wegmann            GESCHÄTZTE LESEZEIT : 3 Minuten, 42 Sekunden

   Immer schön auf den kleinen Elefanten hören !!

Ein Inhaltsverzeichnis zeigt dem Leser eines Blogs gleich zu Beginn was ihn in dem Beitrag erwartet. Bei kürzeren Artikeln, wie den meisten meiner Wanderungen, halte ich es nicht für erforderlich. Bei längeren Artikeln ist es ein MUSS. Über meine ersten, diesbezüglichen Versuche hatte ich im Rahmen von anderen WordPress Tip’s schon berichtet.

Auf dem Reise-Blog ErkundeDieWelt veranstaltet ‚Michael Mantke‘ jedes Jahr eine Blog-Parade. Dort gibt es ein tolles Verzeichnis aller ‚Mit-Blogger‘. Dort bekommt man einen schönen Überblick darüber was an Inhaltsverzeichnissen so alles verwendet wird. Nach dem Lesen der diversen Beiträge hieß es für mich nur : Da mußt Du noch mal ran !

  1. In die Titelzeile des Inhaltsverzeichnisses wurde ein Button mit dem Hinweistext : [Zeige] bzw. [Verberge] eingefügt.
  2. Das Inhaltsverzeichnisses wurde in der Breite variabel gestaltet.
  3. Der bisher verwendete Spoiler (aus dem Plugin : Shortcodes Ultimate) wurde durch JavaScript ersetzt. Jetzt ist es also komplett ‚plugin-frei‘.

So sieht mein Inhaltsverzeichnis mit 4 Beispielkapiteln nun aus :

 

1. Einleitung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

2. Ein erster Stadtrundgang gleich nach der Ankunft

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

3. Unterwegs in der Stadt und und eine Hafenrundfahrt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

4. Nächtlicher Fototrip in den Bahnhof

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


Der Code für das gezeigte Beispiel sieht wir folgt aus :

Der Code muss in den Text-Modus des WordPress Editors kopiert werden. Wenn ein Inhaltsverzeichnis in einen bereits existierenden Beitrag eingefügt werden soll, so würde ich dies zunächst an einer Kopie machen und erst wenn alles fertig formatiert ist in den Original-Beitrag rein kopieren.

Als erstes werden  im Inhaltsverzeichnis die Kapitelüberschriften angepasst. Darüber hinaus müssen bei den Kapitelüberschriften im Text natürlich noch die entsprechenden Sprungmarken (z.B. :<h2 id=“Stadtrundgang“>) gesetzt werden. Was die Formatierung anbelangt ist sehr viel inline erledigt. Es werden nur noch die folgenden CSS-Klassen in den Custom-CSS-Teil des Themes eingetragen  :

Das Ein- und Ausblenden wird über JavaScript umgesetzt. Die Rahmenbreite und die Höhe der Box müssen ebenfalls im Text-Teil des Editors angepasst werden (je nach Länge der Überschriften). Alles in allem ist da also noch einiges zu tun.

Fazit : Das Programmieren hat mir wieder mal Spass gemacht. Vielleicht ist es ja nicht nur für mich von Nutzen (was allerdings schon ein gewisses Grundverständnis von HTML und Javascript voraussetzt, ansonsten sollte man die Finger davon lassen). 

Dieser Beitrag hat bisher    :   18 views.

Schreibe einen Kommentar

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

Die EU-DSGVO schreibt den Hinweis vor, dass Name und Mailadresse in der Blogdatenbank gespeichert werden. Durch Absenden des Kommentares erklären Sie sich damit einverstanden.

%d Bloggern gefällt das: