Skip to main content

En el desarrollo de templates para WordPress se tiene el uso del soporte de menus de este CMS generalmente, para ser usado debe agregarse el siguiente codigo en el archivo Functions.php del template:


add_theme_support('nav-menus');

if(function_exists ('register_nav_menus')){
   register_nav_menus(
        array(
            'header-menu' => __( 'Header Menu' ),
            'footer-menu' => __( 'Footer Menu' )
          )
   );
}

con este código se habilita el registro del menú en la sección de menús de WordPress: «Apariencia / Menús»

al crear un menú en WordPress la documentación nos indica que para que sea mostrado en el front debes agregar el siguiente código en el archivo correspondiente:

wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'topmenu' ) );

hecho esto, vas a lograr mostrar el menú en tu sitio web. esta es la base que wordpress provee para renderizar el menu en tu sitio web.

en algunos desarrollos, el hecho que tengan entre cada elemento del menú una lista (ul/li) no va acorde con el diseño o se dificulta modificar los estilos CSS

en este caso existe una opción para remover tanto los UL como los LI de este menú, en el codigo anterior colocamos un ‘container_class’ => ‘topmenu’ que agrega esa clase en el contenedor del menu, en este ejemplo vamos a colocar la clase dentro de un <div> e inmediatamente colocaremos en php los parametros para modificar el wp_nav_menu en el archivo donde se mostrará el respectivo menu:

<div class="topmenu">
  <?php
      $menuParameters = array(
              'theme_location' => 'header-menu',
              'container'       => false,
              'echo'            => false,
              'items_wrap'      => '%3$s',
              'depth'           => 0,
     );
                    
    echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
  ?>
</div>

al realizar esto, el menú cambia donde se encontraban los ul y li completamente removidos y solamente se muestran los link <a>

OJO: al remover todos los UL del menú se quitan también las clases que tienen, esto aplica a los subelementos quienes al ser renderizado el menú, no se distinguirán de su ítem padre.

en este caso es recomendable no usar este método.

Camilo Velosa

Leave a Reply