Hoy vamos a abordar un tema que ha surgido en varios proyectos recientes: cómo crear un enlace de WhatsApp dinámico en Oxygen Builder que integra un número de teléfono almacenado en un campo ACF. Es importante recordar que, para los usuarios, leer números largos sin espacios puede ser complicado. Por eso, almacenamos estos números en ACF con espacios para facilitar la lectura. Pero, aquí está el desafío: los enlaces de WhatsApp no funcionan si incluyen espacios. Entonces, ¿cómo resolvemos esto?
Paso 1: Crear el Campo Personalizado en ACF Primero, asegúrate de tener un campo personalizado creado en ACF. Para este ejemplo, llamémoslo 'whatsapp'. Este campo almacenará el número de WhatsApp que queremos mostrar en el sitio, con espacios para una mejor legibilidad para el usuario.
Paso 2: Preparar el Shortcode en el functions.php de tu Child Theme A continuación, vamos a definir un shortcode en el archivo functions.php de nuestro child theme. Este shortcode va a recuperar el número de WhatsApp del campo ACF, y si se indica, eliminará los espacios para usarlo en un enlace clickable.
phpCopy code
<?php function whatsapp_number_shortcode($atts) { $atts = shortcode_atts(array('espacios' => 'true'), $atts, 'whatsapp_num'); $numero_whatsapp = get_field('whatsapp', 'option'); if (empty($numero_whatsapp)) { return 'Número no disponible'; } if ($atts['espacios'] === 'false') { $numero_whatsapp = str_replace(' ', '', $numero_whatsapp); } return $numero_whatsapp; } add_shortcode('whatsapp_num', 'whatsapp_number_shortcode'); ?>
Paso 3: Utilizar el Shortcode en Oxygen Builder En Oxygen Builder, insertamos el shortcode donde queremos mostrar el número. Para el texto visible utilizamos [whatsapp_num], que muestra el número con espacios. Para el enlace que dirige a WhatsApp, usamos [whatsapp_num espacios="false"] dentro del atributo href del enlace, de esta manera:
htmlCopy code
<a href="https://wa.me/[whatsapp_num espacios='false']">Chatea con nosotros</a>
Paso 4: Publicar y Probar Con el shortcode en su lugar y el campo de ACF correctamente configurado, todo lo que queda es publicar y probar nuestro trabajo. Cuando visites la página, deberías ver el número de WhatsApp legible y al hacer clic en el enlace, serás dirigido a una conversación de WhatsApp con el número correcto, sin espacios.
Este método garantiza que mantenemos la legibilidad del número para los usuarios y al mismo tiempo aseguramos la funcionalidad del enlace para dispositivos móviles.
Conclusión: Con estos pasos, hemos creado una solución elegante que mantiene la usabilidad en la interfaz del usuario y asegura la funcionalidad técnica del enlace de WhatsApp. Es un pequeño ejemplo de cómo la atención al detalle en el desarrollo puede hacer una gran diferencia en la experiencia del usuario final. ¡Espero que encuentren útil esta guía para sus futuros proyectos!
