¿Desea agregar iconos de imágenes en sus menús de navegación de WordPress? Recientemente, uno de nuestros usuarios solicitó una manera fácil 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.
¿Por qué debería agregar iconos de imagen con menús de navegación?
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; sin embargo, puede hacer que su menú de navegación se vea más interactivo agregando íconos de imagen.
Los íconos de imagen también se pueden usar para hacer que su menú sea más notorio. Por ejemplo, un hermoso ícono de imagen al lado de su página de contacto puede hacer que se destaque entre otros enlaces en su menú.
Dicho esto, echemos un vistazo a cómo agregar fácilmente íconos de imagen con menús de navegación en WordPress.
Videotutorial
Si no desea ver el video tutorial, puede continuar leyendo la versión de texto a continuación:
Método 1: agregar íconos de menú usando un complemento
Este método es más fácil y se recomienda para usuarios principiantes porque no requiere código.
Lo primero que debe hacer es instalar y activar el Imagen del menú enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento 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 al pasar el mouse’ en la configuración de cada elemento.
Con estos botones, puede seleccionar o cargar el icono de imagen de menú que desea utilizar. Si lo desea, puede simplemente cargar una imagen de menú e ignorar la imagen flotante.
En el menú desplegable «Tamaño de la imagen», puede seleccionar un tamaño para el icono de la imagen. Este tamaño se aplicará tanto a la imagen del icono del menú como a la imagen al pasar el mouse.
El complemento viene con múltiples opciones para elegir. Sin embargo, recomendamos mantener los iconos de menú pequeños usando tamaños de 24×24 o 36×36.
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 complemento específico del sitio.
add_filter( 'menu_image_default_sizes', function($sizes){
// remove the default 36x36 size
unset($sizes['menu-36x36']);
// add a new size
$sizes['menu-50x50'] = array(50,50);
// return $sizes (required)
return $sizes;
});
También puede establecer la posición del título encima, debajo, antes o después del icono de la imagen. También le permite ocultar el título y mostrar solo el icono de la imagen para cada menú de navegación.
Una vez que haya configurado los ajustes, simplemente agregue 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 íconos del menú en acción.
Método 2: agregar íconos de menú usando un fragmento de código
Este método es para usuarios más experimentados que saben manejar CSS.
Primero, debes visitar Medios » Agregar nuevo para cargar todos sus iconos de imágenes en WordPress. Una vez cargada, debe copiar sus URL y pegarlas en un editor de texto como el Bloc de notas.
A continuación, debe 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 la pantalla, debe marcar la opción ‘Clases 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 de ‘Clases CSS (Opcional)’ donde necesita agregar un nombre de clase CSS para el elemento del menú.
Ahora necesita agregar este CSS personalizado a su tema.
.homeicon {
background-image: url('http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
En este fragmento de CSS, .homeicon es el nombre de la clase que agregó en el campo Clases de CSS anterior.
Dependiendo de su tema, es posible que deba modificar un poco el CSS para obtener la ubicación perfecta para los íconos de menú. 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 lo 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.
.