Implementar un Sistema de Votación en WordPress

Este snippet de código permite a los desarrolladores de WordPress implementar un sistema de votación simple pero efectivo en sus sitios web. El código utiliza la API de AJAX de WordPress para actualizar dinámicamente el número de votos de un post sin necesidad de recargar la página.

¿Cómo Funciona?

Este snippet consta de dos partes principales:

1. Funciones PHP: Se encargan de registrar la acción AJAX y de crear un shortcode que puedes insertar en tus posts o páginas para mostrar el botón de votación.
2. JavaScript: Se encarga de manejar el evento de clic en el botón de votación, enviando una solicitud AJAX al servidor para actualizar el número de votos.

Cuando un usuario hace clic en el botón de votación, el número de votos se actualiza en la base de datos y se muestra el nuevo número en la interfaz.

Pega este código en el functions.php de tu tema hijo o en un nuevo archivo de snippets:

// Registra la acción AJAX para usuarios autenticados y no autenticados
add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

function my_action_callback() {
    $post_id = $_POST['post_id'];
    $votes = get_post_meta($post_id, 'votes', true) ?: 0;
    update_post_meta($post_id, 'votes', ++$votes);
    echo $votes;
    wp_die(); 
}

// Función para el shortcode
function votacion_shortcode() {
    $post_id = get_the_ID();
    $votes = get_post_meta($post_id, 'votes', true) ?: 0;
    ob_start();
    ?>
    <div class="bloque-votacion">
        <div class="votacion-encabezado">¿Te ha gustado nuestro contenido?</div>
        <button id="votacion" data-val="1">
             ❤️ <span class="votacion-contador"><?php echo $votes; ?></span>
        </button>
    </div>
    <style>
        .votacion-encabezado {
        width: 80%;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        display: inline-block;
    }
    button#votacion {
        display: inline-block;
        width: 18%;
    }
    .bloque-votacion {
        border: 1px solid #000;
        border-radius: 6px;
        padding: 8px 8px 8px 15px;
        text-align: right;
    }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var button = document.getElementById("votacion");
            if (button) {
                var post_id = <?php echo $post_id; ?>;
                var cookieName = "voted_" + post_id;

                if (document.cookie.split(';').some((item) => item.trim().startsWith(cookieName + '='))) {
                    button.disabled = true;
                }

                button.addEventListener("click", function() {
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '<?php echo admin_url('admin-ajax.php'); ?>', true);
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
                    xhr.onload = function () {
                        if (xhr.status >= 200 && xhr.status < 400) {
                            document.querySelector(".votacion-contador").innerText = xhr.responseText;
                            button.disabled = true;
                            document.cookie = cookieName + "=true; path=/";
                        }
                    };
                    xhr.send('action=my_action&post_id=' + post_id);
                });
            }
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('votacion', 'votacion_shortcode');

Casos de Uso del Snippet

Este snippet es especialmente útil para:

• Blogs que deseen permitir a sus lectores votar por el contenido.
• Sitios de revisión de productos donde los usuarios pueden votar por sus productos favoritos.
• Cualquier tipo de contenido que se beneficie de un sistema de votación para medir la popularidad o la calidad.

Instrucciones de Instalación

1. Copia todo el snippet de código.
2. Pega el código en el archivo functions.php de tu tema de WordPress o en un plugin personalizado.
3. Utiliza el shortcode [votacion] en cualquier post o página donde desees mostrar el botón de votación.

Personalización y Estilos

El snippet incluye estilos CSS básicos para el botón de votación y el bloque que lo contiene. Puedes personalizar estos estilos editando la sección <style> del código.

Consideraciones de Seguridad

Este snippet utiliza una forma básica de prevención de votos múltiples mediante cookies. Sin embargo, este método no es 100% seguro y se puede mejorar según las necesidades del proyecto.

Con este snippet, puedes añadir fácilmente un sistema de votación a tu sitio de WordPress. Es una excelente manera de interactuar con tus usuarios y obtener retroalimentación sobre tu contenido.