WordPress cambia los elementos de la lista de navegación del encabezado a div

5 minutos de lectura

avatar de usuario
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.

avatar de usuario
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ía li las etiquetas estén allí, debería salir como el ejemplo dado en la pregunta usando div.

    – 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

¿Ha sido útil esta solución?