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
Code-Schnipsel aus dem Video

Im HTML5 header-tag werden wird das Hauptmenü sowie der Seitentitel und Untertitel des Themes eingeschlossen.

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

Der Headerbereich im Stylesheet inklusive Dropdown-Menü:

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

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