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.

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»
   
3. Añade el elemento de menú personalizado con la URL y etiqueta que desees
   
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
   
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

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!

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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)