Hace un tiempo tuve que añadir un icono de acceso rápido para el grupo de iconos sociales de Astra.
El icono que necesito incorporar es de un espacio profesional de un cliente de «Wikiloc». Un sitio donde se suben y comparten rutas al aire libre, para hacer a pie, en bici, etc. Se pueden ver todas sus actividades reflejadas en su web. Utilizando estos bloques sociales no disponemos de todos los iconos por lo que nos va a tocar añadirlos de alguna forma.
¿Solución? En este caso decidí añadir el icono mediante Javascript. Estuve buscando una forma de añadirlo mediante hooks o filter de Astra pero no encontré nada.
Así es como quedaron los fragmentos de código:
Javascript para el bloque Social de Astra
Javascript para el bloque Social de WordPress
En ambos fragmentos, primero hacemos un querySelector para localizar el elementos al cual le vamos a añadir el nuevo icono.
En el bloque social de Astra, los iconos vam a ser elementos <a> y en el bloque social de WordPress van a ser elementos <li> esto lo puedes averiguar inspeccionando los elementos desde el navegador.
Mediante Javascript, creamos los elementos con createElement y le vamos añadiendo todos los atributos que necesitamos (href, class, title…) y como última acción añadimos el elemento al seguido del último item con appendChild.
Solo tienes que copiar, modificar los atributos y poner el fragmento en un archivo .js de tu child theme.
El resultado es el siguiente:
Ahora solo nos quedaría darle un poco de estilo con CSS. Y a funcionar.
Si no te funciona o crees que se puede mejorar de alguna forma, házmelo saber. ¡Muchas gracias por tu tiempo!.
