Mit WordPress 2.9 kam die neue – und wie ich finde auch längst überfällige – Funktion “the_post_thumbnail”. Mit dieser Funktion ist es nun endlich möglich, jedem Beitrag ein eigenes kleines Bild anuzuhängen, ohne dies recht aufwändig über Custom-Fields oder Plugins zu lösen. Die Integration in das bestehende Theme ist denkbar einfach.
Wenn man diese Funktion richtig nutzen möchte, sollte man folgendes beachten;
Aktivierung der Funktion in der functions.php
Als erstes öffnet man die functions.php seines aktuellen Themes und ergänzt den Aufruf der Funktion in dem man folgende Zeile hinzufügt;
1 | add_theme_support('post-thumbnails'); |
Wer keinen offenen PHP-Aufruf findet, ergänzt die Zeile um;
1 | <?php add_theme_support('post-thumbnails'); ?> |
Damit weiß WordPress nun, dass es diese Funktion gibt, und diese auch aktiviert werden kann.
Die Funktion / Bildgrößen
Als nächstes geht es an das Theme – die Einbindung in das Design.
Hier sollte man zuvor wissen, dass es standardmäßig drei Größenvorgaben gibt, und eine weitere für eigene Anpassungen.
Aber zuerst zu den Standards. Von Hause aus gibt es drei feste Größenvorgaben, die da lauten;
“thumbnail” => setzt die Breite des Vorschaubildes auf einen Wert von 150px
“medium” => setzt die Breite des Vorschaubildes auf einen Wert von 300px
“large” => setzt die Breite des Vorschaubildes auf einen Wert von 1024px
Die entsprechende Höhenangabe des Bildes ergibt sich dann automatisch aus der Breite.
Ausgeschrieben sieht die Funktionen dann so aus (Größe = thumbnail);
1 | <?php the_post_thumbnail('thumbnail'); ?> |
Die vierte Option ist das Festlegen von fixen Breiten- und Höhenwerten. Zu beachten ist hierbei aber, dass es bei fixen Größenvorgaben zu verzerrten Darstellungen der Bilder kommen kann, da diese unter Umständen nicht mehr proportional sind.
Für feste Breiten- und Höhenangaben sieht die Funktion dann so aus;
1 |
wobei die Angaben (100,100) für Breite und Höhe stehen, und entsprechend angepasst werden können.
Einbindung der Funktion
Wenn man sich nun für die gewünschte Bildgröße entschieden hat, und diese Funktion beispielsweise mit der Größe “thumbnail” in den Archiv-Seiten verwenden möchte, dann könnte der Aufruf wie folgt aussehen;
1 2 3 4 5 6 7 | <?php while (have_posts()) : the_post(); ?> .... <div> <?php the_post_thumbnail('thumbnail'); ?> <?php the_excerpt(); ?> </div> .... |
Ausrichtung und Style in der CSS-Datei
So würde das Vorschaubild die Standard-Styles des Themes annehmen, was nicht immer die richtige Wahl ist. Daher fehlt als Letztes noch die entsprechende Anpassung in der CSS-Datei.
Im oben genannten Beispiel möchte ich die Vorschaubilder links im Text umlaufend haben. Dazu muss die Style-CSS wie folgt angepasst werden;
1 2 3 4 5 6 | .attachment-thumbnail { float: left; margin: 3px; padding: 3px; border: 1px solid #ccc; } |
Das Vorschaubild wird jetzt links ausgerichtet, vom Text umschlossen und ist mit wenig Abstand und einem dünnen Rahmen vom Inhalt getrennt.
Jede Bildgröße erstellt übrigens eine eigene CSS-Klasse, die individuell angepasst werden kann. Je nach gewählter Bildgröße lauten die Klassen dann
1 | .attachment-thumbnail, .attachment-medium, .attachment-large |
Das war´s! Im Backend steht nun die Möglichkeit zur Verfügung, ein eigenes Bild zu jedem Beitrag hochzuladen. Viel Spaß mit dieser Funktion, auf die auch ich in Zukunft öfter zurück greifen werde. 
Die Funktions-Referenz bei wordpress.org: http://codex.wordpress.org/Template_Tags/the_post_thumbnail
Weitere Beispiele und Konfigurationen sind in dem Artikel ” The ultimative Guide for the_post_thumbnail in WordPress 2.9 ” beschrieben…
Tags: Theme-Funktionen, WP-Theme
