WordPress Theme mit anpassbaren Header

Wie ich hier bereits vor ein paar Wochen geschrieben habe, bringt die neue WordPress Version 3.4 „Green“ ein neues Feature mit: den Theme Customizer. Damit ist es unter anderem auch möglich das Bild im Header zu verändern und in einer Vorschau anzuzeigen. Allerdings hat die Sache einen kleinen Haken, das verwendete WordPress Theme muss dieses Feature unterstützen. Wie man ein WordPress Theme anpasst, damit genau das funktioniert, möchte ich nun zeigen:

Als Beispiel dient das verwendete Theme auf mik-ina.de.

Es soll also möglich sein, mit Hilfe des Theme Customizer das Bild im Header anzupassen. Den Theme Customizer findet man unter: Design → Themes → Anpassen

Um das Theme jetzt für das Feature anzupassen, muss man zunächst wissen, wo das WordPress Theme liegt. Die WordPress Themes sind in der Regel unter wordpress/wp-content/themes installiert. Dort befinden sich entsprechende Ordner mit den darin enthaltenden Dateien.

Wenn man das passende Theme, in diesem Fall liegt es im Unterordner „miki“, ensprechend erweitern möchte, muss man die Datei functions.php öffnen.

An das Ende – in den gültigen PHP-Bereich (<?php … ?>) – werden dann die folgenden Code-Schnipsel eingefügt und entsprechend angepasst:

Als erstes muss das Feature „custom-header“ im Theme aktiviert und die Standardwerte konfiguriert werden.

// Custom Header
$args = array(
	'flex-width' => false,
	'width' => 962,
	'flex-height' => false,
	'height' => 100,
	'default-image' => get_template_directory_uri() . '/img/header.png',
);
add_theme_support( 'custom-header', $args );

In diesem Fall wird eine statische Breite und Höhe des Headers festgelegt. Außerdem hat der Header eine Größe von 962×100 Pixel. Der Standard-Header – also das Bild, welches verwendet wird, wenn kein angepasster Header verwendet wird – liegt in diesem Fall unter miki/img/header.png.

Außerdem ist es sinnvoll, dass man jederzeit dieses Standard-Bild für den Header wiederherstellen kann. Dafür sollte der folgenden Code zur functions.php hinzugefügt werden.

// Setting Default Header Image
register_default_headers( 
	array(
		'one' => array(
			'url' => '%s/img/header.png',
			'thumbnail_url' => '%s/img/header.png',
			'description' => 'Standard header image'
		),
	) 
);

Damit ist es auch schon möglich, im Theme Customizer mit dem neuen Feature zu arbeiten.

Allerdings macht das alles zu diesem Zeitpunkt noch nicht viel Sinn, weil bislang nur der alte Header im Frontend angezeigt wird. Man muss dem Theme also auch mitteilen, wo der Header angezeigt werden soll.

Dafür muss eine weitere Datei geöffnet werden. Häufig ist dies die Datei header.php.

Dort muss das bisherige Verhalten des Header-Bildes im HTML eingebunden sein. Das kann z.B. in einer div-Box liegen oder es gibt ein img-Tag, der das Bild festlegt.

In unserem Beispiel wird das Bild als Hintergrundbild per CSS in einer Div-Box eingebunden. Das muss nun wie folgt angepasst werden:

<div id="header" 
style="background-image:url('<?php header_image(); ?>'); 
height:<?php echo get_custom_header()->height; ?>px; 
width:<?php echo get_custom_header()->width; ?>px;">

Die Datei-URL des neuen angepassten Headers wird über die Funktion header_image() eingebunden. Die Höhe und Breite werden von den Funktionen get_custom_header()->height und get_custom_header()->width ausgegeben (echo nicht vergessen!).

Es ist natürlich auch möglich, ein Header-Image über einen img-Tag einzubinden. Das kann dann beispielsweise so aussehen:

<img 
src="<?php header_image(); ?>" 
height="<?php echo get_custom_header()->height; ?>" 
width="<?php echo get_custom_header()->width; ?>" 
alt="">

Damit sollte es nun möglich sein, mit Hilfe des neuen Theme Customizers angepasste Header-Bilder zu verwenden. Im Customizer kann im Bereich „Kopfbild“ nun ein Bild hochgeladen werden. Das wird dann rechts in der Vorschau angezeigt. Wenn man zufrieden ist, muss man die Änderung nur noch speichern.

 

PG

Felix

 – Autor des Artikels

2 Reaktionen auf “WordPress Theme mit anpassbaren Header

  1. Miki sagt:

    Und ist dir der neue Header schon aufgefallen? ;-)

  2. Felix sagt:

    @Miki

    Natürlich ist mir das schon aufgefallen ;-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

:alien: :angel: :angry: :annoyed: :left: :right: :blush: :carefree: :cool: :cry: :devil: :laughdevil: :fools: :geek: :hay: :innocent: :laugh: :love: :shock: :offended: :sad: :sick: :unhappy: :silly: :smile: :speechless: :supershock: :-o :teasing: :wink: :zombie: :zzz: :-* xD :nomnomnom: :oh: :ghost: :teddy: :fussball: :ubuntu: :piratenpartei: