WordPress enthusiast working at Automattic as a Happiness Engineer

Configuración Menú WordPress

Crear menús personalizados en WordPress

Written in

by

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:

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

Rate this post

Tags

8 respuestas a «Crear menús personalizados en WordPress»

  1. Avatar de angel

    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. Avatar de david

    reafirmo el comentario anterior, no queda muy claro donde ubicar la llamada a la función

  3. Avatar de Joan Artés
    Joan Artés

    Hola! La funcion wp_nav_menu() hay que meterla en el header.php, que es fichero donde normalmente se ponen los menús 🙂

  4. Avatar de Cristian
    Cristian

    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. Avatar de Joan Artés
      Joan Artés

      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 😉

  5. Avatar de Mauro
    Mauro

    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 🙁

    1. Avatar de Mauro
      Mauro

      *

    2. Avatar de Joan Artés
      Joan Artés

      Hola Mauro. ¿Dónde quieres añadir la clase?

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: