¿Cómo puedo añadir un div contenedor alrededor ul wordpress Wordpress

Question

salidas de mi hijo menús dentro de esta etiqueta ul ...

<ul class="sub-menu"> 

cómo puedo envolver un div sencilla alrededor de ella?

Preferiblemente una forma de hacerlo a través de functions.php, pero jquery también puede funcionar.

Answer 1

Si bien sería FÁCIL usar algo como jQuery para envolver los menús secundarios, NO es una buena práctica usar jQuery para este propósito. Colocar esto en 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"; 
    } 
} 

Estoy asumiendo que su menú se está generando en su cabecera, así que vaya a header.php (o cualquier archivo es la utilización de la función wp_nav_menu) y buscar cualquier cosa que se inicia con "wp_nav_menu".

Como no tengo ningún código para ver, solo puedo adivinar los argumentos que está usando (si corresponde). Si se ve exactamente como "wp_nav_menu()" sin nada entre paréntesis, a continuación, cambiar a la siguiente:

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

De lo contrario, por favor, edite su pregunta con el código que su menú está utilizando para que pueda ayudarle promover.

Answer 2

En el 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"; 
    } 
} 

llamada a la función donde se encuentra su wp_nav_menu. (Ej: header.php)

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

wp_nav_menu($defaults); 

Si quieres hacer esto usando jQuery , puede hacer esto de la siguiente manera. Pero las mejores maneras es el primer método. Aquí a veces se muestra como un desastre el menú al cargar la página.

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