Plugin? Pah! - Ein Tutorial

Da fragte mich der Andi dieser Tage doch, mit welchem Plugin ich denn die Schlagworte und verwandten Einträge unter einem Eintrag hier aus- und einblenden lasse. Plugin? Pah! Natürlich habe ich da selbst ein wenig Hand angelegt. So sieht das übrigens ausgeklappt aus, zum Beispiel unter dem vorigen Beitrag ((Verwirrend übrigens, einen Screenshot in Originalgröße in den Eintrag einzublenden. Ich will da dauernd draufklicken.)):

Verwandte Einträge/Schlagworte

Nachdem ich eine kurze Weile beleidigt war, erklärte ich die näheren Umstände und dass man nicht immer alles per Plugin lösen muss. Daraufhin wurde ich als "Programmierer" beschimpft. Wieder war ich für kurze Zeit beleidigt. Anschließend kam dann meine Gutherzigkeit doch wieder durch und so versprach ich dann, mal zu erklären wie man so was selbst baut. Eigentlich ist das nämlich nicht schwer. Und das gibt es dann nach dem Klick.

Um den coolen Slide-Effekt zu bauen, brauchen wir zuerst einmal ein paar Dinge: Zuerst natürlich mal FTP-Zugang zum (Wordpress-)Blog, einen Texteditor, jQuery und ein paar grundsätzliche Kenntnisse im Umgang mit all dem. Easy, das hat auch der Andi drauf.

Als erstes braucht es dann mal ein wenig HTML. Ein Element wird um den zu versteckenden Inhalt gebaut, ein zweites dient als Link zum Öffnen und Schließen des Ersten. 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>

Bekanntlich wäre purer HTML-Code aber nicht so sonderlich hübsch, wenn es da nicht die wundervollen CSS gäbe. In diesem Fall benötigen wir aber auch eine Zeile für den Effekt. Hier aber erst einmal der CSS-Code aus meinem Stylesheet. 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 Container mit der Klasse metaopener durch den CSS-Code mit einer Linie am seinem unteren Ende ausgestattet wird (Zeile 3) und der Textfluß innerhalb des Elementes nun rechts ausgerichtet ist (Zeile 2).
Der span innerhalb des Containers soll später unser Link sein. Damit das auch nach was ausschaut, verändere ich den dargestellten Mauscursor (Zeile 7) für das Element und ändere die Textfarbe, wenn man mit der Maus darauf kommt (Zeile 11).
Der Container mit der Klasse metadata wird später die versteckten Inhalte beinhalten. Damit dieser beim Aufruf der Seite nicht zu sehen ist, blende ich ihn mit display: none; aus (Zeile 15). Die Linie am unteren Rand des Containers dient nur der Optik (Zeile 16). Falls das hier wirklich mal jemand nachbauen sollte, ist es empfehlenswert die erst mal zu Testzwecken drin zu lassen.

So weit, so gut. Nun passiert allerdings noch nicht sonderlich viel. Bisher wäre der Inhalt des zweiten Containers einfach verschwunden. Deshalb laden wir uns nun jQuery herunter, packen es dann per FTP in den Ordner des aktuellen Wordpress-Themes. Die folgenden Zeilen binden zwei Dateien namens jquery.js und functions.js ein. Wir packen sie in die Datei header.php irgendwo zwischen die beiden head-Tags. Ersteres sollte die gerade hochgeladene Datei sein, zweitere legen wir uns erst einmal 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 brauchen wir eigentlich noch? Genau, ein wenig Code der dem HTML- und CSS-Code sagt: "Wenn ich auf das eine klicke, dann soll das andere auf oder zugehen. Echt jetzt!"
Das schöne an jQuery ist, dass das Framework für den Webentwickler ((So darf man sich nach Abschluss dieses Tutorials nennen!)) ohne JavaScript-Kenntnisse sehr leicht zu verstehen ist. Wenn es nicht mehr als ein wenig auf- und zugeslide sein soll, dann tut es folgender Code völlig:


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

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

Die Funktion in Zeile 1 umschließt das gesamte Konstrukt und gegebenenfalls noch weitere jQuery-Skripte. Sie lädt den Javascript-Code wenn das Dokument (also die aktuelle Seite) fertig geladen ist.
In der zweiten Zeile wird dann einem span eine Click-Funktion zugewiesen. Dem aufmerksamen Webentwickler fällt auf, dass die Notation die gleiche ist wie im CSS-Code. Gut, ne?
Zeile Nummer drei sagt dann was gemacht werden soll wenn jemand auf den span klickt. Gar nicht schwer zu verstehen: Auf den Container mit der Klasse metadata wird die Funktion slideToggle("slow") angewendet.
Die vierte und fünfte Zeile schließen dann noch Klammern und schon ist alles fertig. Wenn man mein ganzes Blafasel mal ausblendet, dann sollte das irgendwie in zehn Minuten erledigt sein.

Wie das dann am Ende ausschaut, kann man sich direkt unter diesem Beitrag dann auch mal anschauen. Fragen dürfen gerne in die Kommentare.