---
title: "WordPress Video-Tutorial Teil 8: individuelles Logo- und Headerbild"
author: "Ellen Bauer"
date: 2011-06-15
lang: de
source: https://elmastudio.de/wordpress-video-tutorial-teil-8-individuelles-logo-und-headerbild/
---

# WordPress Video-Tutorial Teil 8: individuelles Logo- und Headerbild

In 8. Teil meines WordPress Video-Tutorials zeige ich, wie du ein eigenes Logobild in dein Theme einfügen kannst. Außerdem stelle ich noch die Headerbild-Funktion vor. Mit Hilfe dieser praktischen Funktion können individuelle oder bereits vorbereitete Headerbilder direkt im Adminbereich von WordPress (unter Design/Kopfzeile) hochgeladen und ausgewählt werden.

<https://player.vimeo.com/video/25132761?portrait=0>

*Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch im Album ["WordPress Tutorials"](https://vimeo.com/showcase/1573897) auf unserer Vimeo-Seite.*

## Hilfreiche Code-Schnipsel aus dem Video

Code der header.php Datei (für Webseiten-Logo, Hauptmenü und Headerbild):

```
<header id="branding" role="banner">
	<nav id="mainnav" class="clearfix">
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</nav><!-- end mainnav -->
			
	<hgroup id="site-title">
		<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php bloginfo( 'template_directory' ); ?>/images/custom-logo.png" alt="<?php bloginfo('name'); ?>" /></a>
	</hgroup><!-- end site-title -->
			
	<?php if ( get_header_image() ) : ?>
		<img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /><!-- end headerimage -->
	<?php endif; ?>
</header><!-- end branding -->
```

Der Code für die Integration der Design/Kopfzeile Option in der functions.php (hier in einer vereinfachten Version nach Vorlage des originalen Codes im TwentyTen-Theme, das Standardbild "ginko.jpg" befindet sich im Ordner images/headers):

```
// Your changeable header business starts here
	define( 'HEADER_TEXTCOLOR', '' );
	// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
	define( 'HEADER_IMAGE', '%s/images/headers/ginko.jpg' );

	// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to yoko_header_image_width and yoko_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yoko_header_image_width', 1102 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yoko_header_image_height', 350 ) );

	// Don't support text inside the header image.
	define( 'NO_HEADER_TEXT', true );

	// Add a way for the custom header to be styled in the admin panel that controls
	// custom headers. See yoko_admin_header_style(), below.
	add_custom_image_header( '', 'yoko_admin_header_style' );

	// ... and thus ends the changeable header business.

	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
			'ginko' => array(
			'url' => '%s/images/headers/ginko.jpg',
			'thumbnail_url' => '%s/images/headers/ginko-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Ginko', 'yoko' )
			)
	) );
}
endif;

if ( ! function_exists( 'yoko_admin_header_style' ) ) :

/**
 * Styles the header image displayed on the Appearance > Header admin panel.
 * Referenced via add_custom_image_header() in yoko_setup().
 */
function yoko_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
	border-bottom: 1px solid #000;
	border-top: 4px solid #000;
}
/* If NO_HEADER_TEXT is false, you would style the text with these selectors:
	#headimg #name { }
	#headimg #desc { }
*/
</style>
<?php
}
endif;
```

Ich hoffe auch dieser Teil meines WordPress Video-Tutorials kann dir wieder bei der Umsetzung eigener WordPress-Themes weiterhelfen. Wenn du Fragen oder Anregungen zum Video hast, schreibe mir doch einfach einen Kommentar. Ich freue mich auf dein Feedback!

## Weitere Teile des WordPress Video-Tutorials

- [WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes](https://elmastudio.de/wordpress-video-tutorial-teil-7-header-und-hauptmenu-eines-themes/)
- [WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren](https://elmastudio.de/wordpress-video-tutorial-teil-6-wordpress-testdaten-importieren/)
- [WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag](https://elmastudio.de/wordpress-video-tutorial-teil-5-css3-media-queries-und-der-viewport-meta-tag/)
- [WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen](https://elmastudio.de/wordpress-video-tutorial-teil-4-das-theme-layout-anlegen/)
- [WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung](https://elmastudio.de/wordpress-video-tutorial-teil-3-die-theme-ubersetzung/)
- [WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme](https://elmastudio.de/wordpress-video-tutorial-teil-2-das-toolbox-blank-theme/)
- [WordPress Video-Tutorial Teil 1: WordPress lokal installieren](https://elmastudio.de/wordpress-video-tutorial-teil1-wordpress-lokal-installieren/)