jquery collapsor Wordpress Tutorial
Das jquery eine großartige Javascript Bibliothek, das dürfte nichts neues für die meisten sein. Auch für die Nutzung von Wordpress als CMS (wie z.B. hier auf get-a-gadget.de geschehen) gibt es sehr feine Sachen.
Ich verwende z.B. die superfish (suckerfish Version auf Basis von jquery) zusammen mit den Wordpress Funktionen wp_list_pages() und wp_list_categories(). Für die dropdown Menus verwendet- auf webdemar gibt es ein gutes Tutorial zur Einbindung von superfish in wordpress . Die Lösung gefällt mir vieeeeel besser als z.B. die fertinge Suckerfish plugins – wer ein wenig fit in PHP, CSS und JS ist, der sollte lieber selber etwas am template schrauben
Für das IT Glossar von peoplepark hab ich auf collapsor in Verbindung mit wp_list_categories zurückgegriffen (so ähnlich auch hier auf get-a-gadget auf den Verzeichnisseiten im Einsatz), tolles Plugin keine Frage aber ehrlich gesagt halte ich die Dokumentation – vorsichtig formuliert – für noch optimierbar.
Daher hier ein How-To für die Konfiguration von collapsor in Verbindung mit Wordpress.
Die grundsätzlichen Schritte die nötig sind:
1. Einbindung jquery Bibliothek ins Template
2. Einbindung Collapsor ins Template
3. Generieren der UL-LI Liste für den Menu Inhalt.
4. Aufruf collapsor Funktion
Einbinden jquery in das Wordpress Template
Eine recht einfache Übung – aktuelle jquery Version herunterladen und auf dem Server ablegen (ich nutze meist einen Unterordner des Themes, damit die Datei auch bei einer neuen Installation dabei ist => die kann man dann per Wordpress Funktion bloginfo(”) ansprechen und euren Pfad ergänzen
Das sieht dann bei der get-a-gadget.de so aus in der header.php des Themes
< XXX script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/superfish/js/jquery-1.2.6.min.js”></script XXX>
(ich verwende parallel auch superfish für das dropdown, die jquery liegt daher aus “historischen Gründen” im superfish Ordner)
<XXXscript type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/collapsor/jquery.collapsor.js”XXX></script>
(collapsor hat seinen eigenen Ordner)
Erstellen eines Menüs von Seiten oder Posts
Auch nicht schwierig wenn man ein wenig geübt ist in Sachen Wordpress: eine List von Seiten oder Pages erhalten wir mit den Fuktionen wp_list_pages() oder wp_list_categories(). Über die Parameter “exclude”, “include”, “childof”, “depth” kann man aussteuern, welche Seiten den gezeigt werden sollen und der Paramter “title_li=” sichert, dass wir keine Überschrift für unsere Liste bekommen.
In meiner Sidebar ergibt sich folgendes Bild, da ich keine Liste an Pages oder Categories nutze für das seitliche Menü sondern eine Liste von vier fest definierten Kategorien mit den zugehöringen Posts darunter.
<li><a rel=”nofollow”>Entertainment Gadgets</a>
<ul>
<?php $catposts = get_posts(‘category=3&offset=0&numberposts=-1′);
foreach($catposts as $post) :
setup_postdata($post);?>
<li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
Was machen wir hier genau?
1. wir starten einen wordpress Loop mit get_posts()
2. dieser Loop wird eingeschränkt auf die Kategorie 3 (das ist die Kategorie in der ich alle Posts zum Thema Entertainment Gadgets einordne)
3. der Loop hat keinen offset, d.h. er startet mit dem ersten Post und “numberpost=-1″ führt dazu, dass alle Posts aus dieser Kategorie aufgelistet werden
4. das Ergebnis dieser Abfrage durchlaufen wir iterativ mit foreach
5. bei dieser Art der Abfrage kriegen wir nicht alle Infos zum post zurück, wir wollen aber gleich the_excerpt() und the_permalink() nutzen, damit das funktioniert erstellen wir die “postdata” mit setup_postdata($post)
6. wir machen die HTML Ausgabe fertig mit LI Elementen, welche den Post Titel als Link beinhalten
7. das ganze umschließen wir noch mit den <ul>-Tags
So, damit haben wir also eine unordered List mit vier Kategorien (Shopping, Info, Entertainment, Games) als List Items.
Innerhalb der List Items verschachtelt liegen weitere unordered lists vor, deren List Items bestehen aus Links auf die Blogbeiträge aus der jeweiligen Kategorie mit dem Post Titel als Ankertext.
Aufruf collapsor Funktion
Wenn wir jetzt unsere Seite im Browser aufrufen, dann passiert genau das, was so oft passiert wenn man mit Javascript arbeitet: nichts! 
Was wir sehen, ist die von uns gerade erstellte verschachtelte Liste von Categorien und zugehörigen Posts allerdings in ganzer Länge, alle List Items sichtbar, keines klickbar und kollabieren ? Auch Fehlanzeige!
Ist ja auch klar, denn noch haben wir ja die collapsor Funktion noch garnicht aufgerufen und auch nicht definiert, welches HTML Element sich collapsor denn vornehmen soll.
Was macht collapsor eigentlich genau? Eine gute Frage an dieser Stelle!
Kurz gefasst macht collapsor folgendes: die Funktion durchsucht den Quelltext nach Vorkommen bestimmter , von uns definierter Elemente (tags, classes, ids).
Die Vorkommen dieser Elemente werden mit einem onclick event verbunden, welches wiederum die Kinder des von uns definierten Elements ein-/ausblendet und die Kinderelemente werden zunächst alle ausgeblendet.
In meinem Fall sieht das so aus im Header
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.coll’).collapsor({});
});
</script>
Und was passiert da jetzt? Alle Elemente der class “coll” (das sind bei mir Links innerhalb der vier Kategorien, also die erste <LI>-Ebene) werden mit der funktion verbunden und die Kinder (also die UL mit den Links zu den Blogeinträgen als List Items) werden ausgeblendet, beim Klick auf die vier Kategorien werden die Kinder dann ein- und ausgeblendet.
