secundario - wordpress menu enlace personalizado

Agregue marcas personalizadas al menú de Wordpress

Question

He estado buscando durante mucho tiempo una solución a este problema, pero no encontré nada, por lo que ustedes serán mi última esperanza.

Intento 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 para mostrar el menú en este momento:

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

Por el momento, mi marcado de menú predeterminado 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''s alrededor de cada <ul class="sub-menu">...</ul> Así que necesitaría el marcado para que se vea 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?

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, 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 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

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

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

No olvides agregar jQuery .js adecuado a tu encabezado.

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

Answer 3

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

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

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

Answer 4

Esto puede ayudar:

Combine wp_nav_menu () con una clase personalizada walker

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/

Answer 5

Según la documentación de Wordpress http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example , simplemente 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 verificar el valor de $ depth para generar el marcado personalizado solo para los subniveles deseados;

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