Icono Menú en WordPress, truco

APUNTES | Icono Menú en WordPress, truco

En esta ocasión te voy a enseñar un sencillo truco para agregar un icono menú. Te quedará un bonito menú si seleccionas bien los iconos. Para ello no necesitas instalar ningún plugin, tan solo un poquito de programación, pero no te preocupes, es muy fácil.

ICONO MENÚ

En primer lugar elegimos el icono a instalar en nuestro menú y lo subimos a nuestro WordPress. En el ejemplo he elegido el siguiente:

 

Icono carrito para el menú E-Commerce

Podéis conseguir iconos gratis en icons8.com. Hay miles de iconos y podéis darle el color que os interese. No olvidéis incluir un link a su web!

MEDIOS/AÑADIR NUEVO

Vamos al menú de WordPress, concretamente al menú de medios y le damos a añadir nuevo. Seleccionamos el icono que hemos descargado y lo subimos.

URL IMAGEN

Una vez subido, copiamos la URL del icono que queramos incluir, para eso le damos a “editar” en la imagen recién subida.

 

Forma de obtener la URL de una imagen en WordPress

 

APARIENCIA / MENÚS

Ya tenemos la URL de la imagen, ahora nos vamos a la sección Apariencia/Menús. Elegimos el menú que queremos editar. Después el elemento al que añadiremos la imagen. Entonces en el título del menú, antes o después depende de dónde lo queramos escribimos el siguiente código HTML:

 

En negrita dónde tenemos que copiar la URL del icono. Opcionalmente podemos darle “estilo” a la imagen, añadiendo por ejemplo el ancho máximo de 30px, en este caso.

Se puede agregar una clase css o id de imagen para darle margen, padding, etc. Más información sobre html src aquí y los estilos más comunes de imagen aquí. Esto ya son ajustes avanzados, hay que saber algo de css y dónde podemos incluirlo. Próximamente escribiré una entrada para enseñaros a añadir nuestro código CSS propio a la plantilla.

RESULTADO

Guardamos y comprobamos el resultado en nuestros menús:

 

Icono en el menú E-Commerce

 

Espero os resulte útil. Podéis aprender más de WordPress haciendo click aquí.

Dejar un comentario