Anleitung um den folgenden Accordion-Effekt in WordPress einzubauen:
- Simple Javascript Accordions von Dezinerfolio.com
Was ist ein Accordion-Effekt? Dadurch werden beim Anklicken der Überschrift „versteckte“ Bereiche sichtbar.
Das Script ist sehr schlank! Der Einbau ist recht unkompliziert.
Dieses Beispiel ist eine Minimal-Lösung (ähnlich wie in diesem Beitrag)
Download und Upload
Der Ordner enthält relativ viele Dateien. Die für den Accordion-Effekt wichtige Datei ist das Javascript
accordian.pack.js.Diese Datei in den Theme-Ordner einügen. Eventuell gibt es schon einen Bereich für Scripte.
Einbinden (Script aufrufen)
Zunächst im Header-Bereich das Script aufrufen:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/accordian.pack.js"></script>
Der Pfad variiert je nach Theme. Hier Ordner für Scripte namens js.
Nach dem Ende des Head-Bereiches </head> -Anfang Body-Bereich- folgendes eingeben:
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
Damit sind die Vorarbeiten bereits abgeschlossen.
Styling-Angaben (Minimal)
Diese Angaben -ür einen einfachen Klappeffekt- in die style.css-Datei einügen.
#basic-accordian{
z-index:2;
}
.accordion_headings{
background:transparent url(images/add.GIF) no-repeat right center;
border-bottom:1px dotted #ddd;
padding-right:10px;
cursor:pointer;
}
.accordion_headings:hover{
}
.accordion_child{
padding-top:5px;
}
.header_highlight{
}
Das Bild in .accordion_headings ist optional. Ich verwende hier ein kleines + Zeichen.
Beitrag schreiben
Folgendes Eingabeschema ist erforderlich damit der Effekt erscheint:
<div id="basic-accordian" >
<div id="test-header" class="accordion_headings"><h3>Text 1</h3></div>
<div id="test-content">
<div class="accordion_child">
TEXT 1…Der Mensch ist so gebaut,
</div></div>
<div id="test1-header" class="accordion_headings"><h2>Text 2</h2></div>
<div id="test1-content">
<div class="accordion_child">
TEXT 2…dass er mit’m Arsch
</div></div>
<div id="test2-header" class="accordion_headings"><h3>Text 3</h3></div>
<div id="test2-content">
<div class="accordion_child">
TEXT 3…nicht gegen Kantstein haut!
</div></div>
</div>
[Anmerkung]
Ich verwende dieses Script nicht, da mir die Beitrag-Eingabe nicht „griffig“ genug ist. Falls man nur Teilbereiche mit dem Effekt versehen will, empfiehlt sich dieses Script da es extrem klein ist.
Zur Zeit benutze ich das Plug-In Kaccordion.
Hatte mich mal nach einer neuen Lösung umgeschaut, da hiermit die Schriften im IE nicht gerendert erscheinen und etwas unsauber wirken.
8 Kommentare
@Technikpedia
Habe die Fehler bereinigt. Waren Kleinigkeiten, hatte aber nichts mit meinem Script zu tun. Denke jetzt ist es valide…oder?
@Shibumi
Neben der Doku ist es hilfreich wenn man im WP-Forum sich die Beiträge durchliest um mit den Begriffen vertraut zu werden und dort wird einem auch gut geholfen!
@funkygog
das mit der doku ist vollkommen richtig. ich habe am anfang erst einmal losinstalliert und gemacht und getan und hinterher wusste ich gar nicht mehr warum ich was gemacht habe. tausende von text dateien und nichts strukturiert. die doku ist das a und o der sache.
Oh, das war ein versehen von mir. Ich meinte nicht Simple Javascript Accordions, sondern dein jetziges. Da werden mir bei dieser Seite hier 21 Fehler angezeigt…
@Technikpedia
Die Original Demo-Seite enthält keine Fehler. Eventuell habe ich einen Fehler eingebaut. Kannst Du mir mehr dazu sagen. Habe das Script ja hier nicht mehr aktiviert.
Das sieht zwar recht hübsch aus (also die Aufklapp-Animation), aber so wie ich das gerade sehe, ist das Script nicht XHTML-Valide. Da finde ich diverse „aufklapp-alternativen“ über normales Javascript sinnvoller. Ob die natürlich Blogtauglich sind, ist dann wieder eine andere Frage, da ja der WordPress-Editor gerne mal das eine oder andere Tag beim speichern in die DB entfernt…
@Denis
über Sinn und Unsinn lässt sich natürlich streiten. Ich habe so etwas auch in der Sidebar eingebaut und finde es sehr praktisch.
@Shibumi
Kann ich gut verstehen. Verbessern kann man ja immer Stück für Stück. Kann Dir empfehlen schon gleich am Anfang Deine Theme-Änderungen zu dokumentieren. Sehr hilfreich um mal etwas nachzuschlagen. Habe bei mir damit leider erst etwas später angefangen: Theme-Verlauf
vielen dank für den download tip. ich habe es mal runtergeladen und für mein wordpress ausprobiert, allerdings habe ich dann mal wieder gelassen. das liegt daran, dass ich erstmal mit wordpress angefangen haben und am anfang noch nicht soviel da rumschrauben will.
An sich siehts nicht schlecht aus. Aber ich finde für normale Beiträge ist das nicht unbedingt geeignet. Für bestimmte Sachen, so wie dieser Beitrag z. B. ist es OK, da etwas beschrieben wird.