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 …

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.

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

AVISO: esta publicación es de hace dos 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.

VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (12 votos, promedio: 5,00 de 5)
Cargando…

Al dejar una valoración se recopila la IP para evitar fraudes

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Ir al contenido