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):
<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):
// 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
- WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
- WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
- WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
- WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
- WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
- WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
- WordPress Video-Tutorial Teil 1: WordPress lokal installieren
Schreibe einen Kommentar