Aktuelle Seite: Tipps Wordpress Gestaltung Navigations-Menü in Wordpress Themes einbauen

Navigations-Menü in Wordpress Themes einbauen

Das Navigations-Menü ist eine Theme Erweiterung die mit Wordpress 3.0 eingeführt wurde. Es lassen sich auf einfache Weise benutzerdefinierte Menüs in Themes erstellen. Um die Menü-Unterstützung in den Themes zu verwenden, müssen ein paar Code-Segmente zu den Theme Dateien hinzufügt werden.

 

Inhalt

1 Ändern der functions.php

2 Die Menü-Position in den Template-Dateien hinzufügen

3 Admin-Bereich

4 Menüs für Login

5 Funktionsübersicht

 

Änderungen in der functions.php

Als Erstens muss im Theme in der functions.php eine Funktion definiert werden, die die Namen der Menüs registriert. Diese erscheinen dann im Admin unter Design – Menüs.

 

In diesem Beispiel erscheint im Menü ein Header Menü.

 

function register_my_menus() {
  register_nav_menus(
    array('header-menu' => __( 'Header Menu' ) )
  );
}

 

Und bei zwei Menüoptionen würde es so aussehen, Header-Menü und Extra-Menü.

 

function register_my_menus() {
  register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ),
                        'extra-menu' => __( 'Extra Menu' ))
  );
}

 

Um die Menü-Optionen zu aktivieren muss folgender Code noch hinzugefügt werden.

 

 add_action ('init', 'register_my_menus');

 

Dies teilt dem Theme mit, dass die Funktion ausgeführt werden soll.

 

Nun müssen noch die Positionen in den Template-Dateien definiert werden.

Sobald das erledigt ist, ist das Theme fast fertig. Als nächsten Schritt muss man dem Theme mitteilen, wo die Menüs angezeigt werden sollen. Dies wird in der betreffenden Theme-Datei vorgenommen. So zum Beispiel müsste das Header-Menü in die header.php. Der Code der hier verwendet wird ist “wp_nav_menu”, er wird für die Menü-Position benötigt. Die betreffende Datei im Theme Editor öffnen, und entscheiden, wo das Menü positioniert werden soll.

 

So wird dieser Code eingefügt.

 <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

 

“header-menu” ist der Name für den Code. Im Admin-Menü wird “Header Menu” ohne Bindestrich verwendet, das ist in der functions.php definiert.

 

Das “Extra-Menü” kann woanders positioniert werden.

 

Das Menü kann jetzt noch mit einer DIV Klasse versehen werden.

<?php wp_nav_menu( array( 'theme_location' => 'extra-menu',
                                                                    'container_class' => 'my_extra_menu_class' ) ); ?>

Als “my_extra_menu_class” kann das Menü in der CSS definiert werden.

 

Das war es schon.

 

Der Admin - Bereich

Jetzt ist es an der Zeit im Admin-Bereich unter "Design – Menüs" Einstellungen vorzunehmen.

 

Mit den Menü-Konfigurator können nun individuelle Menüs zusammenstellt werden. Dem Menü einen Namen geben und mit den Pull-Down-Optionen bestücken.

 

Menüs für Login

Dieses Beispiel zeigt ein anderes Menü für eingeloggte User.

 

<?php
if ( is_user_logged_in() ) {
wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) ); 
} else {
wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) ); 
} 
?>

 

 

 

Funktionsübersicht

Navigationsmenü: register_nav_menus () , register_nav_menu () ,

wp_nav_menu ()

<?php $defaults = array(
'theme_location'  => ,
'menu'            => ,  
'container'       => 'div',  
'container_class' => 'menu-{menu slug}-container',  
'container_id'    => ,  
'menu_class'      => 'menu',  
'menu_id'         => ,        // ID des ul-Elements
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => ,      // TEXT vor dem <a>
'after'           => ,       // TEXT nach dem </a>
'link_before'     => ,    // TEXT vor dem Link-Text
'link_after'      => ,      // TEXT nach dem Link-Text
'depth'           => 0,
'walker'          => );
?>

Kommentare   

0 #11 Dino 2014-02-25 14:02
zitiere Michael:
Ich versuch rauszufinden warum bin allerdings extre verblüfft :)

Beim Seiten-Erstelle n: rechts unten bei Seiten ausschließen, das Häkchen raus (Include this page in lists of pages)
-1 #10 Manni 2012-10-08 10:53
Hallo Matti,

jeder Listenpunkt hat eine eigene ID oder Klasse.
Über CSS können für jeden Punkt auch mehrere Grafiken zugeordnet werden.
0 #9 Matti 2012-10-08 10:05
Ich suche schon ewig, gibt es auch die Möglichkeit sowas mit Grafiken umzusetzen? Also das jeder Punkt im Headermenü eine eigene Grafik zugeordnet bekommt?
-1 #8 Chris 2012-09-03 21:30
diese captchas!!!! mein text is weg :cry:

kurz gesagt: DANKE!!!!! SAUGEIL, kurz und knapp; in zwei Minuten habe ich einem alten Theme die Menüs verpasst. :-)
0 #7 Chris 2012-09-03 21:29
Saugeil! 1000 Dank 8)

Steht bestimmt irgendwo anners auch nochmal, aber das hier hab ich gleich über google bekommen und es hat mir sowas von einfach und unkompliziert geholfen ein uralt Theme mal eben schnell mit Menüs auszustatten; wahnsinn!
-1 #6 Manni 2012-06-10 10:19
Dies kann sein, wenn "wp_page_menu" statt "wp_nav_menu" in der header.php verwendet wird.

Oder das Menü zwar angelegt, aber nicht der Menüposition zugewiesen wurde. Dann verwendet Wordpress automatisch wp_page_menu (siehe oben fallback_cb).
Die Zuweisung erfolgt unter Design->Menüs oben links "Anordnung im Theme".
0 #5 Michael 2012-06-10 09:21
Im Prinzip ganz toll - ich habe nur das Problem das mein Menü einfach JEDE existierende Seite in meinem Theme anzeigt und nicht nur die 3 Punkte des Top Menüs die ich für 'navi_oben' explizit angelegt habe.

Ich versuch rauszufinden warum bin allerdings extre verblüfft :)
+2 #4 Apollo 2012-04-26 18:36
Ganz Großartig,
was mir eine hilfe!
0 #3 Ayari 2012-04-20 10:30
Super vielen danke, das hab ich tage lange gesucht..... :lol:
0 #2 Kerstin 2012-04-08 22:15
Ich wurschtel seit Stunden hier rum und bin nun endlich über die Goggle Suche hier gelandet, und was soll ich sagen?

5 Minuten und alles lief! Bombig, ich komme wieder!

Vielen Dank