Cómo agregar 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. Por nuestra experiencia práctica con el diseño web, hemos aprendido que agregar iconos de imagen a los menús de navegación de WordPress puede mejorar drásticamente la usabilidad de su sitio.

Esto se debe a que los iconos de imagen pueden proporcionar pistas visuales intuitivas a sus visitantes, lo que les facilita la navegación por su sitio. De esta manera, 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 agregar fácilmente iconos de imagen a los menús de navegación en WordPress. 

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

Por lo general, los menús de navegación de WordPress son enlaces de texto plano. Estos enlaces funcionan bien para la mayoría de los sitios web, pero no siempre se ven interesantes o atractivos. 

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

Si su menú tiene muchas opciones diferentes, los iconos de imagen pueden facilitar que los visitantes escaneen el contenido y encuentren lo que buscan. Esta puede ser una forma fácil de aumentar las visitas a la página y reducir la tasa de rebote en WordPress. 

Incluso podrías usar un ícono de imagen para resaltar el elemento de menú más importante, como el enlace de Pago en tu mercado en línea. 

Al resaltar una llamada a la acción en el menú, a menudo puedes obtener más registros, ventas, miembros y otras conversiones.

Dicho esto, veamos cómo puedes agregar íconos de imagen a tu menú de navegación de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Método 1: Agregar íconos de imagen a menús de navegación usando un plugin (Rápido y fácil)
• Método 2: Agregar íconos a menús de WordPress usando código (Más personalizable)
• Extra: Agregar íconos de redes sociales a menús de WordPress

Método 1: Agregar íconos de imagen a menús de navegación usando un plugin (Rápido y fácil)

La forma más fácil de agregar íconos a tus menús de WordPress es usando Menu Image. Este plugin viene con íconos dashIcon que puedes agregar con solo unos pocos clics.

Si has configurado Font Awesome en tu sitio web, entonces puedes agregar fácilmente estos íconos 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 agregar fácilmente fuentes de íconos a tu tema de WordPress.

Otra opción es usar imágenes o íconos de la biblioteca de medios de WordPress.

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

Tras la activación, haz clic en Menu Image en el panel de WordPress. En esta pantalla, puedes elegir si deseas recibir notificaciones de seguridad y funciones o hacer clic en el botón 'Omitir'.

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

Si planeas usar iconos de Font Awesome o dashicons, entonces Menu Image los redimensionará automáticamente. Sin embargo, si usas imágenes de la biblioteca de medios, entonces necesitarás seleccionar el tamaño manualmente.

El plugin soporta los tamaños de imagen predeterminados de WordPress, como miniaturas, imágenes y grandes. También añade tres tamaños únicos que están configurados a 24x24, 36x36 y 48x48 píxeles por defecto.

Estas configuraciones deberían funcionar bien para la mayoría de los sitios web, pero puedes hacer que los íconos sean más grandes o más pequeños escribiendo diferentes números para el tamaño de la 1ª, 2ª o 3ª imagen del menú.

Cuando agregues íconos a tu menú, verás un campo de 'imagen al pasar el cursor' por defecto. Esto te permite mostrar un ícono diferente cuando el visitante pase el cursor sobre ese elemento del menú.

Solo ten en cuenta que esta configuración solo está disponible cuando usas tus propias imágenes. No necesitas preocuparte por la función de 'imagen al pasar el cursor' si planeas usar dashIcons o íconos de Font Awesome.

Mostrar un ícono diferente puede ayudar a los visitantes a ver dónde se encuentran en el menú de navegación. Esto es particularmente útil si tu menú tiene muchos elementos diferentes. Por ejemplo, podrías usar diferentes colores o tamaños de íconos para resaltar el elemento seleccionado actualmente.

Si deseas crear diferentes efectos al pasar el cursor, asegúrate de marcar 'Habilitar el campo de imagen al pasar el cursor'.

Hecho esto, haz clic en 'Guardar Cambios' para almacenar tu configuración.

Para agregar íconos al menú de navegación, dirígete a la página Apariencia » Menús. Por defecto, WordPress mostrará el menú principal de tu sitio.

Si deseas editar un menú diferente, simplemente abre el menú desplegable 'Seleccionar un menú para editar' y elige un menú de la lista. Después de eso, haz clic en 'Seleccionar'.

Ahora, pasa el cursor sobre el primer elemento del menú donde deseas agregar un ícono. Cuando aparezca 'Imagen del menú', haz clic en él.

Ahora puedes decidir si usar tu propia imagen o elegir un ícono prefabricado, como un ícono de Font Awesome.

Para usar un ícono prefabricado, haz clic en el botón de opción junto a 'Íconos'.

Luego puedes hacer clic para seleccionar cualquier dashicon o ícono de Font Awesome.

Si deseas usar tu propia imagen, selecciona el botón de opción junto a 'Imagen' y haz clic en el enlace 'Establecer Imagen'.

Ahora puedes elegir una imagen de la biblioteca de medios de WordPress o subir un nuevo archivo desde tu computadora.

Si marcaste 'Habilitar el campo de imagen al pasar el cursor' en la configuración del plugin, también deberás hacer clic en 'Establecer imagen al pasar el cursor'.

Ahora, elige una imagen para mostrar cuando el usuario pase el cursor sobre este elemento del menú.

A veces, es posible que desees ignorar esta configuración y mostrar el mismo ícono sin importar qué. Para hacer esto, haz clic en ‘Establecer imagen al pasar el cursor’ y luego elige el mismo ícono exacto.

Si no seleccionas una imagen, el ícono desaparecerá por completo cuando el visitante pase el cursor sobre él.

Después de eso, abre el menú desplegable Tamaño de imagen y elige un tamaño de la lista.

Usar el mismo tamaño para todos los íconos tiende a hacer que el menú se vea más organizado. Sin embargo, a veces es una buena idea usar un ícono más grande para el elemento más importante.

Por ejemplo, si has creado una tienda en línea usando un plugin como WooCommerce, entonces podrías usar un ícono más grande para ‘Finalizar compra’ para que destaque.

Cuando estés satisfecho con el ícono, es hora de ver la etiqueta del elemento del menú. Por defecto, el plugin muestra la etiqueta del título después del ícono.

Para cambiar esto, selecciona cualquiera de los botones de opción en la sección ‘Posición del título’.

Otra opción es eliminar la etiqueta de navegación por completo y crear un menú solo con íconos. Si tu menú tiene muchos elementos, esto puede hacer que se vea menos abarrotado.

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

Para proceder y ocultar la etiqueta, selecciona el botón de opción junto a ‘Ninguno’.

Cuando estés satisfecho con la configuración del elemento del menú, haz clic en ‘Guardar cambios’.

Para agregar un ícono a otros elementos del menú, simplemente sigue el mismo proceso descrito anteriormente.

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

Método 2: Agregar íconos a menús de WordPress usando código (Más personalizable)

También puedes agregar íconos de imagen a tus menús de navegación usando CSS.

De esta manera, puedes controlar exactamente dónde aparecen los íconos en tus menús. También puedes usar cualquier imagen como ícono, por lo que es una excelente manera de agregar tu propia marca.

Antes de empezar, sube todos los archivos de imagen que quieras usar como tus íconos. Estas podrían ser fotos de stock, imágenes gratuitas que encontraste en línea o gráficos personalizados creados con una aplicación como Canva.

Después de agregar cada imagen a la biblioteca de medios de WordPress, asegúrate 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ónala en la biblioteca de medios de WordPress y luego busca el campo 'URL del archivo'.

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

Después de eso, necesitas visitar la página Apariencia » Menús desde el panel de WordPress.

A continuación, abre el menú desplegable 'Seleccionar un menú para editar' y elige el menú al que deseas agregar los íconos de imagen.

Después de eso, haz clic en 'Seleccionar'.

A continuación, necesitas habilitar las clases CSS personalizadas haciendo clic en 'Opciones de pantalla'.

En el panel que aparece, marca la casilla junto a 'Clases CSS'.

Con eso hecho, puedes agregar clases CSS personalizadas a cualquier elemento del menú de navegación. Así es como vincularás cada elemento del menú a una imagen en 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 del menú.

Para empezar, simplemente haz clic en el primer elemento al que deseas agregar un ícono de imagen. En el campo 'Clases CSS (opcional)', escribe el nombre de la clase que deseas usar.

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

Simplemente sigue el mismo proceso para agregar una clase separada a todos tus elementos del menú. Después de eso, haz clic en 'Guardar menú' para almacenar tu configuración.

Ahora estás listo para agregar íconos de imagen a tus menús de navegación de WordPress usando CSS.

A menudo, los tutoriales de WordPress te dirán que agregues fragmentos de código a los archivos de tu tema de WordPress. Sin embargo, hacerlo puede causar errores comunes de WordPress y no es muy amigable para principiantes.

Es por eso que recomendamos WPCode.

Es el mejor plugin de fragmentos de código de WordPress utilizado por más de 1 millón de sitios web y te permite agregar código personalizado sin editar el archivo functions.php de tu tema.

Lo primero que debes 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.

Al activar, dirígete a Fragmentos de código » Agregar fragmento.

Esto te llevará a la página ‘Agregar fragmento’, donde podrás ver la biblioteca de fragmentos listos de WPCode. Estos incluyen fragmentos que te permiten mejorar la  seguridad de WordPress al deshabilitar XML-RPC, subir tipos de archivo que WordPress no soporta por defecto, y más.

Simplemente coloca el cursor sobre ‘Agregar tu código personalizado’ y luego haz clic en ‘Usar fragmento’ cuando aparezca.

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

Hecho esto, abre el menú desplegable ‘Tipo de código’ y selecciona ‘Fragmento CSS’.

En el editor de código, necesitarás agregar algo de código por cada ícono que quieras mostrar.

Para ayudarte, hemos creado un fragmento de ejemplo a continuación. Puedes proceder a cambiar ‘.carticon’ por la clase CSS personalizada que creaste en el paso anterior. También necesitarás reemplazar la URL con 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; } 

Necesitarás ajustar el fragmento anterior para cada elemento de menú individual que creaste anteriormente.

Cuando estés satisfecho con tu código, desplázate hasta la sección ‘Inserción’. WPCode puede agregar código a diferentes ubicaciones, como después de cada publicación, solo en el frontend o solo en el administrador.

Para usar el código CSS personalizado en todo tu blog o sitio web de WordPress, haz clic en ‘Insertar automáticamente’ si aún no está seleccionado.

Luego, abre el menú desplegable ‘Ubicación’ y elige ‘Encabezado de todo el sitio’.

Después de eso, estás listo para desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’ para que cambie a ‘Activo’.

Finalmente, haz clic en ‘Guardar fragmento’ para que el CSS personalizado se active.

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

Dependiendo de tu tema de WordPress, es posible que necesites ajustar el CSS para que muestre los íconos 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 panel de administración de WordPress.

Luego, simplemente pasa el cursor sobre el fragmento y haz clic en el enlace ‘Editar’ cuando aparezca.

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

Extra: Agregar íconos de redes sociales a menús de WordPress

Además de los íconos del menú, también puedes agregar íconos de redes sociales a tu menú de navegación de WordPress. Hacer esto ayudará a promocionar tus perfiles de redes sociales de una manera visualmente atractiva sin ocupar demasiado espacio en tu sitio.

Para hacer esto, puedes usar el plugin Menu Image. Una vez activado, simplemente visita la página Apariencia » Menús desde el panel de administración de WordPress y expande la pestaña ‘Enlaces personalizados’ en la columna izquierda.

Luego, agrega la URL de tu ID de red social y escribe el nombre de la plataforma. A continuación, haz clic en el botón ‘Agregar al menú’.

Una vez que el perfil de red social se haya agregado como un elemento del menú, se mostrará en el lado derecho de la pantalla.

Aquí, debes expandir la pestaña de elementos nuevamente y hacer clic en el botón ‘Imagen del menú’.

Esto abrirá un nuevo cuadro de diálogo en la pantalla donde puedes hacer clic en el enlace ‘Establecer imagen’ para subir un ícono de redes sociales desde tu biblioteca de medios.

Si deseas agregar un ícono prefabricado, puedes seleccionar la opción ‘Ícono’ y agregar tu ícono de redes sociales desde FontAwesome.

Finalmente, haz clic en el botón 'Guardar Cambios' para almacenar tu configuración.

Ahora has agregado exitosamente un ícono de redes sociales a tu menú de navegación. Para más información, consulta nuestro tutorial sobre cómo agregar íconos de redes sociales en menús de WordPress.

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

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.