Crear menús personalizados en WordPress

Configuración Menú WordPress

Web Hosting
Una de las características de WordPress que más me gusta es el tema de los menús. Si en nuestro template lo tenemos bien definido, en la sección de Apariencia → Menús podremos modificar visualmente los elementos del menú muy fácilmente e incluso poner parámetros adicionales a cada elemento, como classes de CSS o atributos del título del enlace.

Primer paso: crear una posición de menú nueva.

Antes que nada nos hace falta crear una nueva posición de menú. Para ello abriremos el fichero functions.php y añadiremos al final del fichero el siguiente código:

Consigue por solo 10€ mi
curso profesional de WordPress
if (function_exists('register_nav_menu')) {
    register_nav_menu('menu-principal', 'Menú principal');
}

Lo que hace esta función es registrar la nueva posición de menú que la podremos usar en cualquier parte de nuestra página. El primer parámetro que le pasamos es el identificador que tendrá. El segundo es el título de la misma que es la que saldrá en el panel de administración:

Configuración Menú WordPress

Para mostrar esta posición del menú lo que hay que hacer es llamarla con la siguiente función:

 <?php wp_nav_menu( array( 'theme_location' => 'menu-principal' ) ); ?>

El parámetro que le pasamos a esta función es el identificador que le hemos puesto a la función que crea la posición de menú (en nuestro caso: “menu-principal”).

Añadir un nuevo menú y prepararlo para darle estilos con CSS

Una vez registrada la nueva posición crearemos un menú nuevo con varios elementos. A la hora de añadir elementos, WordPress nos permite poner automáticamente links de categorías o páginas que tengamos publicadas. Esto nos ahorra tener que introducir los links manualmente en el cuadro de “Enlaces personalizados”.

Es importante elegir bien el nombre del menú que vayamos a crear ya que WordPress añadirá un id de CSS al <ul> que contiene el menú. Por ejemplo: si hemos puesto “Menú Principal” tendremos: <ul id="menu-menu-principal" class="menu">. Dentro de este <ul> tendremos elementos <li> que serán los elementos del menú que habremos puesto.

A cada uno de los elementos <li> les podemos poner classes de CSS específicas por cada uno. Para ello dentro de la sección de Apariencia → Menús arriba a la derecha hay un botón que pone: “Opciones de pantalla”. Hacemos clic y en el desplegable que aparece seleccionamos “Mostrar propiedades avanzadas de menú: Classes de CSS”. Con esto lograremos que en cada ítem del menú nos aparezca una casilla donde le podremos indicar una clase de CSS que deseemos:

Ítem menú WordPress

8 opiniones en “Crear menús personalizados en WordPress”

  1. Hola Joan, muchas gracias por el tutorial. Tengo una duda respecto a la colocación de la llamada de la función. ¿Donde tengo que llamarlo? Por ejemplo en page.php? No consigo que parazca el submenu. Gracias de antemano por tu ayuda

  2. Hola megustaria saber por ejemplo, yo tengo una pagina en wordpress, y he creado un menu aparte con DreamWeaver, como podria meterlo en mi pagina pprincipal y que coja mi menu creado. Gracias

    1. Hola! Lo que tienes que hacer es adaptar tu diseño del menú que has hecho con DreamWeaver con los estilos del theme que estés usando 😉

  3. Gracias por el tutorial Joan, tengo una consulta ¿Cómo puedo añadir una clase css al ?
    Estoy trabajando con las clases de bootstrap e intenté con ‘menu_class’ => ‘nav navbar-nav’ bajo la función wp_nav_menu(), pero no me funciona 🙁

Deja un comentario