Accordion-Effekt für Wordpress
Der Accordion-Effekt ist eine mit Javascript umgesetze Textanimation. Auch auf dieser Webseite verwenden wir den Effekt, und zwar bei unseren Referenzen. Unter den Jahreszahlen befinden sich weitere Inhalte, die beim Anklicken "ausgeklappt" werden. Unsere Seite wurde mit Drupal erstellt und der Effekt stammt aus dem Modul Views Accordion, das das Modul Views erweitert.
Einen ähnlichen Effekt suchte ich für eine Kundenwebseite, die mit Wordpress erstellt wurde. Meine Anforderung an das Accordion-Script: Wenn man die Seite mit dem Effekt aufruft, sollen alle Texte eingeklappt sein. Genau das ist aber der Knackpunkt an dem Ganzen. Auf wordpress.org hat man sehr schnell recht viele Accordion-Plugins gefunden, aber bei allen ist immer mindestens ein Bereich aufgeklappt. Da die fertigen Plugins nicht das können, was ich haben wollte, musste eine fest eingebundene Lösung her.
Auch hier kann man mithilfe von Google viele Lösungsansätze finden, aber erst nach einigen Anläufen bin ich auf einen gestoßen, der das tut was ich möchte und noch dazu sehr performant ist. Er basiert auf der jQuery-Bibliothek von Google.
Die Bibiliothek wird direkt vom Google-Server eingebunden, dazu wird im <head> (oder am Ende) der Seite folgendes notiert:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.4.2/jquery.min.js"></script>
Alternativ ist das Script natürlich auch downloadbar und kann lokal gespeichert und eingebunden werden.
Jetzt braucht man noch eine weitere Javascript-Datei, die man auf unserer Seite downloaden kann. Diese Datei entpacken und in den Theme-Ordner einfügen. Der Pfad lautet .../wp-content/themes/themename/js/javascript.js ("themename" durch den Namen des verwendeten Themes ersetzen). Dieses Script wird auch im Template im <head> oder am Ende eingebaut:
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?> /js/javascript.js"></script>
Damit sind die Vorarbeiten erledigt. Um jetzt Text im Accordion einzufügen, muss man beim Erstellen von Artikeln oder Seiten in die HTML-Ansicht. Hier fügt man folgendes Gerüst ein:
<div class="accordionButton"> <h3>Anklickbare Überschrift</h3></div> <div class="accordionContent">Aufklappbarer Inhalt</div>
Dieses Konstrukt kann man so oft wie nötig verwenden (andere Scripte verlangen oft eine Nummerierung oder sonstige eindeutige Zuweisung bei mehreren Accordions). Die Gestaltung erfolgt mithilfe von CSS.