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

¿Desea añadir iconos de imagen en sus menús de navegación de WordPress? Recientemente, uno de nuestros usuarios nos pidió una forma fácil de añadir iconos de menú. En este artículo, le mostraremos cómo añadir iconos de imágenes con menús de navegación en WordPress.

¿Por qué debe agregar iconos de imagen con los menús de navegación?

Normalmente, los menús de navegación de WordPress son enlaces de texto plano. Estos enlaces funcionan para la mayoría de los sitios web, sin embargo, puede hacer que su menú de navegación parezca más interactivo añadiendo iconos de imagen.

Los iconos de imagen también se pueden utilizar para hacer que su menú sea más notorio. Por ejemplo, un hermoso icono de imagen junto a su página de contacto puede hacer que destaque entre otros enlaces en su menú.

Dicho esto, echemos un vistazo a cómo añadir fácilmente iconos de imágenes con menús de navegación en WordPress.

Video Tutorial

Suscribirse a AprenderWP

Si no desea ver el video tutorial, puede continuar leyendo la versión de texto que aparece a continuación:

Método 1: Añadir iconos de menú usando un plugin

Este método es más fácil y se recomienda para usuarios principiantes porque no implica código.

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

Tras la activación, debe visitar la página Apariencia » Menús .

Desde aquí, puede hacer clic en cualquier elemento del menú en la columna de la derecha para expandirlo. Verá los botones Imagen del menú e Imagen en el flotador en los ajustes de cada elemento.

Con estos botones, puede seleccionar o cargar el icono de imagen de menú que desea utilizar. Si lo desea, puede subir una imagen de menú e ignorar la imagen flotante.

En el menú desplegableTamaño de imagen, puede seleccionar un tamaño para el icono de imagen. Este tamaño se aplicará tanto a la imagen del icono del menú como a la imagen al pasar el ratón por encima.

El plugin viene con múltiples opciones para elegir. Sin embargo, recomendamos mantener los iconos de los menús pequeños utilizando tamaños de 24×24 ó 36×36.

Si desea añadir su propio tamaño personalizado para las imágenes de menú, puede hacerlo añadiendo este código en el archivo functions.php del tema o en el plugin específico del sitio.

123456789101112add_filter( menu_image_default_sizes, function($sizes){ // remove the default 36×36 size unset($size[menu-36×36]); // add a new size $size[menu-50×50] = array(50,50); // return $sizes (required) return$sizes; });

También puede establecer la posición del título arriba, abajo, antes o después del icono de la imagen. También le permite ocultar el título y sólo mostrar el icono de la imagen para cada menú de navegación.

Una vez que haya configurado los ajustes, simplemente añada iconos de imagen a todos los elementos del menú de navegación por separado. A continuación, debe hacer clic en el botón «Guardar Menú» para ver los iconos de los menús en acción.

Método 2: Adición de iconos de menú mediante Code Snippet

Este método es para usuarios más experimentados que conocen bien el CSS.

Primero, necesitas visitar Media » Add New para subir todos tus iconos de imagen en WordPress. Una vez cargadas, necesita copiar sus URLs y pegarlas en un editor de texto como el Bloc de notas.

A continuación, debe ir a Apariencia » Menús y hacer clic en el botón `Opciones de pantalla en la esquina superior derecha de su pantalla. En las opciones de la pantalla, debe marcar la opciónClases CSS.

Después de eso, desplácese hacia abajo y haga clic en cualquier elemento del menú para expandir su configuración. Notará un campoClases CSS (Opcional) donde necesita agregar un nombre de clase CSS para el elemento de menú.

Ahora necesita agregar este CSS personalizado a su tema.

123456.homeicon {imagen de fondo: url(http://www.example.com/wp-content/uploads/2018/09/home.png);fondo-repetición: no repetición;fondo-posición: izquierda;relleno-izquierda: 5px;}

En este fragmento de CSS, .homeicon es el nombre de la clase que ha añadido en el campo Clases CSS de arriba.

Dependiendo del tema, es posible que necesite ajustar un poco el CSS para obtener la ubicación perfecta para los iconos de los menús. Una vez que esté satisfecho con el resultado, repita el proceso para todos los elementos del menú.

Eso es todo. Esperamos que este artículo le haya ayudado a aprender a añadir iconos de imágenes con menús de navegación en WordPress. También puede consultar nuestra guía sobre cómo diseñar los menús de navegación de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario