Si bien los bloques de Gutenberg en WordPress han revolucionado la forma en que interactuamos y construimos nuestras páginas web, a menudo nos encontramos con limitaciones en ciertas áreas.
Un ejemplo claro es el bloque de iconos de redes sociales, que peca de una funcionalidad esencial: la de no permitir abrir enlaces en una nueva pestaña. Esta limitación puede provocar que los usuarios abandonen tu sitio web, reduciendo así las posibilidades de retorno y comprometiendo el engagement.
En este artículo, vamos a solucionarlo viendo cómo añadir esta funcionalidad clave al bloque de iconos sociales de Gutenberg. Utilizaremos la API HTML «WP_HTML_Tag_Processor» y algo de PHP para lograr este objetivo.
De esta manera, no solo mejoraremos la experiencia del usuario en nuestro sitio, sino que también aumentaremos las posibilidades de retener a los visitantes y fomentar una mayor interacción con nuestras redes sociales.
Cómo añadir el atributo ‘Target’ a los iconos sociales en WordPress
Como ya hemos identificado un aspecto crucial para mejorar la experiencia del usuario vamos a permitir que los enlaces de los iconos de redes sociales se abran en una nueva pestaña.
Para implementar esta funcionalidad, utilizaremos la API HTML y el filtro «render_block_{this→name}». En este contexto, {this→name} es la parte dinámica que corresponde al nombre del bloque específico.
Vamos a enfocarnos en el filtro «render_block_core/social-link», que nos permite intervenir específicamente en el bloque de iconos de redes sociales durante la carga de la página. Es importante diferenciar entre el bloque individual «social-link», y el bloque grupal «social-links», debido a que nuestro objetivo es ajustar solo el icono de forma independiente.
Este es el código que necesitamos:
function custom_social_icons_block( $block_content, $block ) {
if ( 'instagram' === $block['attrs']['service'] ) {
$html = new WP_HTML_Tag_Processor( $block_content );
if ( $html->next_tag( 'a' ) ) {
$html->set_attribute( 'target', '_blank' );
// añadimos seguridad al enlace
$html->set_attribute( 'rel', 'noreferer noopener nofollow' );
}
$block_content = $html->get_updated_html();
}
return $block_content;
}
add_filter( 'render_block_core/social-link', 'custom_social_icons_block', 10, 2 );A continuación, vamos a ver lo que hace el código que acabamos de mostrar, para que podáis comprender cada paso y su importancia en nuestra tarea de mejorar los iconos sociales.
- Función Personalizada: Creamos la función custom_social_icons_block, que se ejecutará cada vez que se renderice un bloque de tipo
social-link. - Condición Específica: El código verifica si el servicio del bloque social es ‘Instagram‘. Esta condición puede adaptarse para otros servicios de redes sociales.
- Manipulación HTML: Utilizamos WP_HTML_Tag_Processor para manipular el HTML del bloque. Buscamos la etiqueta
<a>y modificamos sus atributos. - Atributos Añadidos: Establecemos target
="_blank"para abrir el enlace en una nueva pestaña. Además, agregamos rel=»noreferer noopener nofollow» para mejorar la seguridad y el SEO del enlace. - Aplicación del Filtro: Finalmente, aplicamos la función al filtro render_block_core/social-link.
En el ejemplo proporcionado, solo se ha modificado el bloque de Instagram, pero es necesario realizar un if para cada red social utilizada en el desarrollo, ajustando así la condición a cada servicio específico.
Actualizar el icono de Twitter en el bloque social de WordPress
En el momento de esta publicación, hemos notado que el bloque de iconos sociales de WordPress no muestra la versión actual del icono de Twitter. Abordaremos cómo podemos actualizarlo para reflejar el diseño más reciente.
El icono de Twitter utiliza un gráfico SVG, donde la forma específica del icono se define en el atributo «d» del tag «path». Al igual que en el ejemplo anterior, podemos cambiar este contenido para actualizar el icono.
Este es el código necesario para realizar esta actualización:
function custom_social_icons_block( $block_content, $block ) {
if ( 'twitter' === $block['attrs']['service'] ) {
$html = new WP_HTML_Tag_Processor( $block_content );
if ( $html->next_tag( 'path' ) ) {
$html->set_attribute( 'd', 'código de la forma nueva' );
}
$block_content = $html->get_updated_html();
}
return $block_content;
}
add_filter( 'render_block_core/social-link', 'custom_social_icons_block', 10, 2 );Una vez hemos visto el código necesario para actualizar el icono de Twitter, vamos a analizarlo paso a paso para entender mejor cada línea y su función en este proceso de personalización.
- Función Personalizada: La función custom_social_icons_block es nuestra función principal. Se activará cada vez que se renderice un bloque del tipo social-link en WordPress.
- Condición para Twitter: El código primero verifica si el bloque que se está renderizando es un enlace de Twitter. Esto se hace mediante la comparación if ( ‘twitter’ === $block[‘attrs’][‘service’] ). Esta condición garantiza que solo se apliquen cambios al icono de Twitter.
- Manipulación del SVG con WP_HTML_Tag_Processor: Utilizamos la clase WP_HTML_Tag_Processor para manipular el contenido HTML (en este caso, SVG) del bloque. Con if ( $html->next_tag( ‘path’ ) ), buscamos la etiqueta
<path>del SVG, que es donde se define la forma del icono. - Actualización del Atributo ‘d’: Una vez localizado el tag
<path>, modificamos su atributo ‘d’ con html->set_attribute( ‘d’, ‘código de la forma nueva’ ). El atributo ‘d’ en un SVG define su forma, por lo que al cambiar este valor, actualizamos la apariencia del icono de Twitter. - Aplicación del Filtro y Retorno del Contenido Actualizado: Finalmente, el contenido actualizado se devuelve con return $block_content;. La línea add_filter( ‘render_block_core/social-link’, ‘custom_social_icons_block’, 10, 2 ); asegura que nuestra función personalizada se aplique al filtro render_block_core/social-link, que es el que controla la presentación de los bloques de enlaces sociales en WordPress.
En este caso específico, no recomiendo utilizar WP_HTML_Tag_Processor. Sería más recomendable utilizar lo que publicamos en Cómo personalizar los iconos del menú en bloques de WooCommerce. Aunque el uso de la API puede ser útil, también conlleva ciertos riesgos.
Quizá la forma más sencilla sea sustituir «Twitter» por «X» puesto que lo tenemos disponible en el bloque de iconos sociales 🤦🏻♂️
Cómo centralizar los enlaces en el bloque social de WordPress
Cuando se utiliza el bloque de iconos sociales en diferentes partes de un sitio web, resulta poco práctico tener que insertar las URL en cada ocasión. Para aquellos que se dedican a desarrollos en WordPress, una solución más eficiente es centralizar esta gestión de enlaces, facilitando así el proceso tanto para el desarrollador como para el cliente.
Imagina que utilizas ACF (Advanced Custom Fields) para crear una página de configuración para tu tema. Podrías definir las URL de tus redes sociales allí y luego asignarlas automáticamente al bloque social.
Para esto, nuevamente recurrimos a la API «WP_HTML_Tag_Processor» y al ya conocido filtro «render_block_core/social-link». Aquí te muestro cómo hacerlo:
function custom_social_icons_block( $block_content, $block ) {
if ( 'github' === $block['attrs']['service'] ) {
$html = new WP_HTML_Tag_Processor( $block_content );
$github_url = get_field('_global_github_url', 'option');
if ( $html->next_tag( 'a' ) && !empty($github_url) ) {
$html->set_attribute( 'href', $github_url );
}
$block_content = $html->get_updated_html();
}
return $block_content;
}
add_filter( 'render_block_core/social-link', 'custom_social_icons_block', 10, 2 );Para una visión más clara de cómo funciona este código, vamos a descomponerlo y entender cada sección. Nos ayudará a ver cómo podemos centralizar eficientemente los enlaces en nuestros bloques sociales.
- Función Personalizada: La función custom_social_icons_block se aplica a cada bloque de tipo social-link.
- Especificación del Servicio: Se comprueba si el bloque es un enlace de GitHub usando if ( ‘github’ === $block[‘attrs’][‘service’] ).
- Manipulación de Enlaces con WP_HTML_Tag_Processor: Buscamos la etiqueta
<a>y verificamos si la URL global de GitHub está definida. - Asignación Dinámica de URL: Si existe una URL para GitHub en ACF, se asigna al atributo
hrefdel enlace, centralizando así la gestión de enlaces. - Retorno del Contenido Modificado: El contenido modificado se devuelve y se aplica a través del filtro render_block_core/social-link.
Otra opción es utilizar el filtro «render_block_data» para modificar el bloque antes de que se renderice, pero exploraremos esa alternativa en otra publicación.
Conclusión
Hemos visto varias técnicas para mejorar y personalizar el bloque de iconos sociales en WordPress. Desde añadir la funcionalidad de abrir enlaces en una nueva pestaña, hasta actualizar el icono de Twitter y centralizar los enlaces de redes sociales. Cada sección ha proporcionado soluciones prácticas y fáciles de implementar para enriquecer la experiencia del usuario y la eficiencia del desarrollo.
Estas mejoras no solo realzan la funcionalidad y estética de tu sitio web, sino que también facilitan la gestión y el mantenimiento para los desarrolladores y clientes. Al aplicar estos métodos, puedes asegurarte de que tu sitio web no solo se mantenga actualizado con las tendencias actuales, sino que también ofrezca una óptima experiencia de usuario.
Confio que este recorrido por la personalización de bloques de WordPress haya sido útil e inspire a experimentar y explorar aún más las posibilidades que ofrece WordPress. Recuerda, el límite en la personalización web lo pones tú, y con herramientas como WordPress a tu disposición, las opciones son casi infinitas.
