Personalizar wp_nav_menu en Wordpress
Buenas ... estoy teniendo problemillas para personalizar un menu de navegación en Wordpress que maqueté en html y css.
1. Como puedo darle clases a los li de la lista ??
2. Como puedo añadir html personalizado al comienzo de la lista ??
<!-- Esta es la función que estaba creando -->
<?php wp_nav_menu(array(
'theme_location'=>'nav-top',
'menu'=>'nav-top',
'container'=>'nav',
'container_class'=>'container90 navTop',
'menu_class'=>'horizontalList wrapper90',
));
?>
<!-- Esta es la navegacion que quiero crear con la función -->
<nav class="container90 navTop">
<ol class="horizontalList wrapper90">
<!-- Este es un elemento que he creado para hacer responsive
la navegacion sólo con css y nada de javascript -->
<!-- Este es uno de los PROBLEMAS -->
<label for="checkboxNavTop" class="btnNavTop">
<li class="icon-menu hidden "></li>
</label>
<input type="checkbox" id="checkboxNavTop"class="checkNavTop hidden ">
<!-- ===================================================== -->
<li class="itemPrimary"><a href="index.php">INICIO</a></li>
<li class="itemPrimary"><a href="empresa.php">EMPRESA</a></li>
<li class="itemPrimary"><a href="servicios.php">SERVICIOS</a></li>
<li class="itemPrimary">PRODUCTOS
<div class="MenuSecundary">
<ul class="colMenuSecundary">
<img src="<?php bloginfo('template_directory');?>/img/navtop/secundaryMenu/img1.jpg" alt="" class="imgMenuSecundary">
<img src="<?php bloginfo('template_directory');?>/img/navtop/secundaryMenu/img2.jpg" alt="" class="imgMenuSecundary">
</ul>
<ul class="colMenuSecundary">
<li class="itemMenuSecundary "><a href="sillas.php">Sillas</a></li>
<li class="itemMenuSecundary"><a href="sillones.php">Sillones</a></li>
<li class="itemMenuSecundary"><a href="modulos.php">Módulos</a></li>
<li class="itemMenuSecundary"><a href="modulos.php">Mesas</a></li>
<li class="itemMenuSecundary"><a href="taburetes.php">Taburetes</a></li>
<li class="itemMenuSecundary"><a href="rotomoldeo.php">Rotomoldeo</a></li>
</ul>
<ul class="colMenuSecundary">
<li class="itemMenuSecundary"><a href="tumbonas.php">Tumbonas</a></li>
<li class="itemMenuSecundary"><a href="parasoles.php">Parasoles</a></li>
<li class="itemMenuSecundary"><a href="complementos.php">Complementos</a></li>
<li class="itemMenuSecundary"><a href="taburetes.php">Tableros</a></li>
<li class="itemMenuSecundary"><a href="armazones.php">Armazones</a></li>
</ul>
</div>
</li>
<li class="itemPrimary"><a href="contacto.php">CONTACTO</a></li>
</ol>
</nav>
Usuario desconocido
para ello tienes que crear un filtro
algo asi en el archivo functions.php
function AlphaTigerX_menu_classes($classes, $item, $args){
if ($args->theme_location == 'top') // como nombraste el menu
{
$classes[] = 'list-inline-item';
}
return $classes;
}
add_filter('nav_menu_css_class', 'AlphaTigerX_menu_classes',1,3); aca colocas el registro del filtro y la prioridad 1,3 para darle si cas a modificar mas de un menu
<?php
wp_nav_menu(array(
'theme_location' => 'top',
'container' => 'nav',
'container_class' => 'container',
'menu_class' => 'menu-list list-inline' // aca estoy registrando las clases para los li
));
?>