Benutzerdefinierte Header in ein WordPress Theme einbinden
Im Juni wurde die freie Blogsoftware WordPress in der Version 3.4 mit einigen neue Funktionen veröffentlicht. Zwei signifikante Änderungen sind mir darin besonders aufgefallen.
Zum ersten ist das die Live Theme Vorschau, bei der man vor dem wechseln und aktivieren zu einem anderen Theme benutzerspezifische Einstellungen setzen und ausprobieren kann.
Zum zweiten sind das die benutzerdefinierten Kopfzeilen, bei dem man als Nutzer in dem verwendeten Theme selber entscheiden kann, welches benutzerdefinierte Kopfzeilenbild man gerne verwenden möchte. Dabei ist es auch möglich Bilder aus der eigenen Mediathek als Kopfzeilenbild zu verwenden, oder jederzeit eigene Bilder für den Kopfbereich hochzuladen.
WordPress spricht bei den benutzerdefinierten Kopfzeilen von dem sogenannten “Custom-Header” Bereich, mit dem man für das verwendeten WP-Theme als Administrator zum Beispiel ein oder mehrere Standard benutzerdefinierte Kopfzeilenbilder einstellen kann.
In diesem Artikel zeige ich kurz wie ich die neue Funktion in mein bestehendes WordPress Theme eingebunden habe. Ich beschreibe kurz was man tun muss, damit man die Custom-Header Funktionalitäten in dem eigenen Theme verwenden kann, um zum Beispiel ein Standard Kopfzeilenbilder für seinen Blog zu verwenden.
Benutzerdefinierte Header in WordPress einbinden
Um nun die neuen Funktionen der WordPress Custom Headers in ein bestehendes WordPress Theme einzubinden, sind lediglich ein paar kleine Schritte für den Blog-Administrator notwendig.
Notwendige Anpassungen in der Konfigurationsdatei functions.php
Als erstes muss dem aktuellen Theme in der Konfigurationsdate functions.php mitgeteilt werden, dass das verwendete Theme nun die Custom-Header unterstützen soll. Dies geschieht ganz einfach über den Eintrag des folgenden Codes in die functions.php Datei.
add_theme_support('custom-header');
Durch den Aufruf der Methode add_theme_support() wird WordPress mitgeteilt, dass das verwendete Theme das Feature ‘custom-header’ unterstütz.
Durch den Eintrag steht ab sofort im WordPress Hauptmenü ein neuer Menüpunkt Design/Kopfzeile zur Verfügung. Dort können Benutzer nun einige Einstellungen für die individuelle Kopzeile im Blog machen.
Möchte man bestimmte Einstellungen für den neuen Kopfzeilenbereich vorgeben, dann kann man der Funktion custom-header auch noch ein paar Einstellungen beim konfigurieren in der functions.php mitgeben.
Gibt man mein Aufruf keine Parameter mit an, dann sind diese wie folgt von WordPress als Standard definiert:
$defaults = array( 'default-image' => '', 'random-default' => false, 'width' => 0, 'height' => 0, 'flex-height' => false, 'flex-width' => false, 'default-text-color' => '', 'header-text' => true, 'uploads' => true, 'wp-head-callback' => '', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); add_theme_support( 'custom-header', $defaults );
Hier nun ein kleines Beispiel wie man den Aufruf individuell für sein Theme anpassen könnte:
if ( function_exists('add_theme_support') ) {
$defaults = array(
'uploads' => true, /* Benutzern ein hochladen von eigenen Bildern erlauben */
'default-image' => get_template_directory_uri() . '/images/header/header-default.jpg',
'height' => 140, /* Höhe des Header */
'width' => 930, /* Weite des Headers */
'flex-height' => true, /* Flexible Höhe (true|false) */
'flex-width' => false, /* Flexible Weite (true|false) */
'random-default' => false, /* Der Zufallsdurchlauf ist standard deaktiviert */
'header-text' => true, /* Header Text aktivieren oder deaktivieren */
'default-text-color' => 'CDCDCD'
);
add_theme_support( 'custom-header', $defaults );
}
Durch den Aufruf wird ein Standard Kopfzeilenbild für das verwendete WordPress Theme vorgegeben. Als Standard wird für die Bilder eine feste Bildgröße von 930 x 140 Pixel vorgegeben. Die Breite der verwendeten Bilder ist nicht flexibel, die Höhe der Kopfzeilenbilder ist dagegen flexibel ausgelegt. Dadurch können die Bilder in variabler höhe dargestellt werden. Ein Text über der Header-Grafik kann eingeblendet werden, wenn man dies konfigurieren möchte. Ebenfalls ist eine Standardfarbe für den Text über der Header-Grafik vorgegeben, diese kann über die Adminseite verändert werden.
Optional: Mehrere Standard Kopfzeilenbilder konfigurieren
Optional kann man als Administrator auch mehrere Kopfzeilenbilder für den Headerbereich als Standard vorgeben. Durch die Methode register_default_headers() kann man einen oder mehrere Standard Kopfzeilenbilder bereitstellen, aus denen der Benutzer dann letztlich beim Konfigurieren des Header-Bereichs wählen kann.
Der Nutzer hat daneben auch weiter die Möglichkeit Bilder aus der eigenen Mediathek als Kopfzeilenbild auszuwählen oder neue Bilder für den Header-Bereich hochzuladen. Die Methode register_default_headers() gibt es bereits seit WordPress 3.0.0.
Hier ein kleines Codebeispiel in dem ich zwei Bilder vorgegeben habe.
register_default_headers( array(
'header1' => array(
'url' => '%s/images/header/header1.jpg',
'thumbnail_url' => '%s/images/header/header1-thumb.jpg', /* Thumbnail (130px*66px) */
'description' => __( 'Beispiel Header 1' )
),
'header2' => array(
'url' => '%s/images/header/header2.jpg',
'thumbnail_url' => '%s/images/header/header2-thumb.jpg',
'description' => __( 'Beispiel Header 2' )
)
));
Ein mögliches Konfigurationsbeispiel kannst du dir oben in den gezeigten Screenshots anschauen.
Einbinden des neuen dynamischen Headers in die header.php
So nun hat man die notwendigen Voraussetzungen für ein WordPress Theme mit frei konfigurierbaren Kopfzeilenbereich geschaffen. Damit die konfigurierten Kopfzeilengrafiken bzw. custom-header Images auch auf der Webseite oder dem Blog angezeigt werden, muss noch etwas Code in die header.php Datei des gewählten Themes eingebunden werden.
Das Codebeispiel bindet das konfigurierte Header Bild mit den eingestellten Bildabmessungen auf dem Blog ein.
<?php if ( get_header_image() ) : ?> <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /> <?php endif; ?>
Mein Fazit zum Einbinden der neuen Custom-Header Funktion
Die neue WordPress Funktion mit dem benutzerdefinierten Kopfzeilenbereich, ist gerade mit Blick auf das individuell einstellbaren Kopfzeilenbild eine nützliche Funktion, mit der man zukünftig auch mal eben ein anderes WordPress-Theme ausprobieren kann (siehe Live Theme Vorschau) und dabei auf die eigenen, vorher konfigurierten Bilder für den Kopfbereich zurückgreifen kann.
Ich werde die Funktion evtl. nutzen um zukünftig schnell mal auf eine anderen Header-Grafik umstellen zu können. Zum Beispiel um zur entsprechenden Jahreszeit ein passendes Bild einzustellen oder vielleicht auch mal um die Bilder im Kopfbereich zufällig wechseln zu lassen.
Gut bei der ganzen Sache finde ich auch, dass man nun jederzeit ein neues Bild für den Kopfbereich hochladen und diesen dann sofort verwenden kann – auch ohne ein Webprofi zu sein.
Die Konfiguration in der WordPress Adminoberfläche ist meineserachtens aber noch nicht ganz ausgereift, da klemmt es an einigen Stellen noch. So werden zum Beispiel beim zurechtschneiden der selbst hochgeladenen Bilder für den Kopfbereich keine Abmessungen angezeigt und man kann dabei schlecht einschätzen wie Groß die Auswahl nun gerade ist.
Da bietet es sich an die Bilder vor dem Hochladen mit einem Bildbearbeitungsprogramm auf die richtige Größe für die Headergrafik zu bringen.
Insgesamt gefällt mir die neue Funktionalität custom-header ab WordPress 3.4 sehr gut. Wie findet Ihr die neuen Möglichkeiten mit den konfigurierbaren Kopfbereich?
