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 -->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
- 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
Hinterlasse eine Antwort