script.aculo.us Effekte in WordPress Themes integrieren

In einem kleinen Tutorial soll es diesmal darum gehen, wie man die Effekte von script.aculo.us in ein WordPress-Theme einbindet. Eine ganze Reihe schöner Effekte kann man sich auf der Demo-Site der Library ansehen. Man sollte allerdings erwähnen, dass script.aculo.us nicht unbedingt die schlankeste der JS-Bibliotheken ist, aber ich habe mich dafür entschieden, da ich schon seit einiger Zeit damit arbeite und somit die Doku kenne, leichter zurecht komme und weil sie bei WordPress seit V2.1 zum Standard gehört.

Ich hoffe, dass damit einige Anfragen, die ich bezüglich dieses Themas bekommen habe, beantwortet sind.

Die populäre AJAX-Library ist schon recht lange auf dem Markt und seit der WordPress Version 2.1 ist sie standardmäßig mit eingebunden. Ab dieser neuen Version ist sie im Ordner wp-includes/js/ zu finden. Wer nun mit seinem Blog den Sprung auf die neue Version nicht durchgeführt hat, der sollte die nötigen Dateien unter diesem Pfad ablegen, so liegen in Zukunft bei einem Update keine doppelten Dateien auf dem Webspace.

Für unser kleines Tutorial, in dem ich nur auf den Scroll-Effekt und den Slide-Effekt (auch Akkordeon-Effekt) eingehe, benötigen wir die prototype.js und scriptaculous/effects.js. Den Download gibt es unter folgenden Adressen: script.aculo.us und Prototype, oder die aktuelle WordPress-Version downloaden und die beiden Dateien aus dem js-Verzeichnis holen.

Im WordPress-Verzeichnis sieht es nun so aus:

— wp-admin/
— wp-content/
— wp-includes/
|—- js/
|—— prototype.js
— wp-includes/
|—- js/
|—— scriptaculous/
|——– effects.js
— …

Das ganze Tutorial lasse ich unter XAMPP laufen, also lokal – damit kann man einfach besser experimentieren, ohne das der Leser des Weblogs etwas bemerkt. Wie man WordPress lokal auf XAMPP laufen läßt, erklärt Olaf im deutschen WordPress-weblog ausgezeichnet.

Einbinden der JS-Files

Als erstes müssen die beiden Dateien eingebunden werden, denn sonst können wir nicht auf die Funktionen der Library zugreifen.
Dazu bearbeiten wir die Daten im Header. In den meisten Themes gibt es eine eigene Datei dafür – header.php. Wo diese fehlen sollte, werden die Daten sicherlich mit in der index.php stehen.
Im Header, Abschnitt head, hinterlassen wir nun folgende Zeilen.

<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/scriptaculous.js" type="text/javascript"><!--mce:1--></script>

Dazu folgender Hinweis – man kann bei scriptaculous alle Bibliotheken laden, wie im obigen Code, oder man lädt auch nur einzelne, die man benötigt. So wird die Größe der zu ladenden Daten doch erheblich reduziert. Kann man sich übrigens sehr schön mit Firebug im Firefox ansehen.
Da wir für das Tutorial nur die Bibliothek der Effekte benötigen, ändern wir den Link ab – ?load=effects.

>script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript">>!--mce:2-->>/script>

Bei Verwendung mehrerer Scripte, kann man diese auch bündeln, einfach mit Komma.

<script src="&lt;?php bloginfo('url'); ?&gt;/wp-includes/js/scriptaculous/scriptaculous.js?load=effects,slider" type="text/javascript"></script>

Derzeit stehen folgende Möglichkeiten bereit:

• builder
• effects
• dragdrop
• controls
• slider

Nun haben wir zwar das Weblog mit den Librarys ausgestattet, nun wollen wir sie aber auch nutzen. Deshalb binden wir nun am Beispiel der Kommentare das Öffnen und Schließen des Kommentar-Abschnittes ein. Die Einbindung kann man natürlich auch an jedem anderen Bereich vornehmen. Wissen muss man, dass man folgende Tags mit der Library ansprechen kann – es muss also keine div-Wahn entstehen.

Mögliche xHTML-Elemente:

• address
• blockquote
• body
• dd
• div
• dl
• dt
• fieldset
• form
• frame
• frameset
• h1, h2, h3, h4, h5, h6
• iframe
• noframes
• object
• p
• ol, ul, li
• applet
• center
• dir
• hr
• menu
• pre

Button/ Link zum Öffnen/ Schließen hinzufügen

Dazu bearbeiten wir die comments.php und erweitern den Bereich der Ausgabe, wenn es Kommentare gibt, dann ist der Link da. Sucht dazu die Abfrage

<?php if ($comments) : ?>

In den meisten Templates steht danach die Ausgabe, um wieviel Kommentare es sich handelt. davor setzen wir nun einen Link, der das ID der Kommentarliste anspricht.

<a href="#" onclick="Effect.toggle('commentlist', 'slide', {duration:0.5}); return false;">Hier Klicken</a>

In meinem Beispiel sieht es nun folgendermaßen aus:

. . .
<?php if ($comments) : ?>
	<a href="#" onclick="Effect.toggle('commentlist', 'slide', {duration:0.5}); return false;">Hier Klicken</a>
	<h3 id="comments"><?php comments_number('Keine Reaktion', 'Eine Reaktion', '% Reaktionen' );?> zu “<?php the_title(); ?>”</h3>

	<ol class="commentlist" id="commentlist">

	<?php foreach ($comments as $comment) : ?>

		<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
. . .

Wir wollen die Liste ol Öffnen und Schließen lassen, somit müssen wir ID commentlist ansprechen.

Erläuterungen zum Code

Nun nochmal ein wenig Erläuterung zum Link, der uns das Öffnen/ Schließen erlaubt. Der Link funktioniert nur unter aktivem JavaScript, klar, denn es handelt sich um eine JS-Library. Deshalb immer überlegen, wie binde ich es ein, so dass auch User ohne JS die Inhalte lesen können. Im bisherigen Beispiel ist das kein Problem, da die Inhalte ersteinmal da sind und nur geschlossen werden, wenn der user den Link benützt.
Wichtig ist onclick, denn diese Anweisung sagt uns, auf wleche ID, welcher Effekt, welche Optionen angesprochen werden sollen. Im Beispiel-Link sprechen wir Effekt.toggle an, ID commentlist, Effekt slide mit Option duration und einem Zeitwert 0,5.
Als Effekte für toggle kann genauso blind oder appear verwendet werden, aber dazu mehr in der Dokumentation von scriptaculous zu effekt.toggle.
Der Code kann auf jeden beliebigen Effekt angewandt werden, dies war nur ein Beispiel, ebenso können mehrere Effekte miteinander kombiniert werden. Das Kombinieren wollen wir nun am Beispiel scrollto durchführen.

Kombination ScrollTo und SlideDown

Um diese Möglichkeit zu demonstrieren, werden wir die single.php bearbeiten. Im obersten Bereich eines Beitrags hinterlegen wir einen Link, der uns zu den Kommentaren bringt und dabei die Kommentare öffnet. Das Öffnen eines Bereiches macht man unter anderem mit SlideDown, mit toggle werden, ja nach Zustand geöffnet und geschlossen – in diesem Fall also unbrauchbar.

Ich hinterlege nun einen zusätzlichen Link unterhalb der Überschrift h3.

<a href="#commentlist" onclick="new Effect.ScrollTo('commentlist', {offset: -14}); Effect.SlideDown('commentlist', {duration:0.5}); return false;" >Zu den Kommentaren</a>

Damit entsteht ein Link „Zu den Kommentaren“, der bei Klick die beiden Effekte scrollTo und slideDown ausführt. Für Attribut href vergebe ich in diesem Fall auch nochmal die ID, damit bei deaktiviertem JavaScript trotzdem der Sprung zu den Kommentaren stattfindet.

Der zweite Effekt ist dabei nicht besonders sinnvoll, da die Liste der Kommentare in der Regel bereits offen sein sollte, es sei denn, ein Leser hat zuvor den anderen Link aus Beispiel 1 benutzt. Man kann allerdings auch direkt beim Laden des Beitrags, der Seite, mit Hilfe von onload eine Funktion aufrufen und den Bereich sofort schließen. Außerdem kann der Bereich mit Hilfe von CSS geschlossen gehalten werden. Beide Beispiele im folgenden.

Bereiche unsichtbar machen, per CSS und JS

Als erstes die einfachere Variante, per CSS. Mit Hilfe von display blenden wir den Bereich ol aus.
Dazu wieder die comments.php bearbeiten und die Zeile mit ol suchen. Diese um folgende Anweisung erweitern.

style="display: none;"

Damit sieht der Code aus dem ersten Beispiel folgendermaßen aus.

. . .
<?php if ($comments) : ?>
	<a href="#" onclick="Effect.toggle('commentlist', 'slide', {duration:0.5}); return false;">Hier Klicken</a>
	<h3 id="comments"><?php comments_number('Keine Reaktion', 'Eine Reaktion', '% Reaktionen' );?> zu “<?php the_title(); ?>”</h3>

	<ol class="commentlist" id="commentlist" style="display: none;">

	<?php foreach ($comments as $comment) : ?>

		<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
. . .

Diese Möglichkeit hat den Nachteil, dass bei deaktiviertem JavaScript die Kommentare nie zu lesen sind. Deshalb im Firefox das AddOn NoScript installieren und damit mal die Site besuchen.

Deshalb nun die Varinate per JS. Dazu erweitern wir die header.php um ein wenig JavaScript.

<script type="text/javascript">
<!--
function init_effect() {
	Effect.SlideUp('commentlist', {duration:1});
}
//-->
</script>

Der Effekt slideUp wird benutzt und schließt den Bereich mit ID commentlist.

Die entstanden Funktion müssen wir nun nur noch aufrufen, und zwar dann, wenn die Seite geladen wird. Also onload nutzen und die Funktion init_effect aufrufen, im body-Tag.

<body onload="init_effect();">

Wenn man nun die Seite neu lädt, dann wird visuell der Bereich ol mit ID commentlist geschlossen. Ein Klick auf den Link unter der Überschrift öffnet und diesen Bereich und scrollt direkt zum ersten Kommentar.

Nachteil: Wenn man mehrer Scripte mit onload starten will, so ist dies so nicht möglich, dann muss man eine andere Lösung nutzen. Dazu vielleicht in einem weiteren Artikel mehr, wenn gewünscht und Interesse besteht.

Fazit:

Nun einfach mal die Doku von scriptaculous nutzen und spielen. Es ist eine Vielzahl von Effekten möglich. Ob das Blog damit Web 2.0 ist, weiß ich nicht, aber es ist ein Mehrwert, den man nutzen kann und wenn man es geschickt einbaut, dann ist alles auch ohne aktives JavaScript nutzbar – und das sollte sein.
Ein Hinweis, will man einen weiteren Mehrwert an den User übergeben, so kann man in einem Cookie speichern, welche Bereiche der Leser geöffnet bzw. geschlossen haben will. Beim nächsten Besuch findet dann der Leser alles in seiner beliebten Form wieder. Dazu gibt es eine Script und Tutorial von Dominik Gesthuysen.

Weiterführende Links:

• Scriptaculous Tutorial Effekte