Verwendest du Uikit3 oder auch ein anderes CSS Framework, kann es sein das deine WordPress Submenüs angepasst werden müssen. In diesem Beitrag erfährst du wie du wie man den WordPress Menü Walker dafür anpasst.
Du programmierst ein custom WordPress Theme und fügst irgendwo in deinem Theme eine Mainnav ein:
$args = [
'container' => '',
'theme_location' => 'mainnav',
];
wp_nav_menu( $args );Dein Menü beinhaltet ein Untermenü und die Ausgabe in deinem Frontend könnte so aussehen:
<ul class="uk-navbar-nav">
<li id="menu-item-1" class=" ... ">
<a class="nav-link" href="https://deine-domain.de/">Startseite</a>
</li>
<li id="menu-item-2" class=" ... ">
<a class="nav-link" href="#">Mehr</a>
<ul class="sub-menu">
<li id="menu-item-3" class=" ... ">
<a class="nav-link" href="https://deine-domain.de/ueber-mich/">über Mich</a>
</li>
<li id="menu-item-4" class=" ... ">
<a class="nav-link" href="https://deine-domain.de/kontakt/">Kontakt</a>
</li>
</ul>
</li>
</ul>Das gewünschte Ergebnis:
Damit die Menü Struktur kompatibel mit der von Uikit3 ist, müssen wir die Ausgabe wie folgt anpassen: Das <ul> Tag des Submenüs muss mit einem <div class="uk-navbar-dropdown"> umschlossen werden und benötigt zwei zusätzliche Klassen uk-nav uk-navbar-dropdown
Als kleines Extra fügen wir für Submenus noch einen Indikator via uk-icon mit ein (Zeile 8.) und tauschen das <a> Tag mit einem <span> Tag aus, wenn der Top Level Link ein “Platzhalter-Link” ist (Zeile 6).
Zusätzlich prüfen wir ob das Menu Item gerade aktiv ist und fügen die UiKit Klasse uk-active auf das Element.
Das neue Menü HTML sieht dann so aus:
<ul class="uk-navbar-nav">
<li id="menu-item-1" class=" ... ">
<a class="nav-link" href="https://deine-domain.de/">Startseite</a>
</li>
<li id="menu-item-2" class=" ... ">
<span class="uk-navbar-item">
Mehr
<span data-uk-icon="icon: chevron-down"></span>
</span>
<div class="uk-navbar-dropdown">
<ul class="sub-menu uk-nav uk-navbar-dropdown-nav">
<li id="menu-item-3" class=" ... ">
<a class="nav-link" href="https://deine-domain.de/ueber-mich/">über Mich</a>
</li>
<li id="menu-item-4" class=" ... ">
<a class="nav-link" href="https://deine-domain.de/kontakt/">Kontakt</a>
</li>
</ul>
</div>
</li>
</ul>Der Komplette Code: Erweiterung für die Walker_Nav_Menu Klasse
Verwende diesen Code um deine Submenüs direkt mit Uikit3 kompatibel zu machen.
Schritt 1: Neue $args für wp_nav_menu() angeben
Füge folgende neue Argumente in deine Menüausgabe ein.
$args = [
....
'walker' => new \UikitWalker(),
'show_dropdown_icon' => true
];
wp_nav_menu( $args );Dadurch sagst du dem WordPress Menü es soll deinen neuen Walker verwenden und setzt noch eine Option für die Anzeige des Uikit Icon Indikators.
Schritt 2: Neue Klasse “UikitWalker” in dein Theme einfügen
Füge folgende Klasse in deine functions.php oder an anderer Stelle in deiner Theme Architektur ein.
class UikitWalker extends \Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args=[], $id = 0 ) {
// Fügt .uk-active Class auf Current Menu Item ein.
if( in_array('current-menu-item', $item->classes) ) {
$item->classes[] = 'uk-active ';
}
// Fügt das Top Level Menu Item ein.
$output .= "<li class='" . implode( ' ', $item->classes ) . "'>";
// Prüfe ob das Menu item ein Platzhalter Link ist.
if ( $item->url && '#' !== $item->url ) {
// Das Menu Item ist ein echter Link, behalte die Standard Ausgabe bei.
$output .= '<a href="' . $item->url . '">';
} else {
// Das Menu Item ist ein "Platzhalter-Link", ändere <a> zu <span>
$output .= '<span class="uk-navbar-item">';
}
// Fügt den Titel erneut in das Menu Item ein.
$output .= $item->title;
// Prüfe ob das Menu item ein Platzhalter Link ist.
if ( $item->url && '#' !== $item->url ) {
// Prüfe ob das Menu Item ein Submenu hat und ob wir ein Dropdown Icon anzeigen möchten.
if ( $args->walker->has_children && $args->show_dropdown_icon ) {
// Fügt ein UiKit3 Icon nach dem Menu Titel ein.
$output .= '<span data-uk-icon="icon:chevron-down"></span>';
}
// Das Menu Item ist ein echter Link, schließe ein <a> Tag.
$output .= '</a>';
} else {
// Prüfe ob das Menu Item ein Submenu hat und ob wir ein Dropdown Icon anzeigen möchten.
if ( $args->walker->has_children && $args->show_dropdown_icon ) {
// Fügt ein UiKit3 Icon nach dem Menu Titel ein.
$output .= '<span data-uk-icon="icon:chevron-down"></span>';
}
// Das Menu Item ist ein "Platzhalter-Link", schließe ein <span> Tag.
$output .= '</span>';
}
// Prüfe ob dieser Menüpunkt ein Submenu hat und füge ein div ein.
if ( $args->walker->has_children ) {
// Hier wird das .sub-menu noch mit dem UiKit3 benötigten Wrapper umzogen.
$output .= '<div class="uk-navbar-dropdown">';
}
// $depth 1 = Das erste Submenu
if ( 1 === $depth ) {
// Ersetze das ul.submenu mit neuen Klassen 'uk-nav uk-navbar-dropdown-nav'
$output = preg_replace('<ul class="sub-menu">', 'ul class="sub-menu uk-nav uk-navbar-dropdown-nav" ', $output, 1);
}
}
function end_lvl( &$output, $depth = 0, $args = [] ) {
// Schließt <ul class="sub-menu uk-nav uk-navbar-dropdown-nav">
$output .= '</ul>';
}
}Deine Submenüs sind nun kompatibel mit Uikit3 Dropdowns.
