Come posso aggiungere un div intorno wordpress ul contenitore

Question

Wordpress uscite miei menu bambino dentro questo tag ul ...

<ul class="sub-menu"> 

come posso avvolgere un semplice div intorno ad esso?

Preferibilmente un modo per farlo tramite functions.php, ma jquery può funzionare anche.

Answer 1

Mentre sarebbe FACILE usare qualcosa come jQuery per avvolgere i menu figli, NON è una buona pratica usare jQuery per questo scopo. Mettere questo in functions.php:

class Child_Wrap extends Walker_Nav_Menu 
{ 
    function start_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<div class=\"custom-sub\"><ul class=\"sub-menu\">\n"; 
    } 
    function end_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent</ul></div>\n"; 
    } 
} 

Sto assumendo che il vostro menu viene generato nella tua intestazione, in modo da andare a header.php (o qualsiasi file che sta utilizzando la funzione wp_nav_menu) e cercare tutto ciò che inizia con "wp_nav_menu".

Poiché non ho alcun codice da vedere, posso solo indovinare gli argomenti che sta usando (se esiste). Se sembra esattamente come "wp_nav_menu()" con niente in mezzo parentesi, poi modificarlo al seguente:

wp_nav_menu(array('walker' => new Child_Wrap())) 

In caso contrario, si prega di modificare la tua domanda con il codice che il menu sta usando in modo da posso aiutarti ulteriore.

Answer 2

Nel function.php

class Child_Wrap extends Walker_Nav_Menu 
{ 
    function start_lvl(&$output, $depth) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<div class=\"sub-menu-wrapper\"><ul class=\"sub-menu\">\n"; 
    } 
    function end_lvl(&$output, $depth) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent</ul></div>\n"; 
    } 
} 

chiamata alla funzione cui si trova il wp_nav_menu. (Es: header.php)

$defaults = array('container' => 'ul', 'menu_class' => 'scroll', 'menu_id' => 'main-menu-nav' , 'walker' => new Child_Wrap()); 

wp_nav_menu($defaults); 

Se si vuole fare questo usando jQuery , è possibile farlo come segue.Ma i modi migliori sono i primi metodi.In questo punto a volte viene visualizzato come disordinato il menu quando si carica la pagina.

jQuery('ul.sub-menu').wrap('<div class="sub-menu-wrapper" />');