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.

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 10 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

WordPress und JSIn 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:

22 Comments

  1. Grundsätzlich ein interessantes Thema, gut erklärt.

    Aber: prototype und scriptaculous sind wirklich "huge" und ich bedaure es, daß WP nun auf diese Monster setzt. Die bessere Wahle wäre jQuery/Interface gewesen, aber vielleicht kommt das später.

    Unabhängig davon, ist es aus Sicht einer klaren Trennung von Markup, Design und Behaviour nicht wirklich gut die Events im (X)HTML-Quelltext direkt anzusprechen. Auch hier verfolgt jQuery einen besseren Weg.

  2. @Enrique: danke, ist gefixt.

    @John: Denke auch, dass WP auf dauer mehrere mit einbinden wird, was ja eh jeder selber machen kann.
    Zu jQuery: gibt es einen Beitrag irgnedwo, der einen schnellen Einblick gibt, nur mal zum Einlesen? Vorallem der Integrationsweg interessiert mich.

  3. Danke für den Hinweis auf jquery, John. Ich wollte mir das auch bei Gelegenheit nochmal anschauen um mein Theme ggf. zu optimieren. Hast Du evtl. ein paar Links zu jquery-Tutorials oder anderen nützlichen Seiten?

  4. Auf jQuery.com sind einige Tutorials für die Grundlagen vorhanden: How jQuery works, Getting started with jQuery, jQuery for designers, Live examples of jQuery. Deutschsprachiges gibt es noch nicht so viel. Gerrit von praegnanz.de hatte im September 2006 einen Vortrag auf einem Webmontag gehalten, den gibts als Video hier.

    Und diesen Artikel hier finde ich für den Einstieg auch recht gut. Wenn man erst mal die ersten Tests hinter sich hat, ist es sehr einfach und macht regelrecht Spaß.

  5. Hi, ich poste hier, weil ich ein Problem mit scriptaculous im Zusammenhang mit
    widgets habe. Laut http://automattic.com/code/widgets/use/ gehört scriptaculous in wp-content/plugins/widgets/scriptaculous dann hätte man die ja doppelt. Mein Problem ist nun, das ich im Admincenter in der Seidbar kein drag and drop hinbekomme. (Z.B mit http://www.blog.mediaprojekte.de/wordpress-widgets-plugins).
    Habe alles versucht. Mein theme ist Widget fähig.
    Bitte um Hilfe.
    THX

    (Habe auch das versucht... http://forum.wordpress-deutschland.org/plugins-und-widgets/8304-sidebar-widget-wie-bringt-man-es-zum-laufen.html)

  6. Ich habe kaum Erfahrung mit Widgets, aber wenn du im Adminberiech kein Drag&Drop machen kannst, dann schau mal, was im Quellcode steht, also über den Browser den Quellcode holen und schauen, auf welche Adresse denn die JS-Files von Scriptaculous lauten und wenn ja, sind sie auch dort? Sind sie geladen? Mit dem Webdeveloper Toolbar im FF kanst du das einfach prüfen --> Information --> View JavaScript, was nicht da ist fehlt, bzw. gibt es die Adresse im Code, dann zeigt er, dass sie falsch ist.

  7. Ich bin über den Trackback auf meinem Blog zu diesem Artikel gekommen. (Etwas spät gesehen, aber immerhin 🙂 ) Prototype und script.aculo.us sind zwei mächtige Werkzeuge im Kampf für mehr Usability im Web.

    Vielen Dank für die Erwähnung. Hat mich sehr gefreut.
    davadda

Comments are closed.