Inhaltsverzeichnis für WordPress Beitrag

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

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 :

<div id="rahmen_15047" class="hwb_box_gallery" style="background-color: white; width: 330px; height: 60px; border: medium solid #F30; border-color: black; border-radius: 5px; padding-top: 10px;">

   <span style="text-decoration: underline;"><strong>Inhaltsverzeichnis</strong></span>    <button id="butt_15047" class="inhButt">[Zeige]</button>

<div id="inhVerz">
<p style="line-height: 210%; margin-top: -20px;"><a style="padding-left: 20px;" href="#Einleitung">1. Einleitung</a>
<a style="padding-left: 20px;" href="#Stadtrundgang">2. Ein erster Stadtrundgang gleich nach der Ankunft</a>
<a style="padding-left: 20px;" href="#Hafenrundfahrt">3. Unterwegs in der Stadt und und eine Hafenrundfahrt</a>
<a style="padding-left: 20px;" href="#Bahnhof">4. Nächtlicher Fototrip in den Bahnhof</a>

</div>
</div>
<script>
document.getElementById("inhVerz").style.display="none";
document.getElementById("butt_15047").onclick = function(){
   var x = document.getElementById("inhVerz");
   var y = document.getElementById("rahmen_15047");
   var beschr1 = "[Zeige]";
   var beschr2 = "[Verberge]";
   var beschr  = document.getElementById("butt_15047").innerHTML;
   var breite  = document.getElementById("rahmen_15047").style.width;
   var hoehe  = document.getElementById("rahmen_15047").style.height;
var breit = "550px";
var schmal = "330px";
var hoch1 = "60px";
var hoch2 = "240px";
document.getElementById("butt_15047").innerHTML = (beschr == beschr2 )? beschr1 : beschr2;
document.getElementById("rahmen_15047").style.width = (breite == breit )? schmal : breit;
document.getElementById("rahmen_15047").style.height = (hoehe == hoch1 )? hoch2 : hoch1;
if(x.style.display === "none"){
    x.style.display = "block";}
else{
 x.style.display = "none";}
}
</script>

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  :

.inhButt{
background-color:transparent;border:0px;
outline-width: 0;color:black;}

.inhButt:hover{color:red;}

.hwb_box_gallery {
   box-shadow: 10px 10px 10px grey;
   background: transparent;width:100%;}

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    :   66 views.