Menús

Vamos a ver cómo trabajar con los menús de WordPress.

Crear menús

Hay multitud de lecturas sobre cómo crear menús a nivel de usuario en WordPress, por lo que no voy a entrar en este tema (por ejemplo: https://codex.wordpress.org/WordPress_Menu_User_Guide ).

La idea es que bajemos a nivel de implementación, por lo que vamos a ir viendo con ejemplos prácticos, distintas funciones que nos van a ser muy útiles en el día a día como desarrollador web.

Crear posiciones

En WordPress tenemos tanto la opción de crear menú, como de definir posiciones, en las que se definirán menús. Esto nos permite definir por ejemplo la posición «footer» y poder asignar el menú que nos convenga en dicha posición.

Para definir posiciones, tenemos disponible la función register_nav_menus(), que tendremos que llamar desde el hook ‘init’, por ejemplo:

function register_my_menu() {
  register_nav_menus(
    array(
      'footer-menu' => __( 'Footer Menu' )
     )
   );
 }
 add_action( 'init', 'register_my_menu' );

Con lo que ya tendríamos nuestra nueva posición footer-menu donde poder asignarle un menú:

Mostrar menú en plantilla

Vale, tenemos nuestros menús disponibles, pero ¿cómo los mostramos en nuestra página o plantilla?

El framework WordPress dispone de la función wp_nav_menu() que dado un menú, lo muestra por pantalla.

En la documentación oficial podemos ver los distintos parámetros que tiene, que no son pocos, pero nos vamos a centrar en los más usados en nuestro día a día.

Con ‘theme_location‘ podremos indicar que queremos mostrar el menú indicado en la posición que definimos con register_nav_menu().

Por ejemplo:

wp_nav_menu( array(
    'theme_location' => 'footer-menu'
) );

Si lo que tenemos claro es el menú a mostrar, no la posición (personalmente no lo recomiendo, ya que la posición nos permite poder cambiar de menú, sin tener que cambiar código), usaremos el parámetro ‘menu‘.

Por ejemplo:

wp_nav_menu( array(
    'menu' => 'mi-menu'
) );

Es cierto que con los parámetros tan variados que nos permite la función, podemos personalizar el HTML que se genera al mostrar el menú.

Pero en ocasiones nos encontramos con diseños que van a ser muy muy difícil de encajar en dicho HTML. Aunque tenemos la opción de extender la clase Walker_Nav_Menu y usar el parámetro ‘walker’ (en este post podemos ver una ejemplo de código de creación de un walker).

Aunque personalmente prefiero obtener los items de un menú y recorrerlos como un array, así puedo adaptarme 100% al HTML que nos pasan l@s chic@s de front.

Para ello tenemos disponible la función wp_get_nav_menu_items().

Por ejemplo:

$items = wp_get_nav_menu_items('menu-principal');
if ( $items ) {
  foreach ( $items as $item ) {
    ?>
    <li class="headers__item <?php echo ($item->object_id == get_the_ID()) ? 'active' : '';?>">
      <a class="headers__link" href="<?php echo $item->url;?>" title="<?php echo esc_attr($item->title);?>"><?php echo $item->title;?></a>
    </li>
    <?php
  }
}

Con estos tips espero que te hayas podido hacer una primera aproximación al uso de menús, y puedas practicar su uso, por ejemplo creando un pie de página con 3 menús, uno en cada columna.