wp_nav_menu: Menüpunkt eindeutig identifizieren

kristianbu

Hallo,

ich bin ganz neu in der WP Welt und auch hier im Forum, deshalb verzeiht mir bitte möglicherweise Anfängerfragen :-)

Ich habe mir ein Menü gebastelt, und lasse dieses im Template über wp_nav_menu darstellen. Die <li> Tags haben im class Tag solch oder ähnliche Angaben zu stehen:

Code

menu-item menu-item-type-post_type menu-item-26

Da ich für jeden Menüpunkt eigene mouse over Grafiken verwende, habe ich das css anhand der Angabe menu-item-xx designt. Nun ist mir aber aufgefallen, dass sich die ID häufiger mal ändern, wenn man an den Menüs etwas verändert oder ich doppelte css Angaben machen muss, wenn eine zugewiesene Seite in mehreren Menüs auftaucht.

Frage: Ist es irgendwie möglich, statt der menu item id den slug der zugewiesenen Kategorie / Seite anzeigen zu lassen. Bsp: Ich habe eine Seite mit dem slug "news". Wünschen würde ich mir dann solch eine (oder ähnliche) css class Angabe:
<li class="menu-item page-news">. So hat ein Link auf meine News Seite immer die gleiche css Klasse, auch wenn meine Seite in mehreren Menüs vor kommt oder ich Menüs verändere / neu strukturiere.

Vielen Dank für eure Hilfe,

Gruß, Kristian

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Art4

Hallo,

ich hatte mal ein ähnliches Problem. Ich habe es so gelöst:

Im Backend kann man bei der Menü-Erstellung einen optionalen Titel für jedes Menü-Element vergeben. Hier habe ich dann manuell für jeden Punkt einen slug Platzhalter gesetzt, zum Beispiel "[menu_slug_home]", "[menu_slug_about]" usw.

Als nächstes habe ich diese Funktion in die functions.php geschrieben:

PHP

<?php
function myown_wp_nav_menu($menu_args, $echo = true)
{
    $menu = wp_nav_menu($menu_args);
    
    $menu_parts = split('<li', $menu);
    
    $main_menu = $menu_parts[0];
    
    for($i = 1; $i < count($menu_parts); $i++)
    {
        if(strpos($menu_parts[$i], '[menu_slug_') !== false)
        {
            $part = $menu_parts[$i];
            
            //Nach menu_slug_ suchen
            $pattern = '#\[menu_slug_([a-z0-9]*)\]#i'; 
            $result = preg_match($pattern, $part, $subpattern);
            
            //Platzhalter entfernen
            $part = str_replace($subpattern[0], '', $part);
            
            //Gefundenen Slug bei class= hinter menu_item setzen
            $part = str_replace('menu-item', 'menu-item menu-' . $subpattern[1], $part);
            
            $menu_parts[$i] = $part;
        }
        
        $main_menu .= '<li' . $menu_parts[$i];
    }
    
    if($echo)
    {
        echo $main_menu;
        return true;
    }
    return $main_menu;
}
?>

Alles anzeigen

In der header.php habe ich dann statt wp_nav_menu() meine eigene Funktion verwendet:

PHP

<?php myown_wp_nav_menu('menu=nav-header&container=ul&menu_class=nav&echo=0'); ?>

Wichtig: Achte darauf, dass echo=0 gesetzt ist!

Diese Funktion holt sich dann das Menü, erkennt den Platzhalter (falls vorhanden) und setzt eine neue CSS-Klasse "menu-[slug]" hinter "menu-item". Der Platzhalter aus dem titel wird entfernt.

Jetzt kannst du im style.css die einzelnen Menüpunkte stylen.

kristianbu

Vielen Dank für deine Antwort. Das ist eine gute Idee. So werde ich es dann auch nutzen. Schade aber, dass es nicht noch eine Möglichkeit direkt in der wp_nav_menu Funktion gibt.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

wp_nav_menu: Menüpunkt eindeutig identifizieren

Jetzt mitmachen!