Desarrollo Web

¿Cómo implementar ajax de forma correcta en wordpress?

El problema de implementar ajax en wordpress

Es común ver implementaciones AJAX que llaman al index.php con un par de  parámetros GET o POST, para luego, en el functions.php o en el plugin de turno, interceptar dichos parámetros con una condición que, según se cumple o no, invoca una a función que termina en un exit o die. También es bastante común encontrar trucos como los descritos en este post, donde básicamente se crea una página de WordPress vacía que hace de intermediario entre el javascript y los datos de WordPress que se cargarán asincrónicamente mediante AJAX.

Todos estos casos pueden implicar alguno de los siguientes problemas:

1. Una recarga adicional e innecesaria sobre el sitio (por ejemplo, inicializar el theme en cada petición)
2. Funcionalidades nativas de WordPress que dejan de funcionar (por ejemplo, javascript no discrimina entre estados de login, no se cargan).
3. Funcionalidades de plugins activos que dejan de funcionar (por ejemplo, al truncar con exit un plugin, probablemente dejará una cierta cantidad de funcionalidades de otros plugins sin cargar).

La solución

Existe una forma de trabajar nativamente con Ajax en WordPress, debido a que éste incluye en su backend esta posibilidad. Todo lo que necesitamos hacer es utilizar las funciones disponibles.

En términos generales, todo AJAX request se dirige sobre wp-admin/admin-ajax.php. Cada petición necesita tener al menos un parámetro GET o POST. Este procedimiento activa dos hooks:  wp_ajax_my_action y wp_ajax_nopriv_my_action, donde my_action es el valor de la variable GET o POST llamada “action”.

La función callback del primer hook se dispara para los usuarios autenticados. El segundo hook se dispara con los usuarios no autenticados.

Ejemplo

Primero en php

<?php
    function ajax_func_logged() {
        if ($_POST["hello"] == "Hola Mundo") {
            die("Welcome back logged human");
        }
    }

    function ajax_func_unlogged() {
        if ($_POST["hello"] == "Hola Mundo") {
            die("Welcome back unlogged human");
        }
    }

    add_action('wp_ajax_ajax_zone', 'ajax_func_logged');
    add_action('wp_ajax_nopriv_ajax_zone', 'ajax_func_unlogged');
?>

Y luego en javascript

<script>
    jQuery(document).ready(function() {
        jQuery("#PleasePushMe").click(function(){
            jQuery.ajax({
                type: 'POST',
                url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',
                data: {
                    action: 'ajax_zone',
                    hello: "Hola Mundo"
                },
                success: function(data, textStatus, XMLHttpRequest){
                    jQuery("#test-div1").html('');
                    jQuery("#test-div1").append(data);
                },
                error: function(MLHttpRequest, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        });
    });
</script>