Problem bei CSS class und id setzen mit wp_nav_menu() für customized WordPress Menü

Ziel

In einem WordPress Theme soll ein customized Menü mittels CSS realisiert werden. Dazu sollen selbst definierten Werten für die HTML Attributen class und id verwendet werden z.B. um ein CSS Framework einzubinden. Problem ist das die angedachten CSS Attributwerte für die Attribut id und class, welche in der WordPress Funktion wp_nav_menu() als Argumente definiert wurden, nicht im HTML Quelltext angezeigt werden.

Code

Folgender Code wurde zur Erzeugung des customized Menü’s in der WordPress Theme-Datei header.php eingefügt.

HTML Resultat

Nach dem refresh der WordPress Seite taucht im Quelltext nachfolgender HTML Code auf.

Problem

Bis auf die menu_class wurde kein Attribute im HTML Code mit dem richtigen CSS id oder class gesetzt und das gesetzte Attribute wurde auch noch an der falschen Stelle gesetzt. Somit sieht es für den Laien so aus als würden die Attribute container, container_class und container_id ignoriert werden.

Lösung 1

Grund: für das Problem ist, dass nach der Installation von WordPress und dem aktivieren des neuen Theme kein Menü angelegt wurde, welches mit der theme_location und dem Location-Namen: header-menu verheiratet wurde. Also einfach ein Menü anlegen und mit dem richtigen Theme Location verknüpfen. (siehe Screenshot)

Create_Menu_connect_to_header_wordpress

Anschließend sieht der HTML Code richtig aus aus.
Nach dem refresh der WordPress Seite taucht im Quelltext nachfolgender HTML Code auf.

Der wahre Grund

Da bei dem aktivieren der User nicht immer das richtige Menü angelegt hat und dies dazu führt, dass das Design dadurch negativ in Mitleidenschaft gezogen wird, ist die erste Lösung nicht ganz befriedigend. Wer will schon ein kaputtes Design haben oder CSS nochmal für die Default WordPress CSS Attribute schreiben. Der wahre Grund für das nicht setzen der angegebenen CSS Attribute class und id Werte in wp_nav_menu() ist, dass es dort eine Default Callback Funktion gibt. Diese Default-Callback Funktion Namens wp_page_menu() wird verwendet, wenn kein Menü vom Benutzer im WordPress System angelegt wurde.

Lösung 2

Einfach die Default-Callback Funktion übersteuern!

Hier zu in der function.php eine eigene customized wp_page_menu() Variante anlegen.

Abschließend in der header.php um den eigene Callback ergänzen.

Fertig ist das ganze und der HTML/CSS Code für das Menu (Navigation) wird auch ohne definiertes Menü mit den richtigen CSS id’s und class’s erzeugt.

(Visited 269 times, 1 visits today)

Schreibe einen Kommentar

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