Cómo añadir iconos de imagen a los menús de navegación de WordPress

A lo largo de los años, hemos ayudado a miles de lectores a personalizar sus sitios de WordPress para mejorar tanto la experiencia del usuario como el atractivo visual. Gracias a nuestra experiencia práctica en diseño web, hemos aprendido que añadir iconos de imagen a los menús de navegación de WordPress puede mejorar drásticamente la usabilidad de su sitio.

Y es que los iconos de imagen pueden proporcionar pistas visuales intuitivas a sus visitantes, facilitándoles la navegación por su sitio. De este modo, la interfaz de su sitio web es más interactiva y atractiva, lo que ayuda a reducir la tasa de rebote.

En este artículo, le mostraremos cómo añadir fácilmente iconos de imagen a los menús de navegación en WordPress.

¿Por qué añadir iconos de imagen a los menús de navegación de WordPress?

Normalmente, los menús de navegación de WordPress son enlaces de texto plano. Estos enlaces funcionan bien en la mayoría de sitios web, pero no siempre resultan interesantes o atractivos.

Si añade iconos de imagen al menú de navegación, animará a los visitantes a prestar atención al menú y a explorar más su sitio.

Si su menú tiene muchas opciones diferentes, los iconos de imagen pueden facilitar que los visitantes exploren el contenido y encuentren lo que buscan. Esta puede ser una forma sencilla de aumentar las páginas vistas y reducir la tasa / tarifa de rebote en WordPress.

Incluso puede utilizar un icono de imagen para resaltar el elemento / artículo más importante del menú, como el enlace finalizar compra / pago en su mercado en línea.

Al destacar una llamada a la acción en el menú, a menudo puede conseguir más inscripciones, ventas, miembros y otras conversiones.

Dicho esto, veamos cómo puedes añadir iconos de imagen a tu menú de navegación de WordPress. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar:

Método 1: Añadir iconos de imagen a los menús de navegación utilizando un plugin (rápido y fácil)

La forma más fácil de añadir iconos a tus menús de WordPress es usando Menu Image. Este plugin viene con iconos dashIcon que se pueden añadir con sólo unos pocos clics.

Si has establecido Font Awesome en tu sitio web, entonces puedes añadir fácilmente estos iconos a tu menú de navegación usando Menu Image. Para obtener más información sobre cómo instalar Font Awesome, consulta nuestra guía sobre cómo añadir fácilmente fuentes de iconos a tu tema de WordPress.

Otra opción es utilizar imágenes o iconos de la biblioteca de medios de WordPress.

Lo primero que debe hacer es instalar y activar el plugin Menu Image. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, haga clic en Imagen de menú en el escritorio de WordPress. En esta pantalla, puede elegir si desea recibir avisos de seguridad y características o hacer clic en el botón “Omitir”.

Esto le llevará a una pantalla donde podrá establecer los ajustes del plugin. Para empezar, verás todos los diferentes tamaños que puedes usar para los iconos de imagen.

Si piensa utilizar iconos de Font Awesome o dashicons, Menu Image cambiará su tamaño automáticamente. Sin embargo, si utiliza imágenes de la biblioteca de medios, tendrá que seleccionar el tamaño manualmente.

El plugin es compatible con los tamaños de imagen por defecto de WordPress, como miniaturas, imágenes y grande. También añade tres tamaños únicos que se establecen por defecto en 24×24, 36×36 y 48×48 píxeles.

Estos ajustes deberían funcionar bien para la mayoría de los sitios web, pero puede hacer que los iconos sean más grandes o más pequeños introduciendo números diferentes para el tamaño de la primera, segunda o tercera imagen de menú.

Cuando añada iconos a su menú, verá por defecto un campo de “imagen al pasar el cursor”. Esto le permite mostrar un icono diferente cuando el visitante pasa el cursor sobre ese elemento / artículo del menú.

Ten en cuenta que este ajuste solo está disponible si utilizas tus propias imágenes. No necesitas preocuparte acerca de la característica “imagen al pasar el cursor” si planeas usar dashIcons o iconos Font Awesome.

Mostrar un icono diferente puede ayudar a los visitantes a saber en qué parte del menú de navegación se encuentran. Esto es especialmente útil si su menú tiene muchos elementos / artículos diferentes. Por ejemplo, puedes utilizar distintos colores o tamaños de icono para resaltar el elemento / artículo seleccionado.

Si quieres crear diferentes efectos al pasar el cursor, asegúrate de marcar / comprobar ‘Activar la imagen al pasar el cursor’.

Una vez hecho esto, haz clic en “Guardar cambios” para establecer los ajustes.

Para añadir iconos al menú de navegación, diríjase a la página Apariencia ” Menús. Por defecto, WordPress mostrará el menú principal de su sitio.

Si desea editar un menú diferente, sólo tiene que abrir el menú desplegable “Seleccionar un menú para editar” y elegir un menú de la lista. A continuación, haga clic en “Seleccionar”.

Ahora, pasa el cursor sobre el primer elemento / artículo del menú al que quieras añadir un icono. Cuando aparezca ‘Imagen de menú’, dale un clic.

Ahora puede decidir si desea utilizar su propia imagen o elegir un icono ya preparado, como un icono de Font Awesome.

Para utilizar un icono ya preparado, haga clic en el botón de opción situado junto a “Iconos”.

A continuación, puede hacer clic para seleccionar cualquier icono dashicon o Font Awesome.

Si desea utilizar su propia imagen, seleccione el botón de opción situado junto a “Imagen” y haga clic en el enlace “Establecer imagen”.

Ahora puede elegir una imagen de la biblioteca de medios de WordPress o subir un nuevo archivo desde su ordenador.

Si ha marcado “Activar el campo de imagen al pasar el cursor” en los ajustes del plugin, también tendrá que hacer clic en “Establecer imagen al pasar el cursor”.

Ahora, elija una imagen para mostrar cuando el usuario pase el cursor sobre este elemento / artículo del menú.

A veces, es posible que desee ignorar este ajuste y mostrar el mismo icono pase lo que pase. Para ello, haga clic en “Establecer imagen al pasar el cursor” y elija exactamente el mismo icono.

Si no selecciona una imagen, el icono desaparecerá por completo cuando el visitante pase el cursor por encima.

A continuación, abra el menú desplegable Tamaño de imagen y elija un tamaño de la lista.

Utilizar el mismo tamaño para todos los iconos tiende a hacer que el menú parezca más organizado. Sin embargo, a veces conviene utilizar un icono más grande para el elemento / artículo más importante.

Por ejemplo, si ha creado una tienda en línea con un plugin como WooCommerce, puede utilizar un icono más grande para finalizar la compra, para que destaque.

Cuando esté satisfecho con el icono, es hora de mirar la etiqueta del elemento / artículo del menú. Por defecto, el plugin muestra la etiqueta del título después del icono.

Para modificarlo, seleccione cualquiera de los botones de opción de la sección “Posición del título”.

Otra opción es quitar / eliminar completamente la etiqueta de navegación y crear un menú de solo iconos. Si su menú tiene muchos elementos, esto puede hacer que parezca menos desordenado.

Sin embargo, solo debe ocultar las etiquetas si es obvio lo que significa cada icono. Si no está claro, los visitantes tendrán dificultades para navegar por tu blog o sitio web de WordPress.

Para ocultar la etiqueta, seleccione el botón de opción siguiente a “Ninguna”.

Cuando esté satisfecho con cómo se ha establecido el elemento / artículo, haga clic en “Guardar cambios”.

Para añadir un icono a otros elementos del menú, sólo tiene que seguir el mismo proceso descrito anteriormente.

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar menú”. Ahora, si visitas tu sitio web WordPress, verás el menú de navegación actualizado en directo.

Método 2: Añadir iconos a los menús de WordPress mediante código (más personalizable)

También puede añadir iconos de imagen a sus menús de navegación mediante CSS.

De este modo, puedes controlar exactamente dónde aparecen los iconos en tus menús. También puede utilizar cualquier imagen como icono, por lo que es una gran manera de añadir su propia imagen de marca / marca.

Antes de empezar, sube todos los archivos de imagen que quieras utilizar como iconos. Pueden ser fotos de inventario, imágenes sin derechos de autor que hayas encontrado en Internet o gráficos personalizados creados con una aplicación como Canva.

Después de añadir cada imagen a la biblioteca de medios de WordPress, asegúrese de copiar su URL y pegarla en un editor de texto como el Bloc de notas. Necesitarás todos estos enlaces en el siguiente paso.

Para encontrar la URL de una imagen, simplemente selecciónela en la biblioteca de medios de WordPress y luego mire en el campo ‘URL del archivo’.

Para obtener instrucciones más detalladas, consulte nuestra guía sobre cómo obtener la URL de las imágenes que sube en WordPress.

Después, debe visitar la página Apariencia ” Menús desde el escritorio de WordPress.

A continuación, abra el menú desplegable “Seleccionar un menú para editar” y elija el menú en el que desea añadir los iconos de imagen.

Después, sigue adelante y haz clic en “Seleccionar”.

A continuación, deberá activar las clases CSS personalizadas al hacer clic en “Opciones de pantalla”.

En el panel que aparece, marca / comprueba la casilla siguiente a ‘Clases CSS’.

Una vez hecho esto, puede añadir clases CSS personalizadas a cualquier elemento del menú de navegación. Así es como enlazará cada elemento / artículo del menú a una imagen de la biblioteca de medios de WordPress.

Puedes llamar a estas clases como quieras, pero es una buena idea usar algo que te ayude a identificar el elemento / artículo del menú.

Para empezar, simplemente haz clic en el primer elemento al que quieras añadir un icono de imagen. En el campo “Clases CSS (opcional)”, escriba el nombre de la clase que desee utilizar.

Utilizarás estas clases CSS personalizadas en el siguiente paso, así que anótalas en el Bloc de notas o en una aplicación similar.

Simplemente siga el mismo proceso para añadir una clase separada a todos sus elementos / artículos de menú. Después, haz clic en “Guardar menú” para establecer los ajustes.

Ahora está listo para añadir iconos de imagen a sus menús de navegación de WordPress usando CSS.

A menudo, los tutoriales de WordPress le dirán que añada fragmentos de código a los archivos de su tema de WordPress. Sin embargo, hacerlo puede provocar errores comunes de WordPress y no es muy fácil para los principiantes.

Por eso recomendamos WPCode.

Es el mejor plugin de fragmentos de código para WordPress utilizado por más de 1 millón de sitios web y le permite añadir código personalizado sin necesidad de editar el archivo functions.php de su tema.

Lo primero que tienes que hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, diríjase a Fragmentos de código ” Añadir fragmento.

Esto te llevará a la página ‘Añadir fragmento de código’, donde podrás ver la biblioteca de fragmentos de código de WPCode. Estos incluyen fragmentos que le permiten mejorar la seguridad de su WordPress desactivando XML-RPC, subir tipos de archivo que WordPress no es compatible con por defecto, y mucho más.

Simplemente pase el ratón por encima de “Añada su código personalizado” y haga clic en “Usar fragmento” cuando aparezca.

Para empezar, escriba un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento en el escritorio de WordPress.

Una vez hecho esto, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código CSS”.

En el editor de código, tendrás que añadir algo de código para cada icono que quieras mostrar.

Para ayudarte, hemos creado un fragmento de código de ejemplo a continuación. Puedes seguir adelante y cambiar ‘.carticon’ por la clase CSS personalizada que creaste en el paso anterior. También tendrás que sustituir la URL por un enlace a la imagen en tu biblioteca de medios de WordPress:

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Tendrá que ajustar el fragmento de código anterior para cada elemento / artículo de menú que haya creado anteriormente.

Cuando estés satisfecho con tu código, desplázate hasta la sección ‘Inserción’. WPCode puede añadir código en diferentes lugares, como después de cada entrada, solo en la portada / vista pública, o solo para el administrador.

Para utilizar el código CSS personalizado en todo su blog o sitio web de WordPress, haga clic en “Insertar automáticamente” si aún no está seleccionado.

A continuación, abra el menú desplegable “Ubicación” y elija “Cabecera para todo el sitio”.

A continuación, desplácese a la parte superior de la pantalla y haga clic en el conmutador “Inactivo” para que cambie a “Activo”.

Por último, haga clic en “Guardar fragmento de código” para que el CSS personalizado aparezca en pantalla.

Ahora, si visitas tu sitio web, verás todos los iconos de imagen en tu menú de navegación.

Dependiendo de su tema de WordPress, puede que tenga que retocar el CSS para que muestre los iconos de imagen exactamente en el lugar correcto. Si este es el caso, dirígete a Fragmentos de código ” Fragmentos de código en el escritorio de WordPress.

A continuación, sólo tiene que pasar el cursor sobre el fragmento de código y hacer clic en el enlace “Editar” cuando aparezca.

Esto abre el editor de código, que está listo para que usted haga algunos cambios.

Bonificación: Añadir iconos de medios sociales a los menús de WordPress

Además de los iconos de menú, también puedes añadir iconos de medios sociales a tu menú de navegación de WordPress. Esto te ayudará a promocionar tus perfiles de medios sociales de una forma visualmente atractiva sin ocupar demasiado espacio en tu sitio.

Para ello, puede utilizar el plugin Menu Image. Una vez activado, simplemente visite la página Apariencia ” Menús desde el escritorio de WordPress y expanda la pestaña ‘Enlaces personalizados’ en la columna de la izquierda.

A continuación, añade la URL de tu ID de medios sociales y escribe el nombre de la plataforma. A continuación, haz clic en el botón “Añadir al menú”.

Una vez añadido el perfil de medios sociales como elemento del menú, aparecerá en la parte derecha de la pantalla.

Aquí, debe volver a desplegar la pestaña de los elementos y hacer clic en el botón “Imagen del menú”.

Se abrirá una nueva indicación en la pantalla en la que podrá hacer clic en el enlace “Establecer imagen” para subir un icono de medios sociales desde su biblioteca de medios.

Si quieres añadir un icono prefabricado, puedes seleccionar la opción “Icono” y añadir el icono de tus medios sociales desde FontAwesome.

Por último, haz clic en el botón “Guardar cambios” para establecer los ajustes.

Has añadido correctamente un icono de medios sociales a tu menú de navegación. Para obtener más información, consulte nuestra guía práctica sobre cómo añadir iconos de medios sociales en los menús de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir iconos de imagen a tu menú de navegación de WordPress. También puedes consultar nuestra guía sobre cómo añadir lógica condicional a los menús en WordPress y cómo crear un menú de navegación flotante fijo en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.