Sumith Harshan
Quiero cambiar todas las etiquetas ul, li en etiquetas div de wordpress header.wp_nav_menu() siempre devuelve ul, li. Esto es lo que quiero cambiar.
<ul>
<li>Home</li>
<li>Services</li>
<li>Products</li>
</ul>
Esto debe ser un cambio como este.
<div>
<div>Home</div>
<div>Services</div>
<div>Products</div>
</div>
Por favor, ayúdame. Gracias.
el alfa
Necesitas un andador personalizado para hacer eso, una versión modificada de Éste respondido por toschosimplemente pegue esta clase en su functions.php
class Description_Walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
$classes = empty($item->classes) ? array () : (array) $item->classes;
$class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
!empty ( $class_names ) and $class_names=" class="". esc_attr( $class_names ) . '"';
$output .= "<div id='menu-item-$item->ID' $class_names>";
$attributes="";
!empty( $item->attr_title ) and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';
!empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target ) .'"';
!empty( $item->xfn ) and $attributes .= ' rel="' . esc_attr( $item->xfn ) .'"';
!empty( $item->url ) and $attributes .= ' href="' . esc_attr( $item->url ) .'"';
$title = apply_filters( 'the_title', $item->title, $item->ID );
$item_output = $args->before
. "<a $attributes>"
. $args->link_before
. $title
. '</a></div>'
. $args->link_after
. $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
llamar wp_nav_menu
en header.php
como seguir
wp_nav_menu(
array (
'menu' => 'main-menu',
'container' => 'div', // parent container
'container_id' => 'my_nav', //parent container ID
'depth' => 1,
'items_wrap' => '%3$s', // removes ul
'walker' => new Description_Walker // custom walker to replace li with div
)
);
-
Aprecio mucho su ayuda. Muchas gracias.
– Sumith Harshan
28 de agosto de 2012 a las 18:13
-
Hola, RVC, acabo de probar tu código. Sin embargo, tengo un problema cuando inspecciono el html. Tengo etiquetas
finales de alguna manera para eliminarlas.
– Maestro de la evasión
7 de noviembre de 2013 a las 22:39
-
no usé ninguno
li
etiquetas en esto, ¿cómo podríali
las etiquetas estén allí, debería salir como el ejemplo dado en la pregunta usandodiv
.– El alfa
7 de noviembre de 2013 a las 22:42
-
Probé dos temas diferentes veintitrés y spud y los resultados me dejan con etiquetas finales ‘
‘ aquí hay un ejemplo de tema hilado’
‘ alguna idea ya que he estado tratando de resolver esto durante una semana. estoy usando el último wp 3.7.1, incluso lo he reinstalado y copié y pegué tu código en el tema
– Maestro de la evasión
9 de noviembre de 2013 a las 21:10
-
A la extensión de clase le falta el argumento $id predeterminado que genera una advertencia de declaración en php7.
– cptnk
2 de marzo de 2017 a las 12:08
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown active dropdown-slide">
<a class="nav-link" href="#" data-toggle="dropdown">Home
<span>/</span>
</a>
<!-- Dropdown list -->
<div class="dropdown-menu">
<a class="dropdown-item" href="index.html">Homepage</a>
<a class="dropdown-item" href="homepage-two.html">Homepage 2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="speakers.html">Speakers
<span>/</span>
</a>
</li>
<li class="nav-item dropdown dropdown-slide">
<a class="nav-link" href="#" data-toggle="dropdown">Pages<span>/</span></a>
<!-- Dropdown list -->
<div class="dropdown-menu">
<a class="dropdown-item" href="about-us.html">About Us</a>
<a class="dropdown-item" href="single-speaker.html">Single Speaker</a>
<a class="dropdown-item" href="gallery.html">Gallery</a>
<a class="dropdown-item" href="gallery-two.html">Gallery-02</a>
<a class="dropdown-item" href="testimonial.html">Testimonial</a>
<a class="dropdown-item" href="pricing.html">Pricing</a>
<a class="dropdown-item" href="FAQ.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="schedule.html">Schedule<span>/</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="sponsors.html">Sponsors<span>/</span></a>
</li>
<li class="nav-item dropdown dropdown-slide">
<a class="nav-link" href="#" data-toggle="dropdown">News
<span>/</span>
</a>
<!-- Dropdown list -->
<div class="dropdown-menu">
<a class="dropdown-item" href="news.html">News without sidebar</a>
<a class="dropdown-item" href="news-right-sidebar.html">News with right sidebar</a>
<a class="dropdown-item" href="news-left-sidebar.html">News with left sidebar</a>
<a class="dropdown-item" href="news-single.html">News Single</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
-
Agregue algunas líneas que expliquen su código y lo que hizo 🙂
– T. Corto
24 de diciembre de 2019 a las 18:25