Post Thumbnail Images (Artikelbild) in Wordpress

Verfasst von Mattias Stiller am 23. September 2011 | Wordpress | Keine Kommentare
Post Thumbnail Images (Artikelbild) Wordpress Tutorial

Seit Wordpress 2.9 gibt es die Möglichkeit jeden Artikel mit einem sogenannten Artikelbild (Post Thumbnail) zu verknüpfen. Vor der Version 2.9 musste man sich immer mittels Custom Fields behelfen, daher schätze ich diese Funktion sehr und möchte diese auch nicht mehr missen. Wie arbeitet man aber nun mit Artikelbildern bzw. mit der Funktion the_post_thumbnail? Als erstes muss man Wordpress sagen, dass man mit Artikelbildern arbeiten möchte. Dazu einfach den folgenden Code in die functions.php integrieren. Erster Schritt ist die Aktivierung der Funktion:

Aktivierung der Thumbnail-Funktion

  1. add_theme_support( 'post-thumbnails' );

Ist der Code einmal eingebaut, erscheint auf der rechten Seite der Artikel- und auch auf der Seitenbearbeitungsseite ein neuer Reiter; mit dem Namen Artikelbild. Möchtet ihr die Funktion nicht für beide Typen (Post & Page) aktivieren könnt ihr euch einen der folgenden Codes aussuchen.

  1. add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add it for posts
  2. add_theme_support( 'post-thumbnails', array( 'page' ) ); // Add it for pages

Damit das Artikelbild nun im Wordpress-Theme angezeigt wird müsst ihr noch folgenden Code in eure single.php, index.php, category.php (oder wo auch immer) einbauen.

Einbau in das Template

  1. if ( has_post_thumbnail()) the_post_thumbnail('thumbnail');

An dieser Stelle kann man nun unter den vier Standardgrößen, die Wordpress automatisch anlegt, wählen (thumbnail, medium, large und full). Zusätzlich könnt ihr dem IMG-Tag auch noch eine eigene Klasse mitgeben.

Thumbnail mit eigener Klasse versehen

  1. if ( has_post_thumbnail()) the_post_thumbnail('thumbnail', array('class' => 'alignleft'));

In meinem Fall bekommt nun das Bild die Klasse class=“alignleft“. Hier könnt ihr natürlich einen Klassenamen eurer Wahl eintragen.


Weiterführende Informationen findet ihr auf folgenden Webseiten.

Sorry, the comment form is closed at this time.