| 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

Mapa de imagen con Thickbox
Cómo cambiar la URL en WordPress
Cómo crear un Widget
SEO, palabras claves, etiquetas y tags
Ordenando el Footer

72 Respuestas a “Menús personalizados en WordPress”

  1. Invitado dice:

    Hola! Qué buen post… Me ha sido muy útil a la hora de integrar dos menús en mi plantilla. Para hacerlo he tenido que actualizar la versión de WordPress a 3.0.1 y todo iba genial hasta qhe he intentado guardar una entrada.

    Me da el siguente error:

    Warning: Cannot modify header information – headers already sent by /wp-includes/pluggable.php on line 890.

    he ido a ambos archivos y si comento en la funcion wp_redirect de pluggable.php lo siguiente lo guarda pero la página se queda en blanco:

    A lo mejor es una tontada pero me estoy volviendo loca…

    Mil gracias!


  2. admin dice:

    Hola merijoe, pues no te vuelvas loca…

    ¿Funcionan bien los menús?

    1 – Deja esos archivos como estaban
    2 – Revisa bien los cambios que hayas hecho en el header.php para poder integrar los menús. Comillas simples, comillas dobles, espacios, etc, cualquier caracter es importante en PHP. Posiblemente el error venga de ahí.

    Fíjate que el mensaje dice que no puede modificar la información de la cabecera. Los mensajes de error a veces confunden en vez de ayudar.

    En todo caso comenta el código que has modificado en el header y así sabrás si el problema viene de ahí.

    Ya me dirás algo

    Un saludo


  3. Invitado dice:

    Hola,yo por mi poca experiencia en esto del wordpress tengo una pregunta un tanto tonta imagino así que perdón por la posible burrada que voy a decir.

    Estoy adaptando un diseño de mi web portfolio a wordpress 3.0.1 y ahora estoy por la parte que mencionan aquí en este hilo. Por ahora solo he creado el index.php y los estilos con la miniatura para que aparezcan en el instalador de themes de WP con la info correspondiente al theme en si.

    Ahora viene la duda:
    Lo que hay que incluir en el archivo functions.php…pregunto, ¿ese archivo .php lo tengo que crear yo mismo en blanco y meterlo en la carpeta de mi theme junto con los demás archivos .php como el index.php y los que vaya agregando a medida que desarrolle mi web?

    ¿simplemente tengo que pegar esas líneas de código que mencionáis con las etiquetas correspondientes a mis 2 menús (uno en el header y el otro en el footer) tal cual las plasmáis en ese archivo nuevo functions.php y listo?

    ¿O hay un archivo ya por defecto functions.php al que he de añadir ese código y luego meterlo en la carpeta del theme?

    Muchas gracias y saludos


  4. Invitado dice:

    Hola, he estudiado varias horas la tontería que les escribí con anterioridad y he resuelto la duda en lo que respecta a dónde ubicar cada parte del código con respecto a functions.php y en header.php la nueva función y footer.php el otro menu tal y como lo explicais.

    Bien, según el firebug, me aparencen ambos menús, pero me crea divs y no lee bien el css, tanto en el menú footer como en el principal del header.

    Este último lo he hecho con sprite, y no muestra absolutamente nada del propio menú. Las pruebas que hice siendo .html y css vinculado funcionan perfectamente, así que no sé que puede ser.
    ¿alguna idea?No he pegado el código porque es mucho para ser un comentario.

    Aprovechando, otro pregunta con repecto a cómo debería escribir el css de los menús, con class o id? porque mirando por firebug realmente no me queda claro, puesto que genera ambas etiquetas..

    Muchas gracias


  5. admin dice:

    Hola Chris:

    Si cambias “container-class” por “container-id” podrás usar en las hojas de estilos la etiqueta id en vez de class. WordPress crea por defecto div class=”menu”

    El problema es de CSS. Si te molesta la caja div que crea por defecto la puedes eliminar y crear la tuya propia. Puedes consultar en la página oficial de WordPress los parámetros de la función wp_nav_menu y como eliminar el contenedor por defecto.

    Un saludo


  6. Invitado dice:

    Bien, probaré, lo daba por perdido, veamos qué tal se me dá.Gracias y ya te cuento.


  7. Invitado dice:

    perfecto, funcionó. Gracias


  8. Invitado dice:

    Muy buen post!
    Gracias


  9. Invitado dice:

    Hola, quería hacerte una consulta. Agregué en mi menú un link a un sitio externo mediante la opción “enlaces personalizados” en la sección “menu” de mi dashboard, y quiero que se abra en una nueva ventana. Sabés cómo puedo asignarle el target?
    Gracias!


  10. admin dice:

    Hola Marcelo, tienes que poner target”=_blank” dentro del código del link, es decir:
    <a href=”http://enlace.com/” target=”_blank”>Nuevo enlace</a>

    Un saludo


  11. Invitado dice:

    Muchas gracias por la explicacion… lo he hecho perfectamente pero me ha surgido una pregunta…
    Es posible poner al menu un target=”_blank” para que se abren en una nueva pagina??

    Muchas gracias!!


  12. Invitado dice:

    He visto la explicacion anterior, pero en la seccion menu del wordpress solod deja poner la url y la etiqueta. No hay posibiidad de poner el target=”_blank” .
    Se podria poner de alguna otra manera

    Saludos


  13. admin dice:

    Es obvio que no podía funcionar añadir target blank dentro de la URL.

    Para ello hay que irse arriba a Screen Options (opciones de pantalla si está en español) y activar la casilla “Link Target” dentro de “Show advanced menu properties”. Una vez hecho eso aparecerá una opción para añadir el target blank. Misma ventana o Nueva ventana sale en el menú desplegable.

    Mis disculpas. Perdon por el lapsus. Olviden lo anterior.

    Saludos


  14. Invitado dice:

    Perfecto!!
    Muchisimas gracias por la ayuda y sobre todo por la labor que haces!!! Un saludo y felicidades por la web


  15. Invitado dice:

    Muy bien esto se puede añadir arriba en la cabezera en vez de que salga a la derecha
    gracias un saludo


  16. admin dice:

    Perfectamente, como dije en el artículo se puede poner donde quieras aunque lo habitual es en la parte superior. También tienes la opción de añadirlo como widget.

    Un saludo


  17. Invitado dice:

    Y en el caso de que si quiero Mostrar como desplegable las categorías?

    Gracias.
    José Luis.


  18. admin dice:

    En el menú se pueden poner categorías, subcategorías, páginas, subpáginas y enlaces en cualquier combinación y orden que prefieras. Para que se despliegue el menú es necesario que el archivo style.css tenga las etiquetas necesarias para hacer el efecto de despliegue.

    Un saludo


  19. Invitado dice:

    ¿En las últimas versiones de WP sigue apareciendo Screen Options/Show advanced menu properties?

    Yo también estaba intentando configurar el menú para que abriera los links a webs externas en nuevas ventanas y no lo consigo de ninguna manera. Si consigo hacerlo a la hora de configurar un enlace, ahí no tengo problema, pero los enlaces no los puedo añadir al menú, WP sólo permite agregar páginas o enlaces personalizados (introduciendo url)


  20. Invitado dice:

    hola, yo soy un estudiante de la carrera de desarrollo web y ando haciendo mi servicio social en el que me pidieron hacer una pagina con wordpress y todo iba bien hasta le habia puesto un menus sencillo y con css lo hice despegable, pero me piden un menu personalizado.

    aqui radica mi problema como le puedo hacer para que se muestren nomas pones las categorias, enlaces y paginas que yo quiero y que las otras no se muestren en el menu

    Gracias.


  21. admin dice:

    Nachetz no ha cambiado, sigue saliendo lo mismo. Si te fijas no sólo puedes añadir páginas, categorías y enlaces al menú también puedes añadir posts y etiquetas. Sólo debes marcar en Screen Options (Opciones de pantalla) lo que quieres mostrar en la ventana de edición para después poder seleccionarlo.

    Dentro de Screen Options, también te aparece la opción, en la línea de abajo, para poner los targets en los enlaces, yo sean internos o externos. Debes marcar Link Target para cuando añadas el enlace personalizado te permita seleccionar que se abra en la misma pestaña del navegador o en otra.

    También debes darle un nombre al menú, Label, que es lo que verá el visitante, puesto que sale por defecto Menu Item.

    Un saludo


  22. admin dice:

    Miguel sólo debes sustituir la función que llama al menú en tu theme por wp_nav_menu. El menú normalmente viene en el archivo header.php y se muestra con wp_page_menu() o wp_lists_page(). Lo explico en el artículo.

    Después una vez crees la posibilidad de tener menús personalizados te vas a Menú dentro del DashBoard y creas tu propio menú con los elementos que quieras.

    Saludos


  23. Invitado dice:

    Hola, tengo un problema que me gustaría exponer por si me puedes ayudar.
    He creado un menú a través de Escritorio/ Apariencia/ Menús
    En el menú creado he puesto una categoria y varias subcategorias. Todo muy sencillo. Ha quedado bien, cuando paso el puntero se despliegan las subcategorias. La presentación es correcta, pero al pinchar en cualquiera de ellas no me carga las paginas y me sale el siguiente mensaje:
    “Sorry, but you are looking for something that isn´t here”
    Podrias decirme que tengo mal y como solucionarlo?
    He estado mirando el archivo header.php, y aparece el wp_nav_menu

    Así es como me aparece en mi tema “Rockwell”:


    ‘main-menu’, ‘container_id’ => ‘topMenu’, ‘menu_class’=>’sf-menu’, ‘fallback_cb’=>’mainmenu’) );
    }else{
    mainmenu();
    }?>

    Te agradezco mucho tu tiempo y dedicación. Muchas gracias.


  24. admin dice:

    El menú lo has hecho bien, lo que te ocurre no tiene nada que ver con esto.

    Revisa bien los nombres que has puesto a las categorías, que no coincidan con páginas. En su caso, eliminalas y vuelve a crearlas. También puedes probar cambiando de theme por si existiese algún error en el mismo.

    Saludos


  25. Invitado dice:

    Hola a todos.
    Me gustaría poder crear un menú como el de la página siguiente:

    http://www.johnnywinter.net/

    Como veréis, en los laterales del menú aparecen estos dibujos que me gustaría poder añadir. Puede que mi pregunta sea un tanto absurda y que, probáblemente, forme parte de la imagen de fondo y al menú se le haya dado un color transparente (si es que eso puede hacerse).

    No tengo ni idea de PHP ni de CSS así que espero que los expertos que posteáis por aquí podáis echarme una mano.

    Muchas gracias de antemano y, a los administradores del blog, muchas felicidades por lo bien explicados que están hechos los posts.

    Hasta pronto,

    Alejandro


  26. admin dice:

    Gracias a ti Alejandro,

    Pues no tiene mayor misterio. Se puede hacer poniendo una imagen de fondo en el menu. Eso se pone en el archivo style.css

    Algo como:
    #menu { background: url(images/bg-menubar.jpg) no-repeat; }
    Siendo bg-menubar.jpg la imagen de fondo de la barra de menú.

    El efecto de los bordes que sobresalen se logra con la imagen de fondo del blog.

    Un saludo


  27. Invitado dice:

    Hola de nuevo,
    ya estoy de nuevo por aquí para torpedear a los expertos a preguntas 😉

    (Por cierto, gracias admin por la respuesta anterior y por la velocidad en responder. Qué bárbaro en el mismo día…)

    Bueno mi pregunta es la siguiente:

    Quiero poner en mi blog una doble cabecera, de modo que una quede encima de la otra. En la de arriba del todo, me gustaría que tuviera un pase de diapositivas en flash (imágenes) y que, al clicar sobre ellas, se pudiera acceder a un link externo. La película en flash ya la sé configurar. El problema es el resto…

    No sé si es posible tener en wordpress una doble cabecera. De momento no encontré ningún template que lo tenga. Por ahora trabajo de forma local con la plantilla Twentyten. Sé que es simple, pero me permite configurar un menú personalizado así como cambiarle la imagen de cabecera o trastearla un poco sin romper nada.

    Nada más, dejo a los expertos en la materia “la patata caliente” a la espera de una solución.

    Gracias por vuestra ayuda y hasta pronto.

    Un abrazo,

    Alejandro.


  28. admin dice:

    Alejandro, esta pregunta no tiene nada que ver con los menús personalizados y no suelo responderlas.

    De todas formas te contesto rápido pon la imagen encima o debajo de la que está en el archivo header.php. Lo mismo si es un Flash, que puedes poner dentro de una caja div del mismo ancho de la imagen en caso de que tuvieras problemas.

    Saludos


  29. Invitado dice:

    Hola, bueno post, pero tengo problemas, he instalado mi wordpress configurado para hacer un multisite y no me funciona, no se si hago algo mal o que es, pero no puedo hacer menus personalizados!!

    Saludos


  30. admin dice:

    Prueba con el theme que viene por defecto Twenty Eleven así sabrás si te has equivocado en algo. De todas formas, tal como puedes ver en el artículo, WordPress te informa de si el theme soporta menús personalizados o no de manera que sabrás si está bien el código según el mensaje que muestre. Las hojas de estilo CSS del theme tienen que estar preparadas para el efecto de menu desplegable que se crean con listas ul – li.

    Un saludo


  31. Invitado dice:

    Hola a todos, ante todo muchas gracias por vuestro blog es espectacular. El motivo de mi email es para decirles dispongo de un blog en wordpress y estoy configurando un menu y cuando lo actualizo luego de un largo tiempo esperando me da error, mis preguntas son las siguientes?
    – A que se deberá tal error?
    – La solución si es posible?
    – donde se guarda la información del menu? lo pregunto para poder modificarla desde dicho archivo.

    Desde ya muchas gracias por vuestra respuesta. Un abrazo a todos


  32. Invitado dice:

    Excelente! Me voy a poner a probar!


  33. Invitado dice:

    Muy buena la explicación. Gracias, me ha servido mucho.


  34. Invitado dice:

    Buenos días.
    Voy a tratar de exponeros mi problema. Quiero hacer un menu similar a la que se encuentra en esta web http://www.5maseldescuento.es, en el que pueda agrupar categorias y paginas dentro de un submenu. Utilizo la wordpress 3.2.1 y la plantilla es BreakingNewz. Ya me aparece la opcion de menus sin necesidad de modificar nada.
    Sin embargo he creado ya el menu que quiero que me aparezca y no logro hacerlo funcionar, en la web me sigue saliendo un menu con las paginas y otro con las categorias. He probado todo lo que indicais aqui, pero sigo sin hacerlo. He probado a modificar el fuctions.php y header.php pero sigue sin salir nada, o directamente desaparece la barra de menu de paginas o categorias o no hace nada.
    NECESITO AYUDA!!!


  35. admin dice:

    Si tu theme soporta menús personalizados en la configuracion del mismo debe haber alguna opción que te permita seleccionar entre poner un menú con categorías y/o páginas o el propio menú personalizado que has creado.

    Un saludo


  36. Invitado dice:

    Hola!

    ¿Cómo puedo hacer para que un botón del menú solo funcione “on hover” y no se pueda hacer click en él?

    No encuentro la opción por ningún sitio!

    Gracias 😉


  37. admin dice:

    Pues una opción no muy ortodoxa sería que en el enlace que añadas al menú no pongas nada en la URL, se trata de dejar en blanco el campo correspondiente a la URL destino. Esto lo puedes hacer con páginas, categorías, etc. Es decir, añades un enlace al menú cuyo nombre sea el de una página con el campo URL vacio de manera que emule a una página existente y después pones dentro las subpáginas o elementos que quieras. De esta forma no se podrá seleccionar la supuesta “página” del menú pero si sus subpáginas.

    Un saludo


  38. Invitado dice:

    Pues no sé si será ortodoxo, pero efectivo sí es.
    No se me había ocurrido.

    Gracias, es exactamente lo que estaba buscando!


  39. Invitado dice:

    Muchas gracias por este post. Me ha resultado tremendamente útil para poder customizar un menú que se me resistía.

    Felicidades por el post.


  40. Invitado dice:

    Hola buen día, a mi me funcionó casi todo bien, pero tengo un problema que me quebra la cabeza y no se si puedas ayudarme a resolverlo, ambos menús funcionan perfecto en ie9, pero en chrome y firefox (en el home) sólo me funciona el menú principal.

    Saludos.


  41. admin dice:

    Realmente deberías preocuparte por lo contrario. Es decir, si tu blog no se “ve” bien en otros navegadores que no sean IE entonces no se “ve”. Dicho de otra forma en cuanto logres que funcione para Chrome, Mozilla Firefox, etc, entonces lograrás que lo haga en IE. Realiza las pruebas siempre con otros navegadores que no sean IE.

    Sin saber el theme o una URL para mirarlo es complicado ayudarte. Algo debes haber puesto mal en el código.

    Saludos


  42. Invitado dice:

    Holaaa!!! Hice los pasos y funciono perfecto, solo que al crear un submenu, este se ve pero no me permite hacer click sobre el!!!!!

    Excelente post


  43. Invitado dice:

    La verdad es que voy a tener que mmorizar este post porque me está sacando de más de un problema, y es que cuando nos acostumbramos a que las plantillas nos de todo hecho, cuando hay una que no lo da o encuentras este post o está perdido. Gracias de nuevo!!!


  44. Invitado dice:

    HOLA queria saber si pueden ayudarme en mi problema
    bueno al grano.
    tengo una lista de categorias, ya cree muchas entradas o post, y a cada entrada le pongo su respectiva categoria, a la hora probar me sale “No se encontraron resultados
    La página solicitada no se pudo encontrar. Trate de refinar la búsqueda, o utilizar la navegación para localizar el mensaje.”
    e intentando muchas formas y nada ojala que me puedan ayudar
    de antemano Muchas Gracias Bendiciones!
    No A lA SOPA


  45. admin dice:

    Esto no tiene nada que ver con los menús personalizados.

    De todas formas prueba con el permalink por defecto a ver si se soluciona.

    Saludos


  46. Invitado dice:

    Hola. Estoy dando mis primeros pasos un WordPress y tengo un problema, espero puedan ayudarme. Resulta que cuando creo una página, y le pongo el título, me aparece el mismo nombre en el menú. ¿Cómo hago para poner un nombre diferente al menú del título de mi página? Muchas Gracias y disculpen si la pregunta es tonta, pero desde hace varios dias que no puedo resolverlo. PD. estoy usando el theme Twenty Ten.


  47. admin dice:

    Aunque la pregunta no tiene nada que ver con los menús personalizados te la respondo rápido.

    Cuando creas una página puedes poner diferentes nombres para la página y el permalink, no tiene por qué ser igual el nombre de la página al que se muestra en el blog. Ejemplo, enralados.com/about es el link y lo que sale en el blog es Acerca de.

    Incluso en los menús personalizados puedes cambiar el nombre de la página y los distintos elementos.

    Un saludo


  48. Invitado dice:

    Primero que todo te felicito por este post esta excelente. Haces ver el php un poco más fácil. Te queria pedir tu ayuda, tengo una pagina que estoy haciendo con una plantilla que efectivamente no estaba preparada para menus, ya que me salia el mismo mensaje que tu pusiste al principio. Esa parte ya la cree en el functions.php Ya cree los dos menus y sustitui el codigo en el header.php usando el wp_nav_menu; tanto en el menu primary como en el menu secondary.

    Los dos menus se han creado y en la posición donde los necesito, lo unico malo es que no han adquirido los estilos .css que trae la plantilla. Por ejemplo me salen los dos menus vertical y los necesito horizontal; de igual forma los colores de los textos, etc. Me imagino que este problema es porque la clase ‘menu-header’ no existe en el .css de los menus en esta plantilla. Esta plantilla trae un archivo css propio para los menus que se llama: menusm.css dentro del cual se encuentran todos los estilos de ambos menus. Estos estilos css vienen desglosados similar a los menu spry de Dreamweaver. Tu me entiendes (ul li ul li a). Entonces no se que poner en vez de menu-header que agarre todos los estilos de cada menu.

    La url de la pagina es: http://medhica.org/

    Si me puedes hechar la mano te lo agradeceré

    Saludos

    Leo.


  49. admin dice:

    Efectivamente la clase menu-header no tiene por qué llamarse así, la puedes adaptar a la que tiene tu theme, o incluso quitarla tal como dije en el artículo. “…puedes usar otro nombre para container_class siempre que definas sus propiedades en la hoja de estilos style.css o incluso no usar ninguno…”

    Se trata de sustituir la función que genera los menús en el theme, por wp_nav_menu, el resto puede permanecer igual.

    Es cuestión de conocer bien el theme o plantilla.

    Un saludo


  50. Invitado dice:

    Hola necesito ayuda por favor!!
    necesito integrar este menú:
    “http://apycom.com/menus/7-orange.html?affid=W4JQ-MN29”
    a mi sitio wordpress pero cuando agrego edito el menu y agrego los links en header.php .. no se como puedo hacer la correspondencia para que los botones de dicho menu css se muestren en las paginas de mi blog!! SI me puede alguien ayudar estaré eternam