Plugin? Pah! - Ein Tutorial

22. Februar 2010 · Computerkram · 4 Kommentare

Da fragte mich der Andi die­ser Tage doch, mit wel­chem Plu­gin ich denn die Schlag­worte und ver­wand­ten Ein­träge unter einem Ein­trag hier aus– und ein­blen­den lasse. Plu­gin? Pah! Natür­lich habe ich da selbst ein wenig Hand ange­legt. So sieht das übri­gens aus­ge­klappt aus, zum Bei­spiel unter dem vori­gen Bei­trag¹:

Nach­dem ich eine kurze Weile belei­digt war, erklärte ich die nähe­ren Umstände und dass man nicht immer alles per Plu­gin lösen muss. Dar­auf­hin wurde ich als „Pro­gram­mie­rer“ beschimpft. Wie­der war ich für kurze Zeit belei­digt. Anschlie­ßend kam dann meine Gut­her­zig­keit doch wie­der durch und so ver­sprach ich dann, mal zu erklä­ren wie man so was selbst baut. Eigent­lich ist das näm­lich nicht schwer. Und das gibt es dann nach dem Klick.

Um den coo­len Slide-Effekt zu bauen, brau­chen wir zuerst ein­mal ein paar Dinge: Zuerst natür­lich mal FTP-Zugang zum (WordPress-)Blog, einen Text­edi­tor, jQuery und ein paar grund­sätz­li­che Kennt­nisse im Umgang mit all dem. Easy, das hat auch der Andi drauf.

Als ers­tes braucht es dann mal ein wenig HTML. Ein Ele­ment wird um den zu ver­ste­cken­den Inhalt gebaut, ein zwei­tes dient als Link zum Öffnen und Schlie­ßen des Ers­ten. Das sieht dann etwa so aus:

<div class="metaopener"><span>&darr; Verwandte Einträge/Schlagworte</span></div>
<div class="metadata">
	<!-- an dieser Stelle kann man einbauen was man will, das ist dann nachher versteckt -->
</div>

Bekannt­lich wäre purer HTML-Code aber nicht so son­der­lich hübsch, wenn es da nicht die wun­der­vol­len CSS gäbe. In die­sem Fall benö­ti­gen wir aber auch eine Zeile für den Effekt. Hier aber erst ein­mal der CSS-Code aus mei­nem Style­s­heet. Ich habe ihn auf das nötigste reduziert.

.metaopener {
	text-align: right;
     border-bottom: 1px solid #eee;
	}

	.metaopener span {
		cursor: pointer;
		}

	.metaopener span:hover {
		color: #000;
		}

.metadata {
	display: none;
	border-bottom: 1px solid #eee;
	}

Mit ein wenig Blick für HTML erkennt man, dass der Con­tai­ner mit der Klasse meta­o­pener durch den CSS-Code mit einer Linie am sei­nem unte­ren Ende aus­ge­stat­tet wird (Zeile 3) und der Text­fluß inner­halb des Ele­men­tes nun rechts aus­ge­rich­tet ist (Zeile 2).
Der span inner­halb des Con­tai­ners soll spä­ter unser Link sein. Damit das auch nach was aus­schaut, ver­än­dere ich den dar­ge­stell­ten Maus­cur­sor (Zeile 7) für das Ele­ment und ändere die Text­farbe, wenn man mit der Maus dar­auf kommt (Zeile 11).
Der Con­tai­ner mit der Klasse meta­data wird spä­ter die ver­steck­ten Inhalte beinhal­ten. Damit die­ser beim Auf­ruf der Seite nicht zu sehen ist, blende ich ihn mit dis­play: none; aus (Zeile 15). Die Linie am unte­ren Rand des Con­tai­ners dient nur der Optik (Zeile 16). Falls das hier wirk­lich mal jemand nach­bauen sollte, ist es emp­feh­lens­wert die erst mal zu Test­zwe­cken drin zu lassen.

So weit, so gut. Nun pas­siert aller­dings noch nicht son­der­lich viel. Bis­her wäre der Inhalt des zwei­ten Con­tai­ners ein­fach ver­schwun­den. Des­halb laden wir uns nun jQuery her­un­ter, packen es dann per FTP in den Ord­ner des aktu­el­len WordPress-Themes. Die fol­gen­den Zei­len bin­den zwei Dateien namens jquery.js und functions.js ein. Wir packen sie in die Datei header.php irgendwo zwi­schen die bei­den head-Tags. Ers­te­res sollte die gerade hoch­ge­la­dene Datei sein, zwei­tere legen wir uns erst ein­mal im Template-Verzeichnis an.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/functions.js"></script>

Was brau­chen wir eigent­lich noch? Genau, ein wenig Code der dem HTML– und CSS-Code sagt: „Wenn ich auf das eine kli­cke, dann soll das andere auf oder zuge­hen. Echt jetzt!„
Das schöne an jQuery ist, dass das Frame­work für den Webent­wick­ler² ohne JavaScript-Kenntnisse sehr leicht zu ver­ste­hen ist. Wenn es nicht mehr als ein wenig auf– und zuges­lide sein soll, dann tut es fol­gen­der Code völlig:

$(document).ready(function(){
    $(".metaopener span").click(function () {
             $(".metadata").slideToggle("slow");
    });
});

Den Kram kopie­ren wir nun in die Datei functions.js. Apfel-C, Apfel-V. Und dann schauen wir mal, was der Code so macht:

Die Funk­tion in Zeile 1 umschließt das gesamte Kon­strukt und gege­be­nen­falls noch wei­tere jQuery-Skripte. Sie lädt den Javascript-Code wenn das Doku­ment (also die aktu­elle Seite) fer­tig gela­den ist.
In der zwei­ten Zeile wird dann einem span eine Click-Funktion zuge­wie­sen. Dem auf­merk­sa­men Webent­wick­ler fällt auf, dass die Nota­tion die glei­che ist wie im CSS-Code. Gut, ne?
Zeile Num­mer drei sagt dann was gemacht wer­den soll wenn jemand auf den span klickt. Gar nicht schwer zu ver­ste­hen: Auf den Con­tai­ner mit der Klasse meta­data wird die Funk­tion slideToggle(„slow“) ange­wen­det.
Die vierte und fünfte Zeile schlie­ßen dann noch Klam­mern und schon ist alles fer­tig. Wenn man mein gan­zes Bla­fa­sel mal aus­blen­det, dann sollte das irgend­wie in zehn Minu­ten erle­digt sein.

Wie das dann am Ende aus­schaut, kann man sich direkt unter die­sem Bei­trag dann auch mal anschauen. Fra­gen dür­fen gerne in die Kommentare.

1. Ver­wir­rend übri­gens, einen Screen­shot in Ori­gi­nal­größe in den Ein­trag ein­zu­blen­den. Ich will da dau­ernd drauf­kli­cken. [↩]
2. So darf man sich nach Abschluss die­ses Tuto­ri­als nen­nen! [↩]

Diesen Beitrag teilen: Facebook • Twitter • Google+ • Delicious • XING