Cum să creezi un meniu dropdown Bootstrap cu wp_nav_menu în WordPress

Question

Cum să creezi un meniu dropdown Bootstrap cu wp_nav_menu în WordPress

27 feb. 2013, 10:27:00

Vizualizări: 16.5K

Voturi: 4

Încerc să construiesc o temă WordPress cu Bootstrap, dar meniul de navigare îmi creează probleme. Aș dori ca dropdown-ul să funcționeze ca în Bootstrap, dar nu știu cum să fac asta.

Acesta este meniul meu:

<ul class="nav">
   <?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
</ul>

Iată ce am în functions.php pentru meniu:

add_action('after_setup_theme', 'blankslate_setup');
function blankslate_setup(){
register_nav_menus(
array( 'main-menu' => __( 'Main Menu', 'blankslate' ) )
);
}

function my_wp_nav_menu_args( $args = '' )
{
    $args['container'] = false;
    return $args;
} // funcție

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Când adaug un submeniu (prin Aspect - Meniuri), acesta este codul generat:

<ul class="nav">
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Părinte</a>
        <ul class="sub-menu">
                <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="#">Copil</a></li>
        </ul>
    </li>
</ul>

Pentru ca meniul meu să funcționeze cu Bootstrap, am nevoie să fie generat astfel:

<ul class="nav">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Părinte <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Copil</a></li>
        </ul>
    </li>
</ul>

Deci am nevoie de:

Adăugarea clasei "dropdown" pentru elementele de meniu care au subelemente
Adăugarea class="dropdown-toggle" data-toggle="dropdown" la elementul .dropdown a
Adăugarea <b class="caret"></b> după numele meniului dropdown (în interiorul elementului .dropdown a)
Adăugarea class="dropdown-menu" la <ul class="sub-menu">

Sper că cineva mă poate ajuta!

Cody

279

meniuri dropdown twitter bootstrap

Comentarii

Dacă cauți pe Github, vei găsi unele funcții personalizate de walker pentru wp_nav_menu pe Bootstrap.

RRikesh

27 feb. 2013 11:28:06

Toate răspunsurile la întrebare

Comentarii

Mulțumesc, o să încerc. Am uitat să încadrez niște cod la punctele 3 și 4 :)

Cody

27 feb. 2013 12:27:34

Ok, acum are sens, cred că codul de mai sus ar trebui să rezolve totul.

Sunyatasattva

27 feb. 2013 12:38:58

crezi că ar exista o modalitate de a face asta în functions.php? Sau în alt fel care să-mi permită să modific doar tema.

Cody

27 feb. 2013 12:49:12

Poți folosi asta în totalitate în functions.php, poate folosește un include către un fișier extern pentru a păstra lucrurile mai organizate, dar asta e tot.

Sunyatasattva

27 feb. 2013 13:55:39

Mulțumesc! Mi-ai salvat ziua, funcționează perfect :)

Cody

27 feb. 2013 14:17:45

Pentru a rezolva problema meniului derulant ar trebui să:

accesați fișierul class-wp-bootstrap-navwalker.php

căutați

$atts['data-toggle'] ="dropdown";

și înlocuiți cu

$atts['data-bs-toggle'] ="dropdown";

moaz studio استديو معاذ

1

3 mar. 2021 07:59:34

Sunyatasattva 1.63K · Accepted Answer · 2013-02-27T11:58:59Z

Va trebui să scrii un walker personalizat care extinde clasa Walker_Nav_Menu, aproximativ astfel:

class My_Custom_Nav_Walker extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= "\n<ul class=\"dropdown-menu\">\n";
   }

   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       $item_html = '';
       parent::start_el($item_html, $item, $depth, $args);

       if ( $item->is_dropdown && $depth === 0 ) {
           $item_html = str_replace( '<a', '<a class=\"dropdown-toggle\" data-toggle=\"dropdown\"', $item_html );
           $item_html = str_replace( '</a>', ' <b class=\"caret\"></b></a>', $item_html );
       }

       $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
        $element->classes[] = 'active';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = 'dropdown';
            } elseif ( $depth === 1 ) {
                // Nivel suplimentar de meniu dropdown,
                // așa cum se vede în http://twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = 'dropdown-submenu';
            }
        }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

Nu sunt sigur ce ai nevoie la punctele 3 și 4, totuși.