medioman

Hartmut 11. Juni 2009 um 01:06 Uhr

Jetzt hat mich der liebe Sascha so dermaßen “motiviert”, dass ich es unbedingt loswerden muss, wie man denn hier im Kommentarfeld die lustigen Smileys ein‑ und ausklappen kann. Mittlerweile gibt es ja doch einige Blogs, die eine recht stattliche Anzahl von Smiley-Kollektionen anbieten.

Ich möchte das im Prinzip relativ simple Thema auch ein wenig einfacher erklären und nicht lange mit Code um mich werfen, andererseits soll diese kurze Erklärung ausreichend sein, alles, nicht nur Smileys ein‑ und ausblendbar zu machen.

Das ganze funktioniert über eine JavaScript-Bibliothek, die WordPress von Hause aus schon implementiert hat und die automatisch bereits geladen sein sollte. Wer das nicht weiß, sollte auf seiner Webseite mal mit dem Browser die rechte Maustaste drücken und sich den Quelltext anschauen. Dort sollte relativ weit oben eine Zeile stehen, die so aussieht:

<script type='text/javascript' src='http://www.deine-domain.de/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>

Wichtig ist, dass die jquery.js aus dem WordPress Ordner kommt, weil es eine für den Blog angepasste Version ist.

JQuery vereinfacht die Programmierung der sog. DOM-Bäume. Ich will darauf gar nicht eingehen und komme mal gleich zum Kommentarfeld und den Smileys. Die Smileys selbst werden durch das Plugin LMB^Box Smileys eingebunden. Der PHP-Befehl soll laut Anweisung an die Stelle, an der die Smileys erscheinen sollen mit dem Befehl

<?php if (function_exists('lmbbox_smileys_display')) { lmbbox_smileys_display(true); } ?>

erfolgen.

Um jetzt mittels JQuery einen klappbaren Bereich/Effekt einzurichten, bedarf es zweier Klassen oder IDs. Ich nutze lieber Klassen, weil ich diese ggf. noch an weiteren Stellen im Blog nutzen möchte. Für die Überschrift – also Smileys einklappen/ausklappen habe ich die Klasse smile_head und für den Bereich, um die Smileys, also die Box sozusagen, die dann ein‑ und ausklappt, habe ich die Klasse smile_body gewählt. Innerhalb dieser Klasse kommt dann der php-Befehl, um die Smileys darzustellen.

Das ganze sieht bei mir im Kommentarfeld so aus:

<!-- Smileys Anfang -->
<span class="smile_head"><b>Smilies anzeigen/verstecken</b></span>
<div class="smile_body">
<?php if (function_exists('lmbbox_smileys_display')) { lmbbox_smileys_display(true); } ?>
</div>
<!-- Smileys Ende –>

Natürlich lassen sich diese Klassen jetzt auch bequem per CSS anpassen, aber darauf gehe ich jetzt (noch) nicht ein, weil ich es hier auch nicht gemacht habe.

Jetzt bleibt eigentlich nur noch ein wenig JavaScript, um mittels JQuery die Smileys ein‑ und ausblenden zu lassen. Grundsätzlich sollen die lustigen Bildchen ja ausgeblendet sein, dafür müssen wir dem smile_body sagen, dass er zunächst einmal versteckt bleiben soll.

Eine Eigenart der WordPress jquery-Bibliothek ist, dass sich die von mir angesprochenen DOMs (das ist z.B. die Klasse smile_body) nicht mit einem $ ansprechen lassen sondern mit dem Befehl jquery.

Die Anweisung lautet somit ausgeschrieben:

jQuery('.smile_body').hide();

Jetzt ist sozusagen der Inhalt “versteckt”. Wer seine Smileys immer angezeigt bekommen haben und sie erst beim Mausklick ausblenden will, der nimmt statt .hide einfach .show.

Der nächste Schritt ist die Anweisung, dass bei einem Klick auf Smileys anzeigen, das versteckte Element angezeigt und bei einem erneuten Klick wieder ausgeblendet wird. Dafür gibt es erstens den sogenannten Event-Handler der auf den Mausklick reagiert. Nur muss bei einem Klick auf smile_head das nachfolgende Element smile_body angesprochen werden. Der Mausklick muss sozusagen weitergegeben werden. Zweitens gibt es den Effekt, in diesem Falle benutze ich SlideToggle. Um das ganze abzukürzen, schicke ich mal den kompletten Code, der eingebunden werden muss hier hinein:

<script language="JavaScript">
<!--
jQuery(document).ready(function()
{
  //Alle Elemente mit der Klasse smile_body verstecken
  jQuery('.smile_body').hide();
  //element mit Klasse smile_body ein/ausblenden
  jQuery('.smile_head').click(function()
  {
    jQuery(this).next('.smile_body').slideToggle(600);
  });
});
//-->
</script>

Im Prinzip ist alles eine große Funktion von JQuery und die muss am Anfang initialisiert werden. Aber mehr möchte ich dazu gar nicht sagen. Denn das war es schon.

Wo der Code übrigens steht, ob im Header, in der functions.php, im Footer ist zunächst einmal grundsätzlich egal. Ich selbst habe momentan den Code in der comments.php, weil hier wird er ja auch benötigt.

Kleine Anpassungen habe ich übrigens noch in der style.css vorgenommen. Da ja kein Link hinter dem Text “Smileys einklappen/ausklappen steht, verändert sich der Mauszeiger wie bei einem gewöhnlichen Link nicht, daher habe ich ins CSS noch

.smile_head {
cursor: pointer;
}

eingefügt.

So, ich hoffe, ich konnte viele Unklarheiten schaffen. Ansonsten scheue Dich nicht, einfach nachzufragen oder Verbesserungsvorschläge zu machen.

Im Prinzip lassen sich auf diese Art und Weise alle möglichen Elemente, sogar die Seitenleiste, Header oder was auch immer ein‑ und ausblenden. Einfach mal probieren. Wenn man erst mal anfängt, macht es wirklich Spaß.

Zufallsauswahl ähnlicher Artikel

• Auf Kommentare antworten (13)
• Framebuster (10)
• Dynamisches Copyright im Footer (6)
• Brotkrümelnavigation im Blog (4)
• Blogroll und CSS3 (10)

Tags: JavaScript, Programmierung, Wordpress

• Projekte
Du kannst diesen Artikel auch als PDF-Version herunterladen.