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:
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!
También podéis visitar la web de Font Awesome, con miles de iconos tanto gratis como de pago.
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:
<img src="/icons8-Carrito-de-compras-64.png" style="width:30px;"/> E-CommerceEn negrita dónde tenemos que copiar la URL del icono, o dirección dónde hemos almacenado el archivo de 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 en navegando por nuestro blog.
