Wie ich schon in meinem letzten Post geschrieben habe, wollte ich noch schreiben, wie man jQuery einbindet und benutzt.

Ab der Version 2.2 von WordPress ist das jQuery Framework dabei. Ihr müsst nur, wenn Ihr das Framework auch auf eurer Website haben wollt, müsst Ihr es in Euer Template einbinden.

<?php wp_enqueue_script(‚jquery‘);?>

Das kommt in den Header von Eurem Template. Wenn Ihr zum Beispiel eine Div Box aufmachen wollt, bzw. schließen wollt, müsst Ihr folgenden Code einfügen:

<script type=“text/javascript“>
<!–
$(document).ready(function() {
$(‚#show‘).click(function(){
$(‚div#archiv‘).slideToggle(„slow“);
});
});
–>
</script>

Diese Funktion $(‚#show‘).click() gibt an, das per klickt auf das Element was passieren soll, nämlich das hier: function(){
$(‚div#archiv‘).slideToggle(„slow“); }. Diese Funktion besagt, dass das Div Archiv langsam aufgehen soll, bzw. das es bei einem klickt, wenns offen ist, wieder zu gehen soll. Deswegen slideToggle. Es gibt auch noch andere Funktionen, die Ihr hier findet. Ihr könnt als Parameter in der Funktion slideToggle folgende Sachen einstellen:

• speed (String|Number): (optional) A string representing one of the three predefined speeds („slow“, „normal“, or „fast“) or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Quelle

Mein Div sieht so aus:

<li><h2 id=“show“>Archives + </h2>
<div id=“archiv“ style=“display:none“>
<ul>
<?php wp_get_archives(‚type=monthly‘); ?>
</ul>

Über den klick auf Archives + wird die jQuery Funktion aufgerufen und „slidet“ mein Archiv runter. Dabei ist es wichtig, das Ihr das div immer mit style=“display:none“ unsichtbar macht, weil man es sonst ja sieht.

Mit jQuery lassen sich viele Dinge machen. Einige Tutorials findet Ihr auf der Seite von jQuery. Massig Plugins gibt es hier.