WordPress Artikelbilder aktivieren und ausgeben

In diesem Artikel wird gezeigt, wie man Artikelbilder ins eigene Theme einbinden kann. Wie auch in diesem Blog hat jeder Artikel ein zugewiesenes Bild.

Video

Das Video führt alles mit Praxisbeispielen genauer aus und die Funktionen werden näher erläutert, sowie demonstriert.

functions.php

In der functions.php muss zu nächst die Artikelbild-Funktion aktiviert werden, während im zweiten Schritt die Größe (oder Größen) der jeweiligen Artikelbilder in Bilbstilen festgelegt werden.

Die Funktion „Artikelbilder“ aktivieren

<?php add_theme_support( 'post-thumbnails' ); ?>

Bildstile hinzufügen

Um Bildstile hinzuzufügen bedienen wir uns der Funktion add_image_size, die einige Parameter zulässt. Der Name des jeweiligen Bildstils wird in $name festgelegt. Im nächsten Schritt weiter unten wird $name innerhalb von the_post_thumbnail verwendet, um den passenden Bildstil auszugeben. $width und $height sind praktisch selbsterklärend. Dort wird die Höhe beziehungsweise die Breite des jeweiligen Bildstils festgelegt. $crop ist ein wenig umfangreicher, wie man folgend sehen kann.

<?php add_image_size( $name, $width, $height, $crop ); ?>
$crop
  • false (Standard) – Soft Crop Mode
  • true – Hard Crop Mode
  • array(x-position, y-position) – Sichtbereich der Größe $width und $height wird je nach Position ausgeschnitten
    • left, center, right
    • top, center, bottom
Beispiel

Es können natürlich auch mehrere Bildstile festgelegt werden, wenn man zum Beispiel in der index.php ein andere Artikelbildformat ausgeben möchte, als in der index.php.

add_image_size( 'hard', 690, 300, true );
add_image_size( 'soft', 690, 300, false );
add_image_size( 'array', 690, 300, array('left', 'bottom') );
Fehler vermeiden

Um Fehler zu vermeiden sollte man mit der PHP Funktion function_exists() abfragen, ob eine Funktion vorhanden ist. Gerade, wenn Templates auch abwärts kompatibel sein sollen, sollte man darauf in keinem Fall verzichten. Diese Funktion ist nicht WordPress intern, sondern eine allgemeine PHP Funktion, die abfragt, ob eine Funktion vorhanden ist. In dem Fall fragt die Funktion, ob die Funktion add_theme_support bzw. ob add_image_size irgendwo in WordPress vordefiniert wurde.

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}

if ( function_exists( 'add_image_size' ) ) {
  add_image_size( 'hard', 690, 300, true );
  add_image_size( 'soft', 690, 300, false );
  add_image_size( 'array', 690, 300, array('left', 'bottom') );
 }

Artikelbilder ausgeben

Im Folgenden Code wird mit einer „PHP if-else Anweisung“ über has_post_thumbnail() abgefragt, ob ein Artikelbild zum bestimmten Artikel zugewiesen wurde. Wenn das der Fall ist, gibt die Funktion has_post_thumbnail den boolean „true“ aus und ein Bild wird mit the_post_thumbnail mit dem Bildstil $name (oben definiert – zum Beispiel: hard, soft oder array) wird angezeigt. Wenn has_post_thumbnail den boolean „false“ ausgibt, wird der Code in den Schweifklammern nach else ausgeführt. Dies kann man auch weglassen, wenn man möchte, dass nichts passiert, wenn kein Artikelbild vorhanden ist. Man könnte dann aber auch einen Platzhalter oder ähnliches ausgeben.

<?php if (has_post_thumbnail()) { the_post_thumbnail('$name'); }else{}?> 

Beispiel

In unserem Beispiel wird ein Artikelbild, wenn vorhanden, mit dem oben definierten Bildstil ’soft‘ ausgegeben.

<?php if (has_post_thumbnail()) { the_post_thumbnail('soft'); } ?>

Quellen

http://codex.wordpress.org/Function_Reference/has_post_thumbnail
http://codex.wordpress.org/Function_Reference/the_post_thumbnail
http://codex.wordpress.org/Function_Reference/add_image_size

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.