Header-Grafiken (custom-header)

wp_logoMit benutzerdefinierten Kopfzeilen kann der User das Aussehen der Themes selbst gestalten. Die Änderungen können im Admin-Bereich oder in der Live-Theme-Vorschau von Wordpress durchgeführt werden. Die Funktion "add_theme_support( 'custom-header' )" im Wordpress-Theme macht dies möglich.

 

Mit dieser Methode können Kopfzeilenbilder über die Mediathek oder über den direkten Upload eingefügt werden. Durch das Definieren von flexiblen Größen kann das Header-Bild individuell angepasst werden. Auch die Textfarbe in der Kopfzeile kann geändert werden. Die Funktion muss im jeweiligen Theme definiert sein.

 

Die Funktion add_theme_support( 'custom-header') für das Kopfzeilenbild, die seit Wordpress Version 3.4 eingeführt wurde, wird in die "functions.php" eingefügt.

Die Ausgabe findet in der "header.php" statt.

 

functions.php

Ein Beispiel eines Kopfzeilenbildes mit einer festen Höhe von 100 Pixel und einer Breite von 980 Pixel.

add_theme_support( 'custom-header', array( 
'height' => 100,
'width' => 980,
'default-image' => '%s/images/headers/banner.jpg' ) );

 

Für flexible Bildgrößen kann zusätzlich "flex-height" bzw. die "flex-width" auf "true" gesetzt werden. Die Höhenangabe bzw. Breitenangabe wird von der festen zur empfohlenen Bildgröße.

 

Beispiel mit flexibler Höhe:

add_theme_support( 'custom-header', array(
'height' => 100,
'width' => 980,

'flex-height' => true,
'default-image' => '%s/images/headers/banner.jpg' ) );

 

 

Die Standard-Werte sind:

$defaults = array( 
'default-image' => '', // Header image default
'random-default' => false, // Header image random rotation default
'width' => 0, // Header image width (in pixels)
'height' => 0, // Header image height (in pixels)
'flex-height' => false,
'flex-width' => false,
'default-text-color' => '', // Header text color default
'header-text' => true, // Header text display default
'uploads' => true,
'wp-head-callback' => '', // Template header style callback
'admin-head-callback' => '', // Admin header style callback
'admin-preview-callback' => '', // Admin preview style callback
);

 

 

Theme-Entwickler müssen seit der Wordpress Version 3.4 die Methode "add_theme_support( 'custom-header' )" verwenden, sie ist einfacher, hat mehr Möglichkeiten und bringt mehr Leistung gegenüber der alten Funktion "add_custom_image_header( )".

 

header.php

Für die Ausgabe wird das Kopfzeilenbild (Header-Grafik) an die gewünschte Position in die header.php eingefügt.

<img src="/<?php header_image(); ?>"
 height="<?php echo get_custom_header()->height; ?>"
 width="<?php echo get_custom_header()->width; ?>" alt="" />
  • Die Funktion "header_image( )" ruft die definierte Header-Grafik auf.
  • Mit "get_custom_header( )" werden die festgelegten Einstellungen geladen.

Kommentare   

+1 #2 Becker 2013-01-09 18:49
Nicht nur für Dich ist die Header das Wichtigste einer Seite !
Ganz besonders Suchmaschinen legen Wert auf die Header Zeile, weil hier die ersten und wichtigsten Suchbegriffe auftauchen und eine erste Aussage getätigt wird worum es überhaupt in der Seite geht ! Allerdings sollte diese nicht ZU LANG sein und auch nicht eine aufzählung von Suchbegriffen sein !
-1 #1 Ulrike 2012-08-28 17:25
Für mich ist der Header noch mit der wichtigste Teil einer Webseite. Meistens schweift der Blick doch zuerst in den oberen Bereich und somit den Header. Ist dieser ansprechend oder billig, kann das schon über den Verbleib der Besucher entscheiden.