Ausklappbare Navigation der WordPress Kategorien

Im Rahmen der Optimierung meiner Kategorien habe ich mir eine ausklappbare Navigation der WordPress Kategorien in den oberen Bereich meines Blogs gebaut. Wie das im einzelnen geht, will ich Euch heute in einem kleinen Tutorial beschreiben, so dass die, die Lust haben, die ausklappbare Navigation der Kategorien in ihrem Blog nachzubauen, hier eine Anleitung finden. Um das Ganze, so wie es bei mir oberhalb des Artikels zu sehen ist, umzusetzen, braucht es ein kleines Plugin zur manuellen Sortierung der Kategorien, eine WordPress Funktion in der header.php des Themes sowie einiges an CSS, denn es soll ja auch schön aussehen und vor allem ausklappbar sein.

Plugin My Category Order
Für die ausklappbare Navigation der WordPress Kategorien ist es bei mir notwendig, dass ich die Kategorien manuell sortieren kann. Ich sortiere ich die Kategorien mit Unterkategorien so, dass sie in der zweiten Zeile der Navigation erscheinen. Wären sie in der ersten Zeile würden die ausgeklappten Unterkategorien die Kategorien der zweiten Zeile überdecken und das gefällt mir nicht. Weiter habe ich die Kategorien auch so sortiert, dass die mit Unterkategorien zu Anfang der zweiten Zeile kommen.

Um die Kategorien manuell zu sortieren, nutze ich das Plugin My Category Order. Einfach, fein und klein, erfüllt es genau diesen Wunsch. Wer seine Kategorien für die ausklappbare Navigation nicht manuell sortieren möchte, braucht dieses Plugin natürlich nicht.

WordPress Kategorien in der header.php
In der header.php meines Themes rufe ich die WordPress Funktion zur Auflistung der Kategorien wie folgt auf:

<?php if ( !is_tag() && !is_category() ) { ?>
 <div id="katnav">
  <ul>
   <li><em><strong>Kategorien:</strong></em></li>
   <?php wp_list_categories('orderby=order&use_desc_for_title=0&show_count=1&title_li='); ?>
  </ul>
 </div>
<?php } ?>

Dabei sorgen die erste und letzte Zeile dafür, dass diese Kategorien Navigation nicht im Tag-Archiv und auch nicht im Kategorie-Archiv angezeigt werden. Im Tag-Archiv zeige ich grundsätzlich keine Kategorien an und im Kategorie-Archiv habe ich eine andere Anzeigeform verbaut. Wer die ausklappbare Navigation der Kategorien überall in seinem WordPress Blog anzeigen will, der lässt die erste und die letzte Zeile des obigen Codes einfach weg.

Die ausklappbare Navigation der Kategorien bekommt die eigene CSS ID katnav, damit sie via CSS auch schön formatiert werden kann. Weiter setze ich als extrigen Menüpunkt das Wort “Kategorien:” vor die Auflistung der Kategorien. Für die gewünschten Parameter der WordPress Funktion wp_list_categories verweise ich an dieser Stelle auf den WordPress Codex.

Nur eines ist noch wichtig, wer das Plugin My Category Order nicht nutzt, der kann bei den Paramtern orderby=order nicht nutzen, denn dieser bezieht sich auf das Plugin! Die entsprechenden WordPress relevanten Sortiermöglichkeiten findet Ihr im oben verlinkten WordPress Codex.

CSS für die ausklappbare Kategorien Navigation
Der CSS Teil der ausklappbaren Navigation ist wohl der schwierigste Teil des Ganzen. Ihr könnt hier nicht einfach nur meinen Code kopieren, sondern müsst diesen entsprechend Euren Wünschen und Bedürfnissen anpassen! Hier mein Code aus der style.css meines Themes, den ich nachfolgend noch detailliert erläutere:

#katnav { width:980px; margin:0 auto; font-size:11px; background:#811517; color:#EDE9E9; overflow:hidden; height:46px; }
#katnav a, #katnav a:visited { color:#EDE9E9; }
#katnav a:hover { color:#FFFFFD; }
#katnav ul { margin:0; }
#katnav li { float:left; width:auto; list-style:none; margin:0; padding:5px 12px 5px 12px; }
#katnav li li { clear:both; }
#katnav li ul { position:absolute; left:-9999px; top:-9999px; display:inline; width:0; height:0; background-color:transparent; }
#katnav li:hover ul { left:auto; top:auto; display:block; width:270px; height:auto; background:#8C2224; color:#EDE9E9; padding-bottom:5px;  }
#katnav li:hover ul li { border-bottom:1px solid #811517; width:246px; }

Erklärungen dazu:

• In #katnav wird der Bereich der Navigation definiert.
• #katnav a… definieren die Farbe der Links (die Kategorien werden ja als Links dargestellt)
• #katnav ul setzt sämtliche Ränder auf 0
• #katnav li regelt die Darstellung der Kategorien nebeneinander, schaltet die Listenzeichen aus und definiert den Innenabstand (padding), wobei die Zahlen sich auf die Reihenfolge oben rechts unten links beziehen.
• #katnav li li hebt den float in den Unterkategorien auf
• #katnav ul li macht die Unterkategorien erst mal unsichtbar
• #katnav li:hover ul macht die Unterkategorien via Mouseover wieder sichtbar. Breite, Farben und Padding sind individuell einzustellen.
• #katnav li:hover ul li setzt eine Linie unterhalb der Unterkategorien. Breite ist wieder anzupassen und wer die Linie nicht mag, kann auf diese Zeile auch komplett verzichten.

Das war es an Coding für die ausklappbare Navigation, ab jetzt sollten die WordPress Kategorien ähnlich wie bei mir angezeigt werden. Ich hoffe dieses Tutorial ist verständlich und Ihr könnt damit die ausklappbare Navigation der Kategorien in Eurem WordPress Blog Euren Bedürfnissen und Wünschen entsprechend nachbauen.

Dominik hat sich in den letzten Tagen als “Versuchskaninchen” zur Verfügung gestellt und die ausklappbare Navigation der WordPress Kategorien anhand dieses Tutorials in seinem Blog nachgebaut (das Plugin Share a Draft machte es möglich). Meine Befürchtung, dass der Knackpunkt am CSS liegt, auf dem die ausklappbare Navigation hauptsächlich basiert, hat sich leider bei diesem Versuch bestätigt. Es kann keine Standardlösung geben, die überall funktioniert, da CSS meist auch abhängig davon ist, wie es sich in die restliche Programmierung des Themes einfügt. So hatte Dominik z.B. das Problem, dass die ausgeklappten Kategorien vom unteren Bereich seines Blogs überschrieben (also nicht ganz angezeigt) wurden, da hier mit CSS positions und CSS z-index gearbeitet wird. So musste er bei der ausklappbaren Navigation im #katnav li:hover ul ebenfalls mit position:absolute und einem entsprechenden z-index arbeiten. Wer also beim Einbau der ausklappbaren Navigation seiner WordPress Kategorien auf Anzeigeprobleme stößt, wird in der style.css die Ursachen finden und muss für seinen Blog die individuell passende Lösung finden.