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

17 Kommentare zu “WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes

  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.

  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.

  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

  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

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

    • 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

      • Thorsten

        Hallo Ellen,
        ich bin gerat dabei für einen für einen Reit und Fahrverein eine Seite mit WP 3.9.1 zu erstellen. Als Theme ist das Twenty Twelve aktiv. Ich habe eine Headergrafik eingesetzt. Die Hintergrundfarbe vom Inhaltsbereich habe ich auch geändert.
        Das gefällt den Leuten wohl. Aber nun stehe ich vor dem Problem mit einem 2 Menü.
        Das integrierte Menü befindet sich zwischen dem Blog-titel und der Headergrafik.
        In das Menü Habe ich nur die Wichtigsten Seiten aufgenommen. Das Theme unterstützt ja nur ein Menü. Die restlichen Seiten habe ich in einem Individuellen Menü untergebracht. Es wird in der Hauptseitenleiste des Standards Template angezeigt.
        Ich hatte die Idee einfach das vorhandene Menü aus der Header.php zu kopieren und es unter die Headergrafik zu setzen. Das klappte auch. Nur mir wird logischer Weise im Backend nur ein Menü angezeigt.
        Ich habe die Glasskugel Google befragt und die hat mir einiges zu lesen gegeben.
        Ich weiß das ich nun noch irgendwo in der function.php das neue Menü anmelden muß. So habe ich das verstanden.
        Meine Frage nun kann ich die Idee so umsetzen, oder liege ich da falsch ?
        Und wo muß ich da dieses Register_wp_nav machen.
        Ich frage Dich deshalb so Direkt, weil ich schon viel über Deine Seite elmastudio gelernt habe. Und hoffe das Du mir auch jetzt helfen würdest.
        Ein lieber Gruß und Danke für die Bemühungen.
        Thorsten Lemke

  6. Hallo Ellen,

    echt klasse Videos die du hier machst. Gefallen mir ausgesprochen gut!

    Danke!

  7. Ja da kann ich mich auch nur anschließen, toll erklärt, danke.
    lg. Susann

  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

    • 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

  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é

    • @René:

      In der style.css einfach mal mit

      #site-title {
      […]
      margin: 0px 0px 0px 0px;
      }

      herumspielen (gewünschte Werte eintragen)

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

  11. 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!

  12. Danke für das Video Tutorial zum Hauptmenü, hat mir sehr gefallen und noch mehr geholfen.

  13. Hallo Elbnetz,

    ich verzweifel gerade. Ich habe Ocean WP und möchte, dass der Header über die gesamte Bildschirmseite geht (er geht nicht ganz bis nach rechts, links ist es ok). Ich dachte, das geht über den Customizer, nicht unbedingt über den Editor.
    Die Seite hat einen Splash Screen.
    Und: Aufeinmal werden die Archiv-Monate doppelt angezeigt (habe Annual Archive). Bisher hatte da niemand eine Lösung.
    Daher hoffe ich sehr auf Euch!
    Vielen Dank für Eure Unterstützung.
    Gruß,
    Bettina

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *