In diesem Artikel veröffentliche ich ein Skript, das ich in den letzten Tage geschrieben habe. Es ist aus dem Grund entstanden, dass es mit bereits verfügbaren Plugins für WordPress, die aufklappbare Kategorien anbieten, Probleme gab. Es funktionierte einfach nicht richtig, also entschloss ich mich, selbst so etwas zu programmieren.

Das Skript benutzt JavaScript-Funktionen, um die bestehenden, in Sub-Gruppen verschachtelten WP-Kategorien dynamisch darzustellen. Zu Beginn wird nur die oberste Ebene dargestellt. Wenn jedoch ein Kategorie-Punkt noch Unter-Ebenen enthält, werden diese durch einen Klick auf die obere Ebene dargestellt. Klickt man nochmals, wird die Ebene wieder eingeklappt. Durch die Verwendung von JavaScript muss die Seite auch nicht bei jeder Anzeige-Änderung der Kategorien neu geladen werden. Das Ganze funktioniert über das sog. DOM.

Eingebunden wird es über die Theme-Dateien. Je nachdem, wo man die aufklappbaren Kategorien hinhaben möchte, muss man es dementsprechend einfügen. Das ist eine Arbeit, die wohl eher für fortgeschrittene-WordPress-Benutzer in Frage kommt. Hier nun der Code…

<?php

$jslist=wp_list_categories('orderby=name&use_desc_for_title=0&show_count=0&title_li=&echo=0');

$jslist = str_replace("n","",$jslist);

$jslist = str_replace("r","",$jslist);

$jslist = str_replace("'",""",$jslist);

?>

<ul id=“jslist“></ul>

<script type=“text/javascript“ src=“eigener-pfad/jslistcat.js“></script>

<script type=“text/javascript“>

var jslist='<?php echo($jslist);?>‘;

var virtul=document.createElement(„ul“);

virtul.innerHTML=jslist;

closeTree(virtul);

dget(„jslist“).innerHTML=virtul.innerHTML;

</script>

Hier wird zunächst per wp_list_categories-Befehl eine Liste mit den WordPress-Kategorien abgerufen. Diese wird nicht angezeigt, sondern in eine Variable verlagert, welche dann im JavaScript-Bereich an eine JavaScript-Variable übergeben wird. Die Funktionen zur Dynamisierung der Liste sind in der Datei jslistcat.js gespeichert. Diese wird per script-Tag eingebunden, wobei zu beachten ist, dass der korrekte Pfad gesetzt werden muss, sonst funktioniert das Ganze nicht. Hier der Inhalt der Datei:

function closeTree(x)   {

var c=countChildren(x);

var i=0;

for(i=0;i<c;i++)   {

if(hasChildren(x.childNodes[i]))   {

removeLink(x.childNodes[i]);

closeItem(x.childNodes[i]);

closeTree(x.childNodes[i]);   }   }   }

function dn(){}

function actionItem(x){   opencloseItem(x);   }

function opencloseItem(x)   {

var c=countChildren(x.parentNode);

var i=0;   for(i=0;i<c;i++)   {

if(x.parentNode.childNodes[i].nodeName.toLowerCase()==“ul“ && x.parentNode.childNodes[i].style.display!=“block“)   {   x.parentNode.childNodes[i].style.display=“block“;   }   else if(x.parentNode.childNodes[i].nodeName.toLowerCase()==“ul“ && x.parentNode.childNodes[i].style.display!=“none“)   {   x.parentNode.childNodes[i].style.display=“none“;   }      }   }

function removeLink(x)   {   if(x.nodeName.toLowerCase()==“a“ && UlInLevel(x)){

x.setAttribute(„href“,“javascript:dn()“);

x.setAttribute(„onclick“,“actionItem(this)“);      }   }

function UlInLevel(x)   {

var c=countChildren(x.parentNode);

var i=0;

var ulflag=false;

for(i=0;i<c;i++)   {

if(x.parentNode.childNodes[i].nodeName.toLowerCase()==“ul“)   {   ulflag=true;   }   }   return ulflag;   }

function dget(x)   {return document.getElementById(x);}

function closeItem(x)   {   if(x.nodeName.toLowerCase()==“ul“)   {     x.style.display=“none“;   }   }

function hasChildren(x)   {   if(x.childNodes.length>0){return true;}   return false;   }

function countChildren(x)   {return x.childNodes.length}

 

Wer sich mit JavaScript und DOM auskennt, kann dieses Skript wohl in ein paar Minuten nachvollziehen. Ich hoffe, dass es vielleicht jemand brauchen kann, der eine Aufklapp-Lösung für WordPress-Kategorien sucht.