Wie du Beitragsbilder im WordPress Theme implementieren kannst
Dieser Beitrag der Artikel-Serie über Beitragsbilder handelt über die technische Umsetzung und zeigt die nötigen Funktionen, um Beitragsbilder im WordPress Theme zu implementieren und anzeigen zu lassen.
Du hast den Start der Artikel-Serie verpasst? Zum Lesen des ersten Beitrags hier klicken!
Die Code Beispiele in diesem Tutorial funktionieren grundsätzlich für die Entwicklung eines eigenen Themes, können aber auch für das Nachrüsten von Beitragsbildern in einem Child Theme genutzt werden.
Support für Beitragsbilder deklarieren
Zuerst muss WordPress mitgeteilt werden, dass Beitragsbilder unterstützt werden sollen.
WordPress stellt dafür die Funktion add_theme_support() bereit, mit der verschiedene Core Features wie Beitragsbilder, Theme Logo, Header Bild, Hintergrundbild, Website-Titel oder RSS Feeds im Theme aktiviert werden können.
Um Beitragsbilder zu nutzen, verwenden wir als Parameter post-thumbnails: add_theme_support( 'post-thumbnails' );
Die Deklaration für den Support von Beitragsbilder und weiteren Features nehmen wir in der Setup Funktion des Themes vor, welche sich üblichweise in der functions.php des Themes befindet und in den after_setup_theme Action Hook eingeklinkt wird.
if ( ! function_exists( 'theme_slug_setup' ) ) :
/**
* Sets up theme and registers support for various WordPress features.
*/
function theme_slug_setup() {
// Other Theme Setup code...
// Enable support for Post Thumbnails on posts and pages.
add_theme_support( 'post-thumbnails' );
}
endif;
add_action( 'after_setup_theme', 'theme_slug_setup' );Der erste Schritt ist damit geschafft.
WordPress zeigt nun im Backend die Boxen für das Hinzufügen und Entfernen von Beitragsbildern an, wenn ein Beitrag bzw. Seite erstellt oder bearbeitet wird.
Standard-Größe des Beitragsbilds definieren
Im letzten Beitrag ging ich bereits auf die drei Standard Größen ein, welche WordPress für normale Bilder im Content definiert: thumbnail, medium und large
Für Beitragsbilder existiert ebenfalls eine Standard-Größe namens post-thumbnail
Die Breite und Höhe des Standard Thumbnails wird mit set_post_thumbnail_size() im Theme definiert. Die Funktion ist lediglich eine Wrapper Funktion für add_image_size(), welche wir gleich noch kennenlernen werden.
set_post_thumbnail_size( 300, 200, true );Nach Angabe der Breite und Höhe wird im dritten Parameter Hard Cropping als Cropping Modus übergeben. Die zwei Cropping Methoden habe ich ebenfalls bereits im letzten Beitrag erklärt.
Eigene Bildgrößen für Beitragsbilder festlegen
Ein Theme benötigt mitunter verschiedene Größen für Beitragsbilder auf verschiedenen Templates, z.B. Archive-Seiten und einzelne Beiträge.
Deshalb können im Theme auch eigene Bildgrößen mit add_image_size() definiert werden.
add_image_size( 'theme-slug-single-post', 800, 9999, false );Im ersten Parameter wird der Name der Bildgröße zur späteren Identifikation übergeben, danach folgt wieder Breite, Höhe und Cropping Modus.
Eine Angabe von 9999 Pixel zusammen mit Soft Cropping sorgt für eine unlimitierte Höhe des Beitragsbilds. Die Bildgröße soll später in einzelnen Beiträgen verwendet werden, während auf den Archiv-Seiten eine feste Bildgröße von 300 x 200 Pixel gilt.
Die Definition der Bildgrößen fügen wir ebenfalls in der Theme Setup Funktion hinzu.
if ( ! function_exists( 'theme_slug_setup' ) ) :
/**
* Sets up theme and registers support for various WordPress features.
*/
function theme_slug_setup() {
// Other Theme Setup code...
// Enable support for Post Thumbnails on posts and pages.
add_theme_support( 'post-thumbnails' );
// Set detfault Post Thumbnail size.
set_post_thumbnail_size( 300, 200, true );
// Add custom image size for single posts.
add_image_size( 'theme-slug-single-post', 800, 9999 );
}
endif;
add_action( 'after_setup_theme', 'theme_slug_setup' );Beitragsbilder im WordPress Theme anzeigen
Die Ausgabe des Beitragsbilds im WordPress Theme erfolgt mit der Funktion the_post_thumbnail(). Die Funktion sollte dabei innerhalb des WordPress Loops aufgerufen werden.
Ohne Angabe eines Parameters wird automatisch das Standard-Beitragsbild post-thumbnail angezeigt. Für eine Verlinkung des Beitragsbildes auf Archiv-Seiten zur Einzelansicht des Beitrags kann das Beitragsbild in einen Link gepackt werden. Mit has_post_thumbnail() kannst du überprüfen, ob der Nutzer überhaupt ein Beitragsbild festgelegt hat.
In der archive.php kann deshalb dieser Code innerhalb des WordPress Loops zur Anzeige des Standard-Beitragsbilds mit der festgelegten Größe von 300×200 Pixel verwendet werden.
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
Für eigene, definierte Bildgrößen muss der Name als erster Parameter übergeben werden.
Im zweiten Parameter kann ein Array mit weiteren Attributen übergeben werden. Damit kannst du dem Beitragsbild sehr einfach eine weitere Klasse zum späteren Styling mit CSS Code übergeben.
In der single.php kann dieser Code zur Anzeige des Beitragsbildes genutzt werden:
<?php the_post_thumbnail( 'theme-slug-single-post', array( 'class' => 'single-post-image' ) ); ?>Neben individuell hinzugefügten Klassen hat jedes Beitragsbild immer die .wp-post-image Klasse, auf die für das Styling aller Beitragsbilder in der style.css zurückgegriffen werden kann.
Mit diesem kurzen Einblick in die technische Umsetzung von Featured Images haben wir die Grundlagen der Artikel-Serie abgeschlossen. In den kommenden Beiträgen geht es um die Anpassung und Erweiterung von Beitragsbildern mit zusätzlichen Plugins.
