Añadir clases (lvl1, lvl2, etc) a los menús

[Lobito14]

Buenas.

Estoy desarrollando un theme para Wordpress, y a la hora de integrar el menú, como sabrán, Wordpress le asigna sus propias clases.

A mi me gustaría tener una estructura como la siguiente, y a parte de las clases que pone Wordpress, añadir estas:

Código HTML:

<ul class="lvl0">
  <li class="lvl0">
    <a class ="lvl0" href="#"></a> 
  </li>
 
  <li class="lvl0">
    <a class ="lvl0" href="#"></a> 
    <ul class="lvl1">
      <li class="lvl1">
        <a class="lvl1" href="#"></a>
      </li>
 
      <li class="lvl1">
        <a class="lvl1" href="#"></a>
      </li>
    </ul>
  </li>
  
  <li class="lvl0">
    <a class ="lvl0" href="#"></a> 
  </li>
</ul>
 

Algo así es lo que me gustaría tener al final.

He estado buscando y he visto que para ello tendría que crear un "walker", pero la verdad es que he estado leyendo bastante documentación y no me llega a quedar claro como realizarlo.

Si alguien puede ayudarme estaría muy agradecido!!

Un saludo.

[Ember]

no sé si lo que quieres es algo como lo que te ofrece este plugin...

http://mealldubh.com/software/fold_page_menus/

[Lobito14]

Gracias por contestar Ember, pero me temo que no.

Lo que quiero es poder agregar clases propias a los menús que se generan con wp_nav_menu(); y como digo, según he leído, hay que hacerlo con un "walker" propio.

A ver si alguien puede echarme un mano.

Gracias!

[Ricardfs]

¿y por que no le das estilos a las clases que pone Wordpress? ¿cual es el problema en utilizar unas clases u otras?

[Lobito14]

Iniciado por Ricardfs

¿y por que no le das estilos a las clases que pone Wordpress? ¿cual es el problema en utilizar unas clases u otras?

Si le pone una clase a un <li> de nivel superior y su <a> que lleva dentro y la misma clase a un <li> de segundo nivel y su <a>... ahí hay conflictos de clase y la hoja de estilos se vuelve loca.

Gracias, un saludo.

[Nekko]

Hola Lobito14!

Me parece que es mucho mas práctico en tu caso pedir ayuda a los conocedores de jQuery... es mucho mas fácil y con pocas líneas de código obtenés lo que buscás. Lo que no sé bien es como obtener exactamente la estructura que estás colocando acá, pero te pongo un ejemplo.

Código HTML:

<ul id="miLista">
<li class="lvl1">...</li>
<li class="lvl2">...</li>
<li class="lvl3">...</li>
<li class="lvl4">...</li>
</ul>
 
<script type="text/javascript">
$("#miLista li").each(function(i) {
     this.addClass("lvl"+(i+1));
    });
</script>
 

Si optás por jQuery, por favor tené presente que lo que postulé es muy mejorable!

[Lobito14]

Gracias por la ayuda Nekko.

jQuery no es mala opción, realmente habría que comprobar también los <li> padres, para a los hijos ponerles un lvl(lvl del padre+1)... algo así. Se podría sacar.

La cosa es que con lo de los "walker" de Wordpress se supone que esto se puede hacer sin demasiado problema, por eso venia a preguntar, por si era un tema que controlase alguien y pudiese guiarme un poco, pero parece que no es algo tan sencillo o conocido.

Gracias :)