| Suscribir mediante RSS

Menús personalizados en WordPress

5 julio 2010 Diseño web

Una de las nuevas características de WordPress 3.0 es la creación de menús personalizados. Hasta ahora los usuarios tenían que hacer complicadas modificaciones en el código de sus plantillas o themes si querían añadir otros enlaces en el menú de navegación.

WordPress permitía mostrar solamente las páginas o solamente las categorías del blog pero no era posible mezclar ambas en el mismo menú. Con la nueva función wp_nav_menu() podemos escoger las páginas, las categorías y los enlaces (externos o internos) que deseemos mostrar en el mismo menú.

Está selección la podemos hacer desde el propio DashBoard o Backend, en Appearance – Menus, y podemos crear tantos menús como queramos. Desde la pestaña derecha le asignamos un nombre al menú y seleccionamos las categorías y páginas que deseemos mostrar en el menú marcándolas y pulsando el botón Add to Menu. Así como los enlaces que teclearemos en la ventana Custom links y después añadiremos al menú pulsando el botón Add to Menu.

Inicialmente si el theme no viene preparado, WordPress 3.0 nos permite ubicar el menú con un widget en el sidebar verticalmente. Aunque lo suyo es situarlo horizontalmente en la parte superior a continuación de la cabecera del theme. Para que una plantilla pueda hacer uso de esta posibilidad debe contener la función wp_nav_menu() en el archivo header.php.

WordPress indica que el theme no está preparado para el uso de menús con este mensaje.

No native

Normalmente las plantillas hacen uso de las funciones wp_page_menu() o wp_lists_page() para crear un menú con las páginas del blog. Si sustituímos ese código por;

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 
'theme_location' => 'primary' ) ); 
?>

estaremos en disposición de usar el menú que configuremos en el DashBoard.

Los parámetros que se pasan a la función son; ‘container_class’ => ‘menu-header’, para decirle que aplique los estilos de la clase “menu-header” contenidos en el archivo style.css y ‘theme_location’ => ‘primary’ que le indica que es el primero de nuestros menús. Por supuesto, puedes usar otro nombre para container_class siempre que definas sus propiedades en la hoja de estilos style.css o incluso no usar ninguno.

Si el menú falla o no se encuentra, se usará la función wp_page_menu() que mostrará un menú sólo con las páginas.

Para mostrar un segundo menú se procede de la misma manera pero indicándo la palabra secondary:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 
'theme_location' => 'secondary' ) ); 
?>

Lo visto anteriormente se refiere a la ubicación y la elección de los menús en las distintas zonas de nuestro theme. Es decir, no siempre podemos necesitar un sólo menú superior o que éste aparezca en la página principal, podríamos hacer uso del menú que nos interese.

Pero para poder hacer uso de los menús tenemos que decirle a WordPress cuál es cada uno y así nos permita seleccionarlos y configurarlos desde el DashBoard. Eso lo hacemos en el archivo functions.php. Para el caso de dos menús:

register_nav_menus( array (
'primary' => __( 'Navegacion Principal', 'tu_theme' ),
'secondary'=>__( 'Navegacion Secundaria', 'tu_theme' )));

Este será el resultado en la ventana de configuración de menús.

Dos menus

Otros artículos de Diseño web

WordPress.com contra WordPress.org
Trackbacks y Pingbacks
Google ayuda a los sitios web a combatir el malware
Cómo crear una página de autor Parte 1

72 Respuestas a “Menús personalizados en WordPress”

  1. admin dice:

    Para hacer un menú así necesitas conocimientos de jQuery y CSS, WordPress no interviene para nada. Podrías buscar en la página de WordPress algún plugin que te facilite las cosas y que sea similar.

    Un saludo


  2. chris dice:

    Hola.
    Esto genera un div contenedor del menú, pero si en lugar de un DIV quiero que sea , ¿cómo se podría solucionar? Saludos y gracias otra vez


  3. admin dice:

    Si no quieres contenedor con DIV pon container => false

    Un saludo


  4. Rober dice:

    Hola,
    ¿Es posible poner sólo en una pestaña del menú una imagen?
    Gracias,


  5. admin dice:

    Si te refieres a poner un fondo en las opciones del menú se puede hacer perfectamente. Es cuestión de estilos CSS.

    Un saludo


  6. Tito dice:

    Hola!

    Quiero saber si es posible añadir un texto o un código a la barra del menú pero que no sea un botón.

    Espero que se entienda. Lo que quiero es incluir aquí la cantidad de “me gusta” en la fanpage de Facebook

    Gracias!


  7. admin dice:

    Si te he entendido bien lo que quieres hacer no tiene nada que ver con el menú. Si el menú es una barra, mediante estilos CSS puedes conseguir lo que quieres. Fíjate en mi barra de menú, la fecha y el link del RSS están situados en la esquina derecha y el menú a la izquierda, sin embargo, los dos elementos forman parte de la misma barra con sus códigos aunque estén separados.

    Espero que sea eso a lo que te refieres.

    Un saludo


  8. Tito dice:

    Eso es exactamente (o más precisamente como está aquí http://www.amitpatil.me/).
    Podrías indicarme cómo hacerlo?
    Muchas gracias!
    Saludos


  9. admin dice:

    Sin saber el theme es complicado, todos son distintos. La idea es la siguiente, una caja contenedor principal (barra) y dos cajas dentro, una para el menú a la izquierda y otra para el código que desees a la derecha.

    <div id=”barra”>

    <div id=”menu”>
    <ul>
    <li>…..</li>
    <li>…..</li>
    </ul>
    </div>

    <div id=”derecha”>
    Código con lo que sea
    </div>

    </div>

    Después con estilos CSS fijas la caja “derecha” con float:right;

    Pero ya te digo esto no tiene nada que ver con WordPress y sus menús personalizados.

    Un saludo


  10. Emmanuel dice:

    buenas muy bueno tu aporte me gustaria me sacaras una duda ya que me encuentro con un blog en el cual no me salen todas las opciones del menu de navegacion de la izquierda, solo me salen entradas, multimedia, enlaces, pagina, comentarios, perfil, herramientas y ajustes. si me orientaras para poder verlas a todas las restantes te agradeceria mucho. la version del wordpress que tengo instalada es la WordPress 3.3.1. saludos!!!!


  11. admin dice:

    Esto no tiene nada que ver con los menús personalizados. Si tienes algún plugin para gestión de usuarios y permisos revisa su configuración.

    Saludos


  12. Amaia dice:

    ¡Muchísimas gracias por la aportación! Necesitaba poner dos menús en la cabecera de un blog que estoy creando. He seguido tus indicaciones y todo funciona correctamnete. Felicidades por tu trabajo.


  13. pablo dice:

    Hola, una pregunta si puedes orientarme… Soy muy novato y estoy probando una serie de modificaciones en un blog.

    Comentas

    “no siempre podemos necesitar un sólo menú superior o que éste aparezca en la página principal”

    ¿Como puedo hacer para que no aparezca el menú en la página principal?

    Gracias, si puedes responderme.


  14. admin dice:

    Los menús en general los puedes añadir dónde quieras, lo lógico es ponerlos en la parte superior en la cabecera (archivo header.php) que es común a todas las páginas. El menú facilita a los visitantes la navegación por tu blog.

    Si no quieres añadir un menú a la cabecera elimina la línea que llama a wp_nav_menu() del archivo header.php

    WordPress permite crear cabeceras diferentes según la página, categoría, etc, que te encuentres (header-una.php, header-dos.php, header-etc.php). Tendrás que crear plantillas de páginas y asignarles la cabecera que desees. Puesto que los menús tienen nombres diferentes podrás asignar el que te interese a las cabeceras creadas.

    Un saludo


  15. Blythe dice:

    Hola buenas,

    como bien dices en este ultimo post “lo lógico es ponerlos en la parte superior de la cabecera”… pues no consigo dar con la tecla!!
    Tengo el theme twenty eleven, he activado el plugin Header Image Slider. Entonces me sale la barra de menus debajo del slider y la quiero arriba, puedes ayudarme? Voy loca por cambiarlo y no lo consigooooo..snif, snif.

    Un saludo y gracias de antemano.


  16. admin dice:

    Cuando digo la parte superior me refiero a la cabecera. Los themes actuales tienen unas cabeceras bastante grandes con lo que pueden existir distintas posiciones dentro de ella.

    En tu caso has instalado un plugin que sustituye la imagen de la cabecera por un slide pero en el mismo lugar, el resto permanece igual. Si quieres el menú por encima de esa imagen entra en header.php y coloca todo el menú, desde <nav id=”access” role=”navigation”> hasta </nav> en la posición que desees.

    Un saludo


  17. llid ap dicter dice:

    Hola, me ha servido mucho tu artículo, pero ahora que tengo el segundo menú creado tengo un par de dificultades.
    1º me gustaría que sólo apareciera en algunas páginas y no lo consigo.
    2º como el menú principal no ocupa todo el espacio, se me mezclan los dos menús en la primera linea.
    Sé que el artículo tiene ya unos años, pero me pregunto si podrías ayudarme.

    Muchas gracias.
    Un saludo.


  18. admin dice:

    Te respondo a la segundo primero. Si el theme lo estás haciendo tú debes dejar previsto espacio para los menús y la posición en la que los quieres, eso es cuestión de CSS y WordPress seguirá las indicaciones que le haces.

    Para personalizar las páginas WordPress permite hacerlo de varias formas. Quizás la más fácil es con plantillas personalizadas para las páginas donde puedes escoger una cabecera diferente para cada una. En esas cabeceras eliges los menús que quieres.

    Un saludo


  19. llid ap dicter dice:

    Ok, muchas gracias, voy a ver si lo consigo


  20. dmaje dice:

    Mil gracias, me sirvió mucho la información, ya pude aplicar varias cosas y funcionan a la perfección.


  21. Silvia dice:

    Hola, he hecho lo comentas en el artículo y gracias! he podido crear dos menus. El problema que tengo ahora es que cuando creo una entrada me aparece en la Home, pero cuando le clico encíma me dice que no encuentra la página (por lo que no puedo ver la entrada). Sabes de que puede ser? me da que es algo de código.


  22. admin dice:

    Lo que has hecho con los menús no tiene influencia a la hora de ver los artículos. Imagino que ese problema lo tenías antes.

    Desactiva plugins y prueba poner el permalink por defecto para ver si se soluciona el problema.

    Un saludo