WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes

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.

<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
Ähnliche Artikel anschauen
  1. WordPress Video-Tutorial Teil 8: individuelles Logo- und Headerbild
  2. WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
  3. WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
  4. WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
  5. WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
  6. WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme

Ellen

Finde mich bei: Twitter, Facebook, Google+ und Pinterest.

Hi, ich bin Ellen - WordPress-Theme-Entwicklerin und Bloggerin bei Elmastudio. Ich liebe das Internet, Reisen, Vegan-Thaifood, Neuseeland und jede Menge Kaffee grünen Tee.

Kommentare (16) Schreibe einen Kommentar

  1. Wow, super tutorial. Bin erst vor ein paar Tagen auf euere Webseite gestoßen. Großes Lob an euch. Eine super anlaufstellen für alle die WordPress bzw. etwas über Webdsign lernen wollen.

    Antworten

  2. Hier kann ich mich meinem Vorredner wirklich anschließen, denn mit euren Videotutorials helft ihr sicherlich ganz vielen Leute weiter, die verzweifelt versuchen, etwas eigenes auf die Beine zu stellen.

    Antworten

  3. Echt eine super Tutorial Serie!
    Habe mir schon ein Buch gekauft in dem erklärt wird wie man ein WordPress Theme erstellt, aber die Videos machen das viel anschaulicher und schnell verständlicher.

    Werde mein Theme auch mal ein bisschen anpassen…

    Viele Grüße
    Vincent

    Antworten

  4. @Daniel, @Matthias, @Vincent,

    vielen herzlichen Dank für euer nettes Feedback zur Video-Tutorial Serie :-) Anfangs hatte ich ja noch etwas Probleme mit der Tonqualität, aber seit ich diese zum Glück in den Griff bekommen habe, machen mir die Tutorials total viel Spaß. Und es freut mich sehr zu hören, dass sie anderen bei der Arbeit mit WordPress weiterhelfen können :-)

    Viele Grüße,
    Ellen

    Antworten

  5. Wow, wieder mal klasse gemacht. So verständlich wie in euren Videos findet man solche Tutorial eigentlich nirgendwo. Vielen Dank…

    Antworten

    • Hallo Uwe,

      vielen herzlichen Dank für das tolle Feedback. Es freut uns so sehr, wenn ich mit den Tutorials weiterhelfen können. Außerdem machen die Aufnahmen auch wirklich jede Menge Spaß :-)

      Viele Grüße,
      Ellen

      Antworten

  8. Liebe Ellen, dein Blog ist klasse. Ich arbeite mich gerade von Tutorial zu Tutorial. Möchte langsam mein neues Design aufbauen – habe jetzt das Theme Toolbox so bearbeitet wie du es gemacht hast. Nur eine Frage: Das Design sieht bei mir genau so aus wie bei dir (beim Schritt 7). Wenn ich aber in einen Artikel klicke dann steht plötzlich eine Sidebar neben dem Footer und zerrupft mir das ganze Theme. War das bei dir zu diesem Zeitpunkt ebenfalls?
    Lieber Gruss
    Jonas

    Antworten

    • Das war bei mir auch so. Ich habe diese zwei Zeilen aus der content.php an das Ende der header.php verschoben. Danach hat es bei mir funktioniert.

      <div id="wrap">
      <div id="main">

      lg, Detlef

      Antworten

  9. Hallo zusammen,

    ich habe mir heute morgen das Pohutukawa Theme gekauft, das Kopfbild in der Größe angepasst (Dank einem Tutorial von dieser Seite) und nun möchte ich gerne noch den Seitentitel nach unten oder oben, links oder rechts verschieben. Es gefällt mir nicht, dass es mit dem Trennstrich genau durch die Mitte des Bildes geht.

    Könnte mir bitte jemand einen Tipp geben?

    Danke und Grüße aus Berlin,

    René

    Antworten

  10. Pingback: WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung | Elmastudio

  11. Pingback: WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen | Elmastudio

  12. Super Video-Reihe!
    Versuche mich gerade an einem vernünftigen Design :) Die Videoreihe hier ist wirklich hilfreich!

    Antworten

  13. Auch ich möchte mich meinen Vorrednern anschließen. Die Tutorials sind echt super gut gemacht. Vor allen Dingen sind sie allumfassend; auf anderen Seiten findet man oft nur “Schnipsel” die einem beim Aufbau von Seiten und dergleichen helfen. Bisher habe ich mir die Anleitungen aufmerksam durchgelesen und die Videos angeschaut. Jetzt kann ich es kaum erwarten, meine Homepage in WordPress zu integrieren. bin mal gespannt ob ich das alles hinkriege.
    Vielen Dank für die hilfreichen Tuts. Weiter so!

    Antworten

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.