Agregue marcas personalizadas al menú de Wordpress

Question

He estado buscando desde hace mucho tiempo una solución a este problema, pero no encontré nada, ¡ustedes serán mi última esperanza!

Estoy tratando de crear un nuevo menú de CSS3 en un sitio de Wordpress 3 en el que estoy trabajando. Tendría que ampliar el margen de menú predeterminado, pero no estoy seguro de cómo.

Esta es la etiqueta que estoy usando en el tema a la salida el menú en la actualidad

<?php wp_nav_menu(array('container_class' => 'menu-header', 'theme_location' => 'primary')); ?> 

En el momento en que mi menú predeterminado margen de ganancia se ve así:

<div class="menu-header"> 
<ul id="menu-main-menu" class="menu"> 
    <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li> 
    <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li> 
    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li> 
</ul> 
</div> 

tengo que añadir 2 dIV de alrededor de cada <ul class="sub-menu">...</ul> Así que necesitaría el margen de beneficio a tener este aspecto:

<div class="menu-header"> 
<ul id="menu-main-menu" class="menu"> 
    <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a> 
    <div class="sub-menu-container"> 
    <div class="submenu"> 
    <ul class="sub-menu"> 
     <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </div> 
    </div> 
    </li> 
    <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a> 
    <div class="sub-menu-container"> 
    <div class="submenu"> 
    <ul class="sub-menu"> 
     <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li> 
     <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li> 
     <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </div> 
    </div> 
    </li> 
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li> 
</ul> 
</div> 

¿Alguien sabe cómo hacer esto, por favor?

Answer 1

No estoy seguro de lo que necesita, pero aquí hay alguna referencia sobre cómo crear un menú personalizado de WP.

En la base de datos, mire en la tabla wp_posts. Aquí es donde se encuentran los elementos del menú de navegación.

Para CSS personalizado puede usar el Editor de CSS. Se puede encontrar en Editar CSS en la pestaña Presentación de su tablero. Consiste en un área en blanco para escribir y dos botones. Puede hacer cambios en vivo y ver el resultado al instante.

Para utilizar un Menú de navegación personalizado en lugar del menú predeterminado de su tema, la compatibilidad con esta característica debe registrarse en el archivo functions.php del tema.

Ver: http://codex.wordpress.org/Navigation_Menus Y http://codex.wordpress.org/Function_Reference/register_nav_menus

Answer 2

Se podía utilizar la función de un jQuery .Wrap, como

$('div.submenu').wrap('<div class="sub-menu-container" />'); 

No se olvide de añadir los js jQuery adecuados a su cabecera.

Probablemente también deba usar una función .ready().

Answer 3

El marcado menú se genera en wp-includes/classes.php con Walker clase, específicamente class Walker_Page extends Walker {

Si se mira a través de las funciones de la clase se puede ver donde se genera el recargo real.

http://codex.wordpress.org/Function_Reference/Walker_Class

Answer 4

Esto puede ayudar:

Combine wp_nav_menu() con una clase Walker encargo

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Combinar wp_get_nav_menu_items() con la función clean_custom_menus()

http://digwp.com/2011/11/html-formatting-custom-menus/

Answer 5

Según la documentación de Wordpress http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example, basta con añadir una andadera para el menú:

<?php wp_nav_menu(array(
    'container_class'=>'menu-header', 
    'theme_location'=>'primary', 
    'walker'=>new my_Walker_Menu_List() //This is the trick! 
)); ?> 

Y luego en el archivo functions.php de tu tema de añadir el siguiente código:

class my_Walker_MegaMenu extends Walker_Nav_Menu{ 
    /** 
    * @see Walker::start_lvl() 
    * @since 3.0.0 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param int $depth Depth of page. Used for padding. 
    */ 
    function start_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     //$output .= "\n$indent<ul class=\"sub-menu\">\n"; //this is default output; 

     //if($depth==0) //'0'==>1st-sub-level; '1'=2nd-sub-level; .... 
     $output .= "\n$indent<div class=\"sub-menu-container\"><div class=\"submenu\"><ul class=\"sub-menu\">\n"; 
    } 

    /** 
    * @see Walker::end_lvl() 
    * @since 3.0.0 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param int $depth Depth of page. Used for padding. 
    */ 
    function end_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     //$output .= "$indent</ul>\n"; //this is default output; 

     //if($depth==0) //'0'==>1st-sub-level; '1'=2nd-sub-level; .... 
     $output .= "$indent</ul></div></div>\n"; 
    } 
} 

condicional, podemos comprobar el valor de $ depth para generar un marcado personalizado solo para los subniveles deseados;

Para obtener más información, se puede ver: http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code