En este artículo veremos cómo agregar imágenes a los ítems de menú en WordPress directamente a través de código, nos ayudaremos de una clase CSS personalizada para identificar el ítem de menú.
Resultado Final
Al final obtendremos algo similar a la siguiente imagen:
Identificando ítems de menú para agregarles imágenes
Será necesario identificar los ítems de menú a través de una clase CSS personalizada, para luego, a través de código, agregar la imagen que le corresponde.
Primero habilitamos la opción de CSS para los ítems de menú desde: Apariencia > Menú > Opciones de pantalla.
Luego por cada ítem de menú aparecerá una nueva opción para agregar el nombre de la clase CSS personalizada.
Agregando código CSS
En base a las clases CSS agregadas entonces podemos agregar el siguiente código de ejemplo:
.menu-item.home a::before,
.menu-item.shop a::before{
content:"";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
background-size:16px 16px;
background-repeat:no-repeat;
}
.menu-item.home a::before{
background-image:url('http://wordpress6.local/wp-content/uploads/2023/11/home.png');
}
.menu-item.shop a::before{
background-image:url('http://wordpress6.local/wp-content/uploads/2023/11/store.png');
}
En el código anterior:
- Se agregó imágenes a dos ítems de menú, con las clases .home y .shop
- Usamos un pseudo-elemento para el enlace y en ese elemento agregar la imagen como fondo
- Agrupamos el código común a todos los ítems que tendran imágenes
- Luego por cada ítem específico cambiamos la imagen correspondiente
Conclusión
Como has podido comprobar, puedes agregar imágenes a los ítems de menú de tu sitio web de forma simple usando parte de la funcionalidad de WordPress y a través de código CSS.