WordPress 3.4 – Custom-Header mit add_theme_support()

Seit WordPress 3.4 werden Custom-Header über die Funktion add_theme_support() eingebunden, damit wird das ganze System einheitlicher, da z.B. auch die Post-Thumbnails über diese Funktion aktiviert werden. Neben der Umstellung auf add_theme_support(‚custom-header‘) gliedert sich die Funktion nun auch in den neuen Live Theme Vorschau Modus mit ein.

In diesem Artikel möchte ich erklären, wie man Custom-Header in den eigenen Themes verwendet und Standard Header Bilder einbaut.

Um die Custom-Header zu verwenden benötigen wir letztendlich zwei Funktionen, zum einen die bekannte add_theme_support(‚custom-header‘) und die optionale register_default_headers(). Mit der zweiten Funktion können wir mehrere Standard Header bereitstellen, aus denen der User dann letztlich wählen kann.

Der Standard-Code für die individuellen Kopfzeilen sieht wie folgt aus und muss in die functions.php des Themes geschrieben werden:

$args = array(
    'flex-height'            => false, /* Flexible Höhe (true|false) */
    'height'                 => 240, /* Höhe des Header */
    'flex-width'             => false, /* Flexible Weite (true|false) */
    'width'                  => 800, /* Weite des Headers */
    'default-image'          => get_template_directory_uri() . 'https://cdn.webdesign-podcast.de/img/default.jpg', /* Standard-Bild des Headers */
    'random-default'         => false, /* Zufallsdurchlauf, wenn es mehrere Bilder gibt */
    'header-text'            => false, /* Header Text aktivieren oder abschalten */
    'uploads'                => true /* User-Uploads erlauben */
);

add_theme_support( 'custom-header', $args );

Tipp: Noch mehr interessante WordPress Workshops findet ihr in meinem neuen WordPress-Video-Training.

Diese Funktion ist bereits ausreichend um den Nutzer das austauschen des Kopfzeilen-Bildes zu ermöglichen. Um an dieser Stelle noch einen Schritt weiter zugehen und dem Nutzer auch noch eine Auswahl an Standard-Bildern zu präsentieren wird folgende Funktion benötigt, die ebenfalls in die functions.php des Themes geschrieben werden muss:

register_default_headers( array(
    'brandenburgertor' => array(
        'url' => '%s/img/brandenburger-tor-berlin.jpg', /* URL zum Bild */
        'thumbnail_url' => '%s/img/brandenburger-tor-berlin-thumb.jpg', /* URL zum Thumbnail (130px*66px) */
        'description' => __( 'Brandenburger Tor' ) /* Bildbeschreibung */
    ),
    'bank' => array(
        'url' => '%s/img/bank-of-california.jpg',
        'thumbnail_url' => '%s/img/bank-of-california-thumb.jpg',
        'description' => __( 'Bank of California' )
    ),
    'heissluftballons' => array(
        'url' => '%s/img/heissluftballons.jpg',
        'thumbnail_url' => '%s/img/heissluftballons-thumb.jpg',
        'description' => __( 'Heißluftballons' )
    )
));

Mit dieser Funktion werden dem Nutzer 3 Standard-Bilder zur Auswahl für den Header bereitgestellt.

Um das Header-Bild nun auszugeben wird folgender Code benötigt, dieser kann an beliebiger Stelle in’s Theme eingebaut werden: