Agregar marcado personalizado al menú de WordPress

6 minutos de lectura

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

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

Esta es la etiqueta que estoy usando en el tema para mostrar el menú en este momento:

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

Por el momento, mi marca de menú predeterminada 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>

Necesito agregar 2 div alrededor de cada uno <ul class="sub-menu">...</ul>
Así que necesitaría que el marcado se viera 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>
   <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?

Según la documentación de WordPress http://codex.wordpress.org/Function_Reference/wp_nav_menu#Examplesimplemente agregue un Walker al 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 su tema, agregue 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";
    }
}

Condicionalmente, podemos comprobar el valor de $profundidad para generar marcas personalizadas solo para los subniveles deseados;

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

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

Si observa las funciones en la clase, puede ver dónde se genera el marcado real.

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

Esto puede ayudar:

Combine wp_nav_menu() con una clase de caminante personalizada

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

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

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

Podría usar una función jQuery .wrap, como

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

No olvide agregar el jQuery .js adecuado a su encabezado.

Probablemente deberías usar una función .ready() también.

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

En la base de datos, busque 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 realizar cambios en vivo y ver el resultado al instante.

Para usar un menú de navegación personalizado en lugar del menú predeterminado de su tema, debe registrarse la compatibilidad con esta función en el menú del tema. funciones.php expediente.

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

¿Ha sido útil esta solución?