Hallo,
ich wollte gerne ein underscores theme mit UiKit von Yootheme verbinden. Das hat soweit auch geklappt.
Probleme habe ich aber mit dem Menü. Der Aufbau sollte ungefähr so sein:
<nav class="uk-navbar uk-navbar-container uk-margin" uk-navbar>
<div class="uk-navbar-left"> <a class="uk-navbar-toggle uk-hidden@s" href="#"> <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span> </a>
<ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul>
</div>
</nav>-->Ich habe dann das Internet durchsucht und herausgefunden, das das am besten geht wenn man die walker Klasse erweitert. Codex => https://codex.wordpress.org/Class_Reference/Walker
Mit dem gegeben Beispiel:
<?php
class Walker_Quickstart_Menu extends Walker {
// Tell Walker where to inherit it's parent and id values
var $db_fields = array(
'parent' => 'menu_item_parent',
'id' => 'db_id'
);
/**
* At the start of each element, output a <li> and <a> tag structure.
*
* Note: Menu objects include url and title properties, so we will use those.
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$output .= sprintf( "\n<li><a href='%s'%s>%s</a></li>\n",
$item->url,
( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
$item->title
);
}
}Sieht es auch ganz gut aus. Leider habe ich noch folgende Fragen:
1. Die current Klasse scheint nicht zu funktionieren. Ich kann problemlos andere Klassen an die Links ausgeben.
2. Das Submenu wird nicht angezeigt. Es landet alles in der ersten Ebene.
Ich habe schon andere Beispiele für UiKit im Internet gefunden. Nur leider verstehe ich das nicht. Und ich würde es gerne verstehen. :)
Hier mal mein code:
/*** custom walker for ukit menu*/class Walker_Suits_Main_Menu extends Walker {
// Tell Walker where to inherit it's parent and id values var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
/** * At the start of each element, output a <li> and <a> tag structure. * * Note: Menu objects include url and title properties, so we will use those. */ function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { $output .= sprintf( "\n<li><a href='%s'%s>%s</a></li>\n", $item->url, ( $item->object_id === get_the_ID() ) ? ' class="current uk-active"' : '', $item->title ); }
}<nav id="site-navigation" class="main-navigation uk-navbar uk-navbar-container uk-margin" role="navigation" uk-navbar> <div class="uk-navbar-left"> <?php wp_nav_menu(array( 'menu' => 2, //menu id 'container' => 'ul', 'menu_class' => 'uk-navbar-nav uk-visible@m', //'fallback_cb' => 'suits_main_menu_fallback', //'depth' => 1, 'walker' => new Walker_Suits_Main_Menu() //use our custom walker )); ?> </div> <div class="uk-navbar-right"> <ul class="uk-navbar-nav"> <a class="uk-navbar-toggle uk-hidden@m" href="#" uk-toggle="target: #suit-offcanvas-menu"> <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span> </a> </ul> </div> </nav><!-- #site-navigation -->Ich würde mich sehr über Hilfe freuen!