Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 2 von 2
  1. #1
    PostRank: 0
    Registriert seit
    26.05.2015
    Beiträge
    4

    UiKit Menü mit Custom Walker

    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:

    HTML-Code:
    <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-Code:
    <?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 ) {
            
    $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:

    PHP-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 ) {        $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        );    }

    PHP-Code:
    <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!

  2. #2
    PostRank: 0
    Registriert seit
    26.05.2015
    Beiträge
    4
    Ich denke ich habe die Lösung. Zumindest scheint es jetzt zu funktionieren!
    Hier gab es einen Ansatz: http://wordpress.stackexchange.com/q...ker-class-work

    Mein Code sieht jetzt so aus:

    functions.php

    PHP-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 ) {
            if ( 
    array_search'menu-item-has-children'$item->classes ) ) {            $output .= sprintf"\n<li class='test %s'><a href='%s' class=\"dropdown-toggle\">%s</a>\n", ( array_search'current-menu-item'$item->classes ) || array_search'current-page-parent'$item->classes ) ) ? 'active uk-active' ''$item->url$item->title );        } else {            $output .= sprintf"\n<li %s><a href='%s'>%s</a>\n", ( array_search'current-menu-item'$item->classes) ) ? ' class="active uk-active"' ''$item->url$item->title );        }        /*        $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        );*/    }    function start_lvl( &$output$depth ) {        $indent str_repeat"\t"$depth );        $output .= "\n$indent<div class=\"uk-navbar-dropdown\"><ul class=\"uk-nav uk-navbar-dropdown-nav\" role=\"menu\">\n";    }
        function 
    end_lvl( &$output$depth ) {        $output .= "</ul></div>";    }

    Aufruf im Header:

    Code:
    <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( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu', 'container' => 'ul', 'menu_class' => 'uk-navbar-nav uk-visible@m' ) ); ?>
                        <?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 -->

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •