Estoy creando un menú para mi sitio web. La estática se ve así:
<nav>
<ul id="menu">
<li class="item_1"><a href="#">Item 1</a></li>
<li class="item_2"><a href="#">Item 2</a></li>
<li class="item_3"><a href="#">Item 3</a></li>
<li class="item_4"><a href="#">Item 4</a></li>
<li class="item_5"><a href="#">Item 5</a></li>
<li class="item_6"><a href="#">Item 6</a></li>
<li class="item_7"><a href="#">Item 7</a></li>
<li class="item_8"><a href="#">Item 8</a></li>
</ul>
He podido entender cómo personalizar la etiqueta <ul> , para deshacerme de la etiqueta automática <div> . Pero ahora, quiero personalizar la etiqueta <li> para poder asignar diferentes nombres de class para controlar el comportamiento específico a través de CSS. Cuando uso wp_nav_menu() , la salida es la siguiente:
<ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
</ul>
Quiero deshacerme de id en las etiquetas <li> y cambiar class para reflejar el nombre de la página a la que quiero enlazar. Básicamente, quiero mostrar lo mismo que el primer fragmento de código en esta publicación.
La razón por la que hago esto, es porque uso imágenes personalizadas que están controladas por mi CSS en texto sin formato.
¿Es esto posible? ¿Qué estrategia debo usar para superar este problema?