Menu a discesa Bootstrap con wp_nav_menu in WordPress

Question

Menu a discesa Bootstrap con wp_nav_menu in WordPress

27 feb 2013, 10:27:00

Visualizzazioni: 16.5K

Voti: 4

Sto cercando di creare un tema WordPress con Bootstrap, ma il menu di navigazione mi sta dando qualche problema. Vorrei che il menu a discesa funzionasse come quello di Bootstrap, ma non so come fare.

Questo è il mio menu:

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

Questo è ciò che ho nel mio functions.php per il menu:

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

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

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Quando aggiungo un elemento del sottomenu (tramite Aspetto - Menu) questo è ciò che viene generato attualmente:

<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="#">Genitore</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="#">Figlio</a></li>
        </ul>
    </li>
</ul>

Per far funzionare il mio menu con Bootstrap ho bisogno che il menu venga generato così:

<ul class="nav">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Genitore <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Figlio</a></li>
        </ul>
    </li>
</ul>

Quindi ho bisogno di:

Aggiungere la classe "dropdown" se un menu-item ha elementi figlio
Aggiungere class="dropdown-toggle" data-toggle="dropdown" all'elemento .dropdown a
Aggiungere <b class="caret"></b> dopo il nome del menu a discesa (all'interno dell'elemento .dropdown a)
Aggiungere class="dropdown-menu" a <ul class="sub-menu">

Spero che qualcuno possa aiutarmi!

Cody

279

menu dropdown twitter bootstrap

Commenti

Se cerchi su Github, troverai alcune funzioni walker personalizzate per wp_nav_menu su Bootstrap.

RRikesh

27 feb 2013 11:28:06

Tutte le risposte alla domanda

Commenti

Grazie, proverò. Mi sono dimenticato di racchiudere del codice nei punti 3 e 4 :)

Cody

27 feb 2013 12:27:34

Ok, ora ha senso, penso che il codice sopra dovrebbe occuparsi di tutto.

Sunyatasattva

27 feb 2013 12:38:58

pensi che ci sarebbe un modo per farlo nel functions.php? O in qualche altro modo che mi permetterebbe di modificare solo il tema.

Cody

27 feb 2013 12:49:12

Puoi tranquillamente usare questo nel tuo functions.php, magari utilizzando un include per un file esterno per mantenerlo un po' più pulito, ma è tutto qui.

Sunyatasattva

27 feb 2013 13:55:39

Grazie! Mi hai salvato la giornata, funziona perfettamente :)

Cody

27 feb 2013 14:17:45

Per risolvere il problema del menu a discesa dovresti:

andare nel file class-wp-bootstrap-navwalker.php

cercare

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

e sostituirlo con

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

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

1

3 mar 2021 07:59:34

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

Dovrai scrivere un walker personalizzato che estende Walker_Nav_Menu, più o meno così:

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 ) {
                // Livello extra di menu a discesa,
                // come visto in http://twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = 'dropdown-submenu';
            }
        }

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

Non sono sicuro di cosa ti serva con i punti 3 e 4, però.