In 7. Teil meines WordPress Video-Tutorials zeige ich, wie man den Header des Themes einrichtet. Dabei bearbeite ich die Theme-Datei header.php und zeige die individuelle Menü-Funktion (Custom Menus) in WordPress. Außerdem kannst du dir im Stylesheet anschauen, wie man ein einfaches Dropdown-Menü für die Hauptnavigation des Themes anlegt.
Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.
Link-Tipps zum Video
- Die kostenlosen Google Webfonts zum Importieren ins Theme. Den @import Link findest du bei jeder Schrift unter „Use this font“ / „Advanced techniques“.
- Auf der Webseite HTML5 Doctor gibt es ein umfangreiches Glossar aller HTML5-Elemente.
- Weitere Infos zur WordPress-Funktion wp nav menu findest du im WordPress Codex.
- Infos im WordPress Codex zur individuellen Menü-Funktion.
Code-Schnipsel aus dem Video
Im HTML5 header-tag werden wird das Hauptmenü sowie der Seitentitel und Untertitel des Themes eingeschlossen.
<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"> <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup><!-- end site-title --></header><!-- end branding -->Der Headerbereich im Stylesheet inklusive Dropdown-Menü:
/* Header--------------------------------------------- */#site-title { padding: 21px 0 15px;}#site-title h1 { margin: 0 10px 0 0; font-size: 2.1em; line-height:1.2; font-weight: bold; text-transform:uppercase; display: block; float: left;}#site-title h1 a:hover { text-decoration:none;}#site-title h2 { font:italic .9em 'Droid Serif', Times, serif; color: #777; margin: 17px 0 0 0;}header#branding img.headerimage { width: 100%; height: auto; margin-top: 12px;}header#branding img.attachment-headerimage.wp-post-image { width: 100%; height: auto;}hgroup#site-title img { max-width: 100%;}/* Navigations--------------------------------------------- *//* --- Main Nav --- */#branding #mainnav { margin: 30px 0 0; max-width: 70%; float:right;}#branding #mainnav ul li { float: left; list-style: none; position: relative;}#branding #mainnav ul li a { margin:0; padding:9px 14px; display: block; font-size: .8em; text-transform: uppercase;}#branding #mainnav ul li:first-child { margin: 0px;}#branding #mainnav ul li a:hover { background:#F0F0F0; color: #999; text-decoration: none;}#branding #mainnav ul ul { display: none; float: left; position: absolute; top: 2em; left: 0; z-index: 99999;}#branding #mainnav ul ul ul { left: 100%; top: 0;}#branding #mainnav ul ul a { background: #F9F9F9; padding: 9px 14px; width: 11em; height: auto; text-transform: none;}#branding #mainnav li:hover > a,#branding #mainnav ul ul :hover > a { background: #F0F0F0;}#branding #mainnav ul ul a:hover { background: #F0F0F0;}#branding #mainnav ul li:hover > ul { display: block;}Das bisherige Stylesheet des Themes kannst du dir hier auch noch einmal komplett herunterladen.
Ich hoffe auch dieser Teil des Tutorials, kann dir wieder bei der Entwicklung deines eigenen WordPress-Themes weiterhelfen. Bei Fragen und weiteren Tipps zum Video schreibe mir doch einfach einen Kommentar. Ich freue mich auf dein Feedback!
Weitere Teile des WordPress Video-Tutorials
- 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