es Spanish

Icono Menú en WordPress, truco

Share on facebook
Share on linkedin
Share on twitter
Share on email

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 Menú en WordPress, truco
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.

 

Icono Menú en WordPress, truco
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="https://mlm8ijm5fpsn.i.optimole.com/s7MSo6U-D8Cjyu-k/w:auto/h:auto/q:90/https://garberinformatica.com/wp-content/uploads/2017/06/icons8-Carrito-de-compras-64.png" style="width:30px;"/> E-Commerce

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 Menú en WordPress, truco
Icono en el menú E-Commerce

 

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

Si te ha servido, deja un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Más entradas

Instalación WooCommerce en WordPress
Apuntes

Manual de WooCommerce

En este post, os dejamos un pequeño manual de WooCommerce. Os vamos a enseñar como instalar y manejar de manera básica WooCommerce en WordPress. ¿Qué

Logo BlackData
Blog

BlackData, nuevo Colaborador

BlackData es una empresa la cuál es especialista en ciberseguridad y auditorias de vulnerabilidades. Cuentan con un equipo técnico multidisciplinar que garantiza un alto nivel

Categorías

¿Quieres impulsar tu negocio?

escríbenos y manténte en contacto

Desarrollo de tiendas online Garber Informática

Contacta con nosotros