menuiconswp

Cómo agregar íconos de imagen con menús de navegación en WordPress

¿Quieres agregar íconos de imagen en los menús de navegación de WordPress? Recientemente, uno de nuestros usuarios solicitó una forma sencilla de agregar íconos de menú. En este artículo, le mostraremos cómo agregar íconos de imagen con menús de navegación en WordPress.

Agregar iconos de menú de navegación en WordPress

¿Por qué debería agregar iconos de imagen con menús de navegación?

Contents

Por lo general, los menús de navegación de WordPress son enlaces de texto sin formato. Estos enlaces funcionan para la mayoría de los sitios web, pero puede hacer que su menú de navegación sea más interactivo agregando íconos de imágenes. Los iconos de imagen también se pueden utilizar para hacer que su menú sea más visible. Por ejemplo, un bonito icono de imagen junto a su página de contacto puede hacer que se destaque entre otros enlaces en su menú. Dicho esto, veamos cómo agregar fácilmente íconos de imagen con menús de navegación en WordPress.

Video tutorial

Suscríbase a MundoCMS Si no desea ver el video tutorial, puede continuar leyendo la versión de texto a continuación:

Método 1: agregar iconos de menú mediante un plugin

Este método es más simple y recomendado para usuarios novatos porque no involucra ningún código. Lo primero que debe hacer es instalar y activar el plugin del menú Imagen. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras la activación, debe visitar Apariencia »Menús página. Desde aquí puede hacer clic en cualquier elemento del menú en la columna de la derecha para expandirlo. Verá los botones «Imagen de menú» e «Imagen flotante» en la configuración de cada elemento.
Botones de imagen de menú
Con estos botones, puede seleccionar o descargar el icono de imagen de menú que desea utilizar. Si lo desea, puede simplemente cargar una imagen de menú e ignorar la imagen de desplazamiento. En la lista desplegable «Tamañ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 flotante. El plugin viene con varias opciones para elegir. Sin embargo, le recomendamos que mantenga los iconos del menú pequeños utilizando formatos 24 × 24 o 36 × 36.
Tamaño del icono del menú
Si desea agregar su propio tamaño personalizado para las imágenes del menú, puede hacerlo agregando este código en el archivo functions.php de su tema o en el plugin específico del sitio. add_filter (‘menu_image_default_sizes’, function ($ tamaños) {// elimina el tamaño indefinido predeterminado de 36×36 ($ tamaños[‘menu-36×36’]); // agrega un nuevo tamaño $ tamaños[‘menu-50×50’] = mesa (50,50); // return $ tamaños (obligatorio) return $ tamaños; }); 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 mostrar solo el icono de imagen para cada menú de navegación.
Posición del título
Una vez que haya configurado la configuración, simplemente agregue íconos de imagen a todos los elementos del menú de navegación por separado. Luego, debe hacer clic en el botón «Guardar menú» para ver los iconos del menú en acción.
Iconos de imagen en el menú de navegación

Método 2: agregar iconos de menú mediante un fragmento de código

Este método está destinado a usuarios más experimentados que estén familiarizados con CSS. En primer lugar, debes visitar Medios »Agregar nuevo para cargar todos los íconos de sus imágenes en WordPress. Una vez descargado, debe copiar sus URL y pegarlas en un editor de texto como el Bloc de notas. Entonces tienes que ir a Apariencia »Menús y haga clic en el botón «Opciones de pantalla» en la esquina superior derecha de su pantalla. En las opciones de pantalla, debes marcar la opción ‘Clases CSS’.
Agregar clases de CSS
Después de eso, desplácese hacia abajo y haga clic en cualquier elemento del menú para expandir su configuración. Verá un campo ‘Clases CSS (opcional)’ donde debe agregar un nombre de clase CSS para el elemento del menú.
Agrega un nombre de clase
Ahora necesitas agregar este CSS personalizado a tu tema. .homeicon {imagen de fondo: url (‘http://www.example.com/wp-content/uploads/2018/09/home.png’); repetición de fondo: sin repetición; posición de fondo: izquierda; padding-left: 5px; } En este fragmento de CSS, .homeicon es el nombre de la clase que agregó en el campo Clases CSS anterior. Dependiendo de su tema, es posible que deba modificar un poco el CSS para obtener la ubicación perfecta para los íconos del menú. Una vez que esté satisfecho con el resultado, repita el proceso para todos los elementos del menú. Es todo. Esperamos que este artículo le haya ayudado a aprender cómo agregar íconos de imagen 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 le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply