Geposted am: Dienstag, 02. Juli 2013
Ihr habt ein schönes HTML Design und wollt dieses in WordPress umsetzten? Das kann mit unter schwierig werden, vor allem von man mit vorgefertigten Layout Templates arbeitet. Man kann natürlich sein CSS Code dahingehend anpassen, dass man auch bei den von WordPress gesetzten Klassen nutzten kann. Schwierig wird es dann nur, wenn man das Menü nicht als Liste ausgeben will.

So, genug der Vorwort, kommen wir nun zum Eingemachten.

Bevor wir überhaupt was ausgeben können, müssen wir unser Theme anweisen, eine Navigation zu erzeugen. Dazu öffnet man die functions.php und fügt folgende Passage ein, um Menüs über das Thememenü zu erzeugen.

function register_my_menus() {
  register_nav_menus(
	array( 'my-custom-menu' =>'Navigationsname')
  );
}
add_action( 'init', 'register_my_menus' );

Wichtig ist, dass der Name der Funktion und der zweite Parameter bei add_action gleich sind. my-custom-menu ist der interne Name des Menüs. Diesen brauchen wir auch später beim ausgeben. Navigationsname ist der  Name der in der Menüerstellung ausgegeben wird.  Damit ist auch schon die komplette Vorarbeit abgeschlossen. Kommen wir nun zur Ausgabe.

Als erstes gehen wir an die Stelle, wo es ausgegeben werden soll. So sieht diese aus:

<?php
$menu_name = 'my-custom-menu';
$menu_list = '<ul>';

if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
	$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

	$menu_items = wp_get_nav_menu_items($menu->term_id);
	$submenu_open = false;
	$i = 0;
	foreach ( (array) $menu_items as $key => $menu_item ) 
	{
		if ($menu_item->menu_item_parent != 0 ) 
		{
			$title = $menu_item->title;
			$url = $menu_item->url;
			if($submenu_open == false)
			{
				$menu_list .= "<ul>";
				$submenu_open = true;	
			}
			$menu_list .= '<li class="submenu"><a href="' . $url . '">' . $title . '</a>';
		}
		else
		{
			$title = $menu_item->title;
			$url = $menu_item->url;
			if($submenu_open == true)
			{
				$menu_list .= "</ul>";
				$submenu_open = false;	
			}
			if($i != 0)
			{
				$menu_list .= '</li>';
			}
			$menu_list .= '<li class="mainmenu"><a href="' . $url . '">' . $title . '</a>';
		}
		$i++;
	}

	if($submenu_open == true)
	{
		$menu_list .= "</ul>";
	}

	$menu_list .= "</li></ul>";
}   

echo $menu_list;
?>

Fangen wir ganz oben an. Die erste Variable legt fest, wie unser Menü intern heisst. Als nächstes kommt die Variable, die festlegt, wie das Menü aussehen soll, in dem Fall ein unsortierte Liste (also WordPress-Standart). Nachdem alles  festgelegt wurde, fragt WordPress ab, ob das von uns angeforderte Menü überhaupt existiert. Dann kommt das Auslesen der Menüdaten. Nächste wichtige Variable ist die $submenu_open. Diese benötigen wir, um Untermenüs zu erzeugen. Auch $i wird für diese Funktionalität gebraucht.

Zu guter letzt, wird alles in einer Schleife erzeugt. Die erste Abfrage bezüglich $menu_item->menu_item_parent dient dazu heraus zu finden, ob es sich beim aktuellen Objekt um ein Untermenü handelt oder nicht. Wenn man mit mehr als zwei Ebenen (Hauptebene, erste Unterebene) arbeiten möchte, muss man dies Verzweigung weiter ausbauen.

So wird dann Schritt für Schritt ein Menü zusammengesetzt und man hat volle Kontrolle über sein Menü.