Añadir iconos personalizados a los bloques de Astra y WordPress «iconos sociales»

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

let icons = document.querySelector('.footer-social-inner-wrap');

// create new a element
let a1 = document.createElement('a');
a1.setAttribute("href", "https://es.wikiloc.com/geotourism/puro-pirineo");
a1.setAttribute("class", "icon_wikiloc ast-builder-social-element");
a1.setAttribute("title", "Wikiloc");
a1.textContent = '';
// add it to the div element
icons.appendChild(a1);

let icon1 = document.querySelector('.icon_wikiloc');

// create new a element
let img1 = document.createElement('img');
img1.setAttribute("src", "https://bttpuropirineo.com/wp-content/uploads/2021/07/wikiloc.svg");
// add it to the a element
icon1.appendChild(img1);

Javascript para el bloque Social de WordPress

let icons = document.querySelector('.wp-block-social-links');

// create new a element
let li = document.createElement('li');
li.setAttribute("class", "icon_wikiloc wp-social-link wp-social-link-wordpress wp-block-social-link");
li.textContent = '';
// add it to the div element
icons.appendChild(li);

let icon = document.querySelector('.icon_wikiloc');

// create new a element
let a1 = document.createElement('a');
a1.setAttribute("href", "https://es.wikiloc.com/geotourism/puro-pirineo");
a1.setAttribute("class", "icon_wikiloc_a wp-block-social-link-anchor");
a1.setAttribute("title", "Wikiloc");
a1.textContent = '';
// add it to the div element
icon.appendChild(a1);

let icon_a = document.querySelector('.icon_wikiloc_a');

// create new a element
let img1 = document.createElement('img');
img1.setAttribute("src", "https://bttpuropirineo.com/wp-content/uploads/2021/07/wikiloc.svg");
// add it to the a element
icon_a.appendChild(img1);

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.

.icon_wikiloc img {
    width: 24px;
    padding: 1px;
}

.icon_wikiloc img {
    max-width: 24px;
    padding:1px;
}

Si no te funciona o crees que se puede mejorar de alguna forma, házmelo saber. ¡Muchas gracias por tu tiempo!.