✅Consultas por WhatsApp desde las Entradas del Blog en WordPress (Sin Plugins)

En la era digital, la interacción con los lectores es esencial para construir una comunidad sólida alrededor de tu contenido. Una forma efectiva de fomentar esta interacción es facilitar la comunicación directa con los lectores, y qué mejor manera de hacerlo que integrando una opción de contacto directo a través de WhatsApp. En este artículo, exploraremos un código que agrega una caja de WhatsApp al final del contenido de las entradas de un sitio web de WordPress.

La plataforma de WordPress ofrece una flexibilidad excepcional para personalizar y mejorar la experiencia del usuario. Una de las formas de hacerlo es mediante la integración de funciones personalizadas que agregan funcionalidades específicas al sitio web. En este contexto, el código proporcionado añade una caja de WhatsApp al final de cada entrada individual, lo que permite a los lectores contactar directamente al autor del artículo para hacer preguntas o comentarios.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php

function agregar_caja_whatsapp_al_final_del_contenido($content) {
    if (is_single()) { // Verifica si estamos en una entrada
        global $post;
        $titulo = get_the_title($post->ID);
        $permalink = get_permalink($post->ID);
        $mensaje = urlencode("Hola, vengo del artículo *$titulo*: $permalink"); // Usar * para negrita en WhatsApp
        $numero_whatsapp = '+34000000000';
        $enlace_whatsapp = 'https://api.whatsapp.com/send?phone=' . $numero_whatsapp . '&text=' . $mensaje;

        $caja_whatsapp = '<div class="custom-box">';
        $caja_whatsapp .= '<div style="text-align: center;">';
        $caja_whatsapp .= '<p>Si tienes cualquier duda sobre el artículo, escríbeme </p>';
        $caja_whatsapp .= '<a href="' . $enlace_whatsapp . '" target="_blank" rel="noopener noreferrer">';
        $caja_whatsapp .= '<i class="fab fa-whatsapp"></i> WhatsApp</a>';
        $caja_whatsapp .= '</div>';
        $caja_whatsapp .= '</div>';

        $content .= $caja_whatsapp;
    }

    return $content;
}
add_filter('the_content', 'agregar_caja_whatsapp_al_final_del_contenido');




function cargar_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'cargar_font_awesome');


function agregar_css_personalizado_al_head() {
    echo '<style>
        .custom-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 20px;
            background-color: #f9f9f9;
        }

        .custom-box p {
            margin-bottom: 10px;
        }

        .custom-box a {
            display: inline-block;
            padding: 5px 10px;
            background-color: #25d366;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
        }

        .custom-box a:hover {
            background-color: #128c7e;
        }
    </style>';
}

add_action('wp_head', 'agregar_css_personalizado_al_head');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. Función para Agregar la Caja de WhatsApp:
   • Esta función se engancha al filtro the_content, que se dispara cuando se muestra el contenido de una entrada.
   • Comprueba si la página actual es una entrada individual utilizando is_single().
   • Si la condición se cumple, recoge el título y el enlace permanente (permalink) de la entrada actual.
   • Luego, genera un mensaje de WhatsApp con el título del artículo y su enlace, codificándolo adecuadamente para su uso en una URL.
   • Define el número de WhatsApp al que se enviará el mensaje y crea un enlace de WhatsApp que incluye el mensaje generado.
   • Finalmente, construye la caja de WhatsApp con el mensaje y el enlace, y la añade al contenido de la entrada.
2. Función para Cargar Font Awesome:
   • Esta función se engancha al gancho wp_enqueue_scripts, que se utiliza para cargar scripts y estilos en el frontend de WordPress.
   • Utiliza wp_enqueue_style() para cargar la biblioteca Font Awesome desde un CDN.
3. Función para Agregar CSS Personalizado:
   • Esta función se engancha al gancho wp_head, que permite añadir contenido al <head> del sitio.
   • Define estilos CSS personalizados para la caja de WhatsApp, incluyendo bordes, relleno, margen y colores.

Conclusion

Integrar una caja de WhatsApp al final del contenido de las entradas de un sitio web de WordPress es una forma efectiva de fomentar la interacción directa con los lectores. El código proporcionado ofrece una solución simple pero poderosa para facilitar esta comunicación, lo que puede mejorar significativamente la experiencia del usuario y fortalecer la comunidad en torno al sitio web. Además, demuestra cómo las funciones personalizadas y los ganchos de WordPress pueden ser utilizados para agregar funcionalidades específicas de manera eficiente y elegante. ¡Ahora es tu turno de implementar esta característica en tu propio sitio web y mejorar la interacción con tus lectores!

Nos vemos en el siguiente tutorial.

Un saludo.