En este artículo, les mostraremos cómo agregar íconos de imagen con menús de navegación en WordPress.
Método 1: agregar iconos de menú mediante 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 de Menu Image.
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 ‘Menu image’ e ‘Image on hover’ en la configuración de cada elemento.
Con estos botones, puede seleccionar o cargar el icono de imagen del menú que deseas utilizar. Si lo deseas, puede simplemente cargar una imagen de menú e ignorar la imagen al pasar el puntero del mouse sobre ella.
En el menú desplegable ‘Image size’, puedes seleccionar un tamaño para el icono. Este tamaño se aplicará tanto a la imagen del icono del menú como a la imagen al pasar el mouse sobre ella.
El complemento viene con múltiples opciones para elegir. Sin embargo, recomendamos mantener los iconos de menú pequeños utilizando tamaños de 24 × 24 o 36 × 36 pixeles.
Si deseas agregar tu propio tamaño personalizado para las imágenes del menú, puedes hacerlo agregando este código en el archivo functions.php de tu tema.
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 puedes establecer la posición del texto encima, debajo, antes o después del icono de la imagen. También te permite ocultar el texto y mostrar solo el icono de imagen para cada menú de navegación.
Una vez que hayas configurado los ajustes, simplemente agregua 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 el menú en acción.
Método 2: agregar iconos de menú mediante código CSS
Este método es para usuarios más experimentados que conocen CSS.
Primero, debes visitar Medios »Agregar nuevo para cargar todos tus íconos de imagen en WordPress. Una vez cargados, debe copiar sus URL y pegarlas en un editor de texto como el Bloc de notas.
A continuación, debes ir a Apariencia »Menús y hacer clic en el botón ‘ Opciones de pantalla ‘ en la esquina superior derecha de ta pantalla. En las opciones de pantalla, debe marcar la opción ‘Clases CSS’.
Después de eso, ve hacia abajo y haz clic en cualquier elemento del menú para expandir su configuración. Notarás un campo ‘Clases CSS (opcional)’ donde debes agregar un nombre de clase CSS para el elemento del menú.
Ahora necesitas agregar este CSS personalizado a tu 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 clase que agregaste en el campo Clases CSS.
Dependiendo de tu tema, es posible que debas modificar un poco el CSS para obtener la ubicación perfecta para los iconos de menú. Una vez que esté satisfecho con el resultado, repite el proceso para todos los elementos del menú.
