Los menús personalizados son una auténtica maravilla, aunque hayan supuesto la desaparición del gestor de enlaces. Permiten poner a nuestro gusto los menús de navegación en WordPress mediante una interfaz visual, algo que antes solo era posible modificando código manualmente.
Con menús personalizados podemos añadir elementos a la barra de navegación de nuestro tema fácilmente, eso si, habitualmente solo con texto, pero eso se puede mejorar, y vamos a ver 3 maneras de añadir imágenes a los menús personalizados.
1. Añadir imágenes en los menús mediante clases CSS
Es el método menos sencillo, pero también el más personalizable, pues las posibilidades son infinitas, solo dependen de tus conocimientos de CSS.
Para crear un elemento de menú que sea una imagen mediante este método el proceso es el siguiente:
- Crea una clase CSS para cada imagen o icono que vayas a usar en un menú. Aquí desarrolla tu habilidad e imaginación.
- Ve a «Apariencia -> Menús», despliega las «Opciones de pantalla» y marca la casilla denominada «Clases CSS»
- Añade el elemento de menú personalizado con la URL y etiqueta que desees
- Despliega el elemento recién añadido y en el nuevo campo denominado «Clases CSS» pone el nombre de la que se aplicará a ese elemento concreto
- Guarda los cambios del menú … que siempre se te olvida
Y así para cada elemento que quieras añadir.
Es el método más complicado pero también el mejor pues la personalización puede ser total.
2. Añadir imágenes en los menús poniendo la URL de la imagen
Este método es un poco «ñapa» pero funciona de maravilla y es fácil de usar.
Lo que tienes que hacer es crear un nuevo enlace de menú de URL personalizada, pero en vez de poner un texto normal en el campo de etiqueta pones el código HTML con el que mostrarías la imagen en cuestión que quieras mostrar, o sea, algo cómo …
<img title="Texto emergente de mi imagen" src="https://misitio.es/imagenes/imagen.png" />
Lo añades al menú y ya está, simple y efectivo. El elemento de menú se verá un poco raro al tener una etiqueta tan larga y extraña pero funciona de maravilla.
Por el puntillo friki que tiene es al método que tengo más cariño.
3. Añadir imágenes en los menús con un plugin
Este método, cómo ya podrás imaginar, es sencillo a más no poder. Solo tienes que instalar un plugin llamado Nav menu images y empezar a usarlo. Ahora bien, no todo es tan bonito cómo parece.
A ver, no te asustes, que funcionar funciona, solo que requiere algún paso más del que imaginarás, pues en principio, al no tener página de ajustes ni nada parecido parece que no has instalado nada.
El proceso es el siguiente:
- Instalas y activas el plugin
- Añades un elemento de enlace personalizado al menú como harías habitualmente
- Guardas los cambios en el menú (si, ahora, tu hazme caso)
- Abres el elemento de menú recién añadido y verás un enlace bajo el campo de etiqueta para añadir una imagen al menú. Dale un clic
- Se abre el cargador de medios de WordPress, eliges una imagen y la asignas
- Guardas de nuevo los cambios
En realidad, cómo habrás visto, es sencillo, pero no es muy obvio que haya que guardar dos veces el menú, por lo que seguro que muchos han desinstalado el plugin antes de tiempo pensando que no funcionaba.
Bueno, y ya está, tu dirás qué método te ha gustado más, o incluso si conoces alguna manera más de hacer esto.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
La prueba se hizo con «Nimble Theme» xD
Si señor, veo que te gusta (y conoces) ET 🙂
Y no es una prueba, es el sitio oficial de mi nuevo libro sobre WordPress (wpguru.es), que pronto estará disponible 😉
Buenisimo aporte!
Llevo dos días desde mi completa ignorancia intentando poner una imagen. No sabes la alegría que me ha dado comprobar que el método ñapa es PERFECTO!!! Muchas gracias por iluminarme, eres mi nuevo mesias. JAJAJA.
Si es que las ñapas están injustamente desprestigiadas jeje
Como te ha funcionado ?? llevo dias intentando poner un icono en mi menu personalizado pero no funciona . SEra porque uso Wordpress.com Free 🙂 por favor ayuda con el metodo ñapa
se puede poner la imagen donde uno quiera? o esta definido ya a la izquierda
¡Excelente aporte!, ahora sólo me quede jugar con los efectos del Divi theme.
Hola, soy muy nueva en esto, acabo de intentar añadir la imagen con el plugin pero la imagen me aparece gigante
Ya he cambiado el tamaño de la imagen subiéndola de nuevo, hay alguna manera de hacerla responsive?
Muy bueno solo que los iconos eran demaciado grande y dañaban la barrra la ponian muy grande y nunca quedaban centados
Gracias coloque en mi menu con el metodo ñapa una bandera de españa para representar mi pagina en español
muy muy sencillo
Hola amigo me podrias ayudar estoy intentando el metodo ñapa sin plugins pero en wordpress.com y no me funciona no muestra el icono podrias ayudarme o a caso en wordpress.com free no funciona ???
No pensé que sería tan sencillo. Mil Gracias!
Poniendo la URL de la imagen… eres un crack! salió perfecto! justo lo que necesitaba, así puedo dejar el title»» (en blanco) y solo tengo la imagen!
Gracias
Me alegro 🙂
Hola, he utilizado el segundo metodo, pero para centrar los iconos en la cabezerac on el resto de iconos y texto del menú, lo debo de hacer con css o incrustar html en la linea de codigo que pusiste en su dia en el post, gracias
Tendrías que hacerlo en ese caso directamente en el html del elemento del menú o crear la clase CSS aparte y en las opciones del menú indicarle la clase a utilizar.
Gracias por tu respuesta, Fernando, ahora buscare cual es mejor, yo de codigo voy perdido…Un saludo
Hola tengo dos problemas:
1-Primer problema.
Como puedo poner una imagen de logo en el centro del menu con wordpress?
2- Segundo problema.
Como puedo poner el texto en la parte del footer que este divido por tres partes con una barra vertical separando los textos?
Ayuda porfavor.
Hola…
1. Mira a ver si el tema te deja hacerlo fácilmente en Apariencia > Personalizar, sino con CSS
2. Lo mismo
🙂