Como añadir un menú a un tema de WordPress

A veces, cuando encontramos un tema de WordPress que nos interesa, le podemos echar en falta algún detalle, como por ejemplo, una posición para añadir un menú en un lugar concreto. En el artículo de hoy, veremos como realizar está tarea.

Cómo registrar una posición de menú en WordPress

En realidad WordPress nos permite añadir todos los menús que queramos, lo que podemos echar en falta de un tema no es realmente la posibilidad de añadir un menú, sino la posibilidad de añadirlo en una posición concreta. Es por ello que lo correcto no sería decir que vamos a añadir un menú a nuestro tema, sino que lo que en realidad vamos a añadir es una posición donde colocar un menú.

Esta operación es más sencilla de lo que pudierais pensar, por lo que si realmente os gusta un tema al que le falta una posición de menú, no deberíais de descartarlo y deberíais de intentar añadirsela, incluso aunque no sepais PHP. Obviamente, antes de hacer nada de lo que no estemos muy seguros conviene sacar copia de seguridad por si acaso.

Lo primero que hemos de hacer es registrar la posición del menú: esto lo haremos en el archivo functions.php de nuestro tema.

Este archivo debería de estar en una ruta tipo wp-content/themes/mi-tema/ siendo mi-tema el nombre de vuestro tema.

Al final de este archivo, antes del simbolo ?>,  añadiremos lo siguiente:

add_action( 'after_setup_theme', 'register_new_menus' );
function register_new_menus() {
  register_nav_menu( 'menu-footer', __('Menú pie de página'));
}

Es importante que lo pongamos antes del símbolo ?>, si no existe dicho símbolo al final del archivo no es problema, pero si existe debemos de colocar nuestro código antes, y no después. De lo contrario es posible que nuestro sitio Web deje de funcionar correctamente.

A esta nueva posición le tenemos que dar un nombre, en este caso he usado ‘menu-footer’ pero podéis ponerle otro nombre. Tenéis que tener cuidado al elegir el nombre; lo ideal es usar una única palabra (si queréis varias podéis usar un guión – para separarlas). Después, le damos una descripción, en mi caso le he puesto ‘Menú pie de página’, pero podéis ponerle la que queráis.

La operación de registro propiamente dicha la realiza la función de WordPress register_nav_menu.

Cómo añadir una posición de menú en WordPress

Una vez registrada la posición del menú, debemos de indicar en que lugar o lugares de nuestro tema se debe de mostrar. En mi caso voy a colocar el menú en el pie de página, por lo que el archivo que debo de modificar es el archivo footer.php.

Cada tema es diferente, por lo que tendréis que familiarizaros con la estructura de archivos de vuestro tema para poder determinar el sitio correcto donde colocar vuestro menú. Para más pistas sobre que archivo debéis de modificar, podéis consultar la jerarquía de archivos de WordPress. Este paso es probablemente el mas complicado de todo el proceso, por lo que tendréis que tomaros vuestro tiempo comprendiendo los diferentes archivos que componen vuestro tema.

Una vez localizado el sitio de nuestro tema donde queremos colocar nuestro menú, tan solo tenemos que añadir el siguiente código

<?php
wp_nav_menu( 
  array(
    'theme_location' => 'menu-footer',
    'menu_class' => 'menu_footer_class' 
  ) 
);
?>

De este forma, mediante la función de WordPress wp_nav_menu, indicamos el sitio donde queremos que WordPress «pinte» nuestro menú. Hemos de asegurarnos de que indicamos el mismo nombre del menú que hemos registrado antes (menu-footer en mi caso). Además, le estoy indicando el nombre de una clase de forma que después pueda usar dicha clase CSS para indicarle al navegador el aspecto visual del menú.

Como añadir un menú e indicarle la nueva posición

Una vez hechos todos estos pasos ya podemos crear un nuevo menú para añadirlo a dicha posición.

Una vez creado el nuevo menú, podemos indicar en que posición (o posiciones) queremos mostrarlo. Como ya hemos creado la nueva posición para el pie de página,  tan solo tenemos que seleccionarla para que el menú aparezca en ella.

Y ya está. Si visitamos nuestra página, podremos ver que nuestro nuevo menú aparece en la posición que le hemos creado.

Ahora, y con la ayuda de la clase que le hemos dado, tan solo hemos de modificar el CSS para hacer que luzca un poquito más, y ya lo tenemos.

Hay que tener en cuenta que la modificación que hemos hecho la perderemos si actualizamos el tema. Para no perderla lo suyo sería usar un tema hijo en WordPress.

Y bueno, nada más, espero que el artículo de hoy os haya resultado de interés y os permita aprovechar aquel tema que descartasteis por faltarle un menú aquí o allá. Para más información sobre esté tema, podéis consultar la sección de menús de navegación del Codex de WordPress.