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 <ul>
etiqueta, para deshacerme de la <div>
etiqueta automática . Pero ahora, quiero personalizar la <li>
etiqueta para poder asignar un class
nombre diferente para controlar el comportamiento específico a través de CSS. Cuando uso el wp_nav_menu()
resultado es el 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 deshacerse de la id
de las <li>
etiquetas y cambiar el class
para reflejar el nombre de la página que desea establecer el vínculo. Básicamente quiero generar lo mismo que el primer fragmento de código en esta publicación.
La razón por la que hago esto es que uso imágenes personalizadas controladas por mi CSS en lugar de texto sin formato.
es posible? ¿Qué estrategia debo usar para superar este problema?