rss
3

Navigationsmenü im WordPress Theme einrichten

Dieser Artikel beschreibt, wie einfach sich eine Navigation bzw. ein Menü mit Rollover Effekten in einem WordPress Blog einrichten läßt. Es sind lediglich 2-3 Schritte dazu notwendig!

Anleitung: Navigationsmenü im WordPress Theme in 2-3 Schritten einrichten

Schritt 1:

Das folgende Coding in die header.php vor das Tag </body> einfügen. Natürlich sind meine Links und Texte zu ersetzen. Wenn nicht, freue ich mich über viele Backlinks! :-)

<div id=“menulinks“>
<ul id=“navlist“>
<li><a href=“http://weblog-abc.de/wordpress-themes“>WordPress Themes</a></li>
<li><a href=“http://weblog-abc.de/blogg-tipps-tricks/die-besten-wordpress-plugins-696.html“>WordPress Plugins</a></li>
<li><a href=“http://weblog-abc.de/category/geld-verdienen“>Geld verdienen im Internet</a></li>
<li><a href=“http://weblog-abc.de/blogg-tipps-tricks/liste-der-besten-seo-tools-110.html“>Die besten SEO-Tools</a></li>
<li><a href=“http://weblog-abc.de/category/seo-tipps“>SEO Tipps & Tricks</a></li>
</ul>
</div>

Auf vielen Standard-Webseiten ist es ausreichend, den oben aufgeführten Code einzufügen. Schritt 2 sollte daher nur Beachtung finden, wenn die Schritte 1 und 3 nicht zum gewünschten Ergebnis führen.

Schritt 2 (Optional)

Folgende Stelle in der header.php suchen

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>
<div class=”description”><?php bloginfo(’description’); ?></div>
</div>
</div>

und darunter diesen Code einfügen:

<div id=”menulinks”>
<ul id=”navlist”>
<li><a href=”<?php echo get_settings(’home’); ?>”>Home</a></li>
<?php wp_list_pages(’title_li=’); ?>
</ul>
</div>

Schritt 3:

Diesen Abschnitt an das Ende der style.css kopieren:

#menulinks {
height:50px;
width:95%;
margin-top:10px;
margin-left:20px;
margin-right:10px;
clear:both;
background-color:#73a0c5;
text-align:left;
}

ul#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:100%;
}

ul#navlist li {
font-size:10pt;
display:inline;
list-style-type: none;
}

ul#navlist li a {
font-family:Arial;
font-size:14px;
font-weight:bold;
text-align:center;
color: #FFFFFF;
height:33px;
padding-top:17px;
padding-left:15px;
padding-right:15px;
background:none;
display:block;
float:left;
text-decoration: none;
}

ul#navlist li a:hover {
background-color:#2e4876;
}

Das war’s schon. Das Navigationsmenü ist im WordPress Theme eingerichtet und so sieht’s aus:

weblogabc-menu2

Durch eine Änderung in der folgenden WordPress Theme CSS Datei style.css können z.B. die Rollover Farben des Navigationsmenüs geändert werden.

ul#navlist li a:hover {
background-color:#f60;
}

Danach sieht’s so aus:

weblogabc-menu2-orange

Natürlich kann für den Rollover Effekt im Navigationsmenü auch ein Hintergrundbild verwendet werden.

ul#navlist li a:hover {
background-image:url(images/menurollover.png);
}

Das war’s. Viel Spass damit!

Anregungen, Kritik, Fragen usw. gerne in den Kommentaren!

Ähnliche Posts im Web:
Dynamisches Menü mit Hervorhebung von Frank Bültge
CSS Navigation Menue

Mehr über den Autor

Andreas ist Senior Projektmanager in einem der weltweit größten Softwareunternehmen. Nebenbei ist er freier Dozent und lehrt an Fachhochschulen die Themen "Internationales Projektmanagement" und "Softwarearchitektur". Hier im Weblog-ABC gibt Andreas regelmäßig Webmaster, Affiliate und SEO Tipps. Mehr über Andreas und Weblog-ABC.

Social Media - Den Artikel empfehlen!

Kommentare und Trackbacks (3)

Trackback URL | Kommentare RSS Feed

  1. Hallo,
    ich habe versucht, dieses Menü in meine Webseite (header.php und style.css) einzubinden. Nach der Speicherung und Aufruf der Webseite kam die Meldung: fatal error in Line 49,
    nachdem ich in der header.php Step 2 hinzugefügt hatte, in einer anderen Zeile die selbige Meldung.
    Ich verwende Cecilia_Mint als Theme. habe allerdings festgestellt, dass dadurch in der css-datei 2x die gleiche #div Bezeichnung verwendet wird.
    ich möchte im Header die Anzeige der Seiten gänzlich wegtun und in ddie Sidebar auslagern. Das funktioniert auch in einem Widget. Im Header möchte ich gerne ein PullDown Menü + Submenüs mit meinen persönlichen Links haben.
    Wie stellt man das am besten an?
    Ein tipp wäre sehr hilfreich und schön.
    Vielen dank
    mfg
    Franz Klingseisen

  2. Andreas sagt:

    Hallo,
    die 2 gleichen DIV Bezeichungen sollten nicht vorkommen. Daher vermutlich auch der Fehler. Die Anzeigen können in der header.php im Coding relativ leicht entfernt und in die sidebar.php integriert werden. Mit Probieren & Testen sollte das irgendwann klappen. Der Theme Tester hilft dabei. Ich mußte auch hier im Blog sehr lange herumprobieren, bis mir letztendlich das Design halbwegs gefallen hat. Dann haben mich die Leser darauf hingewiesen, dass nicht alles unter Firefox korrekt funktioniert. Ich glaube, eine Webseite ist immer im Continuous Improvement Prozess. Die Arbeit am Design hört nie auf. Ich habe mittlerweile viel dazu gelernt, bin aber (leider) noch kein Webdesigner. Zum PullDown Menü im Header würde ich mir bei anderen Themes Anregungen holen. Da gibt’s einige wirklich tolle Vorlagen.
    Gruß Andreas

  3. Klappt leider nicht, in der Voranzeige ist alles da, dann aber schneidet er alles ab, keine Ahnung warum? Tud leid
    Wie gesagt: ich verwende Cecilia-Mint als Theme
    http://www.fraunz.at/
    danke