Imágenes en los menús personalizados de WordPress

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.

menu de iconos

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:

  1. Crea una clase CSS para cada imagen o icono que vayas a usar en un menú. Aquí desarrolla tu habilidad e imaginación.
  2. Ve a «Apariencia -> Menús», despliega las «Opciones de pantalla» y marca la casilla denominada «Clases CSS»
    imagen menu css 1
  3. Añade el elemento de menú personalizado con la URL y etiqueta que desees
    imagen menu css 2
  4. 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
    imagen menu css 3
  5. 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:

  1. Instalas y activas el plugin
  2. Añades un elemento de enlace personalizado al menú como harías habitualmente
  3. Guardas los cambios en el menú (si, ahora, tu hazme caso)
  4. 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
  5. Se abre el cargador de medios de WordPress, eliges una imagen y la asignas
  6. Guardas de nuevo los cambios

imagen menu mediante plugin

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.

imagenes en menu wordpress

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(13 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

21 comentarios en “Imágenes en los menús personalizados de WordPress”

    1. 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 😉

  1. 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.

    1. 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

  2. Paulino Perez

    Muy bueno solo que los iconos eran demaciado grande y dañaban la barrra la ponian muy grande y nunca quedaban centados

  3. Gracias coloque en mi menu con el metodo ñapa una bandera de españa para representar mi pagina en español
    muy muy sencillo

    1. 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 ???

  4. Pingback: Tutorial Divi: Cómo crear un mega menú sin plugins ni códigos

  5. Pingback: Añadir imágenes a los menús de WordPress

  6. Tekila Design

    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

  7. 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido