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.



Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch im Album „WordPress Tutorials“ auf unserer Vimeo-Seite.

Hilfreiche Code-Schnipsel aus dem Video

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

[php]
<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 –>
[/php]

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):

[php]
// 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;
[/php]

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