Guía: Cómo usar correctamente AJAX en WordPress

AJAX es una técnica que puede usar en Javascript para obtener datos del servidor y actualizar el contenido de su página sin recargarla en su navegador. En esta publicación, profundizaremos en cómo usar correctamente AJAX en WordPress.

La mayoría de ustedes probablemente esté familiarizado con la realización de solicitudes AJAX fuera de WordPress y quiera ver cómo hacerlo en WordPress. Es posible que se esté preguntando acerca de las siguientes preguntas:

1. A qué URL debe enviar sus solicitudes AJAX en su Javascript.
2. Cómo capturar realmente la solicitud AJAX en PHP, obtener sus datos y enviar algo de vuelta.
3. Asegurarse de que sus solicitudes AJAX sean seguras.

En WordPress puede realizar solicitudes AJAX en admin y/o frontend; el proceso es el mismo con algunas diferencias al responder las preguntas anteriores. ¡Vamos a sumergirnos!

Los conceptos básicos para realizar una solicitud AJAX en WordPress

Lo primero que necesita es, obviamente, el javascript donde desea enviar la solicitud AJAX. Debe ponerse en cola usando un método válido para agregar scripts a WordPress, ya sea frontend o backend. Lo más probable es que ya tenga un script configurado donde solo necesita la parte de enviar o solicitar algo de WordPress.

Publicar AJAX en WordPress requiere que pase una variable de objeto Javascript como datos a la solicitud. En el objeto, debe proporcionar como mínimo una propiedad; ‘ action‘. El valor de la actionpropiedad ‘ ‘ es una cadena que puede ser (casi) cualquier cosa que desee. Esta acción es lo que le dice a WordPress cómo enrutar la solicitud AJAX. Pero también define parte del nombre del enlace al que deberá conectarse en PHP para manejar la solicitud AJAX.

Cuando se trata de responder la pregunta 1 anterior: ¿a qué URL debe enviar su solicitud AJAX? Esto difiere dependiendo de si su secuencia de comandos está en cola en el administrador o en la interfaz. Debido a que AJAX ya está integrado en las pantallas de administración de WordPress, simplemente puede usar la variable global ajaxurl. Pero para las solicitudes de interfaz, se vuelve un poco más complicado porque debe proporcionar la URL de AJAX manualmente junto con su Javascript. Más sobre eso a continuación.

Para manejar las solicitudes de AJAX en PHP, se conecta a la acción wp_ajax_<your action name>. Si desea ejecutar solicitudes AJAX en la interfaz para usuarios que no han iniciado sesión, también puede conectarse a wp_ajax_nopriv_<your action name>. Más sobre eso a continuación. Dentro de su función enganchada, puede acceder a los datos pasados ​​desde Javascript haciendo referencia a la $_POSTmatriz. Para devolver algo, simplemente repite algo. Esa es la respuesta corta a la pregunta 2 anterior.

Vamos a sumergirnos directamente en el código. Comenzaremos con cómo agregar solicitudes AJAX en el panel de administración.

Realización de solicitudes AJAX en el administrador de WordPress

Supongo que ya tiene un script en cola que reacciona a alguna acción del usuario, recopila datos y está listo para realizar una solicitud AJAX, ya sea para actualizar algo o para solicitar información de WordPress. El siguiente código es un ejemplo muy simplificado; el código pone en cola un archivo Javascript en el tema para el administrador, y dentro del código Javascript configura algunas variables aleatorias, ejecuta AJAX en la carga de la página y genera la respuesta en la consola.

add_action('admin_enqueue_scripts', function() {
    wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '/assets/js/awhitepixel-ajax.js', ['jquery'], '', true);
});

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_send_something',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(ajaxurl, data, function(response) {
        console.log(response);
    });
});

Como puede ver en el código Javascript anterior, configura un objeto Javascript (piense en él como una matriz) con todos los datos que desea transmitir, incluida la importante actionpropiedad ‘ ‘.

También como se mencionó anteriormente, dado que AJAX ya está integrado en las pantallas de administración de WordPress, simplemente use la variable global ajaxurlcomo URL de AJAX.

Ahora agregaremos código para aceptar esta solicitud AJAX en PHP. Debido a que proporcioné ‘ awhitepixel_send_something‘ como valor de ‘ action‘, necesito conectarme a wp_ajax_awhitepixel_send_something.

add_action('wp_ajax_awhitepixel_send_something', function() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
 
    wp_die();
});

Dentro de su función enganchada, tiene acceso completo a WordPress; puede usar cualquier función de WordPress, consultas y acceder a variables globales (por ejemplo $wpdb, para consultas de bases de datos). Todas las variables que pasó en Javascript estarán disponibles dentro $_POSTde la matriz con las claves que proporcionó en el objeto de Javascript.

Es opcional devolver algo a Javascript (por ejemplo, cuando solo desea enviar una solicitud para actualizar o guardar algo y no necesita confirmación). Si desea devolver algo, simplemente echosu salida. Para generar variables más complejas que simplemente una cadena, debe devolverlo como una matriz codificada json para que Javascript pueda leerlo y analizarlo correctamente. Algo como esto;

Una nota final importante en la última línea; wp_die(). Todas las funciones de devolución de llamada de AJAX deben "cerrar el hilo" o terminar correctamente haciendo die()o exit(). En WordPress usamos wp_die()para una integración adecuada, pero el resultado es el mismo. Si obtiene un "0" extraño en sus respuestas de AJAX, es muy probable que sea porque no lo hizo wp_die()o die()Siempre, siempre asegúrese de "morir" al final de todas las funciones conectadas a wp_ajax.

Realización de solicitudes AJAX en la interfaz de WordPress

El proceso de ejecutar AJAX en la interfaz es el mismo que en el administrador, pero algo más complicado al responder la pregunta 1: en qué URL debe publicar AJAX. En el ejemplo anterior para ejecutar AJAX en el administrador, ya teníamos una variable Javascript global ajaxurl, pero esta variable no está disponible en la interfaz. Tenemos que proporcionarlo nosotros mismos. Para obtener el valor de la URL AJAX de WordPress que usa admin_url('admin-ajax.php')(sí, "url de administrador" para la interfaz).

Al poner en cola un script de interfaz que realizará solicitudes AJAX en su tema o complemento, debe pasar la URL AJAX de WordPress como variable a ese Javascript, mediante el uso de wp_localize_script().

Ahora, en su Javascript, tiene acceso a un objeto Javascript global Theme_Variables(este nombre puede ser el que desee), con la URL AJAX de WordPress como valor para ajax_urlla propiedad ‘ ‘. Su función AJAX sería algo como esto:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

Cuando se trata de AJAX en la interfaz, hay una cosa más a tener en cuenta con respecto al enlace que usa para aceptar solicitudes de AJAX. Todavía se conecta a wp_ajax_<your action name>, pero este enlace solo funcionará para los visitantes que hayan iniciado sesión. Si desea realizar solicitudes AJAX para los visitantes que no han iniciado sesión, debe (también) conectarse a wp_ajax_nopriv_<your action name>. Normalmente, para las solicitudes AJAX de frontend que se requieren para que el tema funcione correctamente, se conectaría a ambos, apuntándolos a la misma función.

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}

En cuanto al contenido de su función enganchada de AJAX, es el mismo que para las solicitudes de administrador. Tienes acceso completo a WordPress, obtienes las variables pasadas de $_POST, opcionalmente devuelves algo ejecutando echo, y siempre, siempre debes recordar "morir" wp_die()al final.

Asegurar sus solicitudes AJAX

Debido a que AJAX hace que sea tan fácil pasar datos entre el script y el backend, definitivamente debe tomar las medidas necesarias para que su código sea seguro. Eso incluye desinfectar cualquier dato antes de guardarlo, pero también utilizar la funcionalidad "nonce" de WordPress para verificar si las solicitudes provienen de ubicaciones correctas y aceptadas. Lea la documentación de WordPress de inmediato si no está familiarizado con ella.

La premisa básica es esta; utiliza un método de WordPress generando un valor nonce (wp_create_nonce()) o generando un campo de entrada oculto con el valor nonce como valor (wp_nonce_field()). En su solicitud de AJAX, pasa el valor de nonce (que está codificado por WordPress) en la solicitud, y en la parte de aceptación (wp_ajax_gancho) verifica el nonce con lo que configuró originalmente.

Agreguemos algo de seguridad al código de ejemplo que hicimos arriba. Primero generaremos un nonce y lo pasaremos wp_localize_scriptjunto con la URL de AJAX. Como parámetro wp_create_nonce(), establecemos una cadena única que solo nosotros deberíamos conocer, por así decirlo. En el ejemplo a continuación, voy por ‘ awhitepixel-nonce‘.

Lo que se pasa como ‘ nonce‘ en nuestras variables de Javascript a la interfaz es un número aleatorio generado por WordPress. Nadie más que nosotros, los autores de este script, sabemos que el nonce válido es ‘ awhitepixel-nonce‘. En nuestro Javascript, tomamos el valor de nonce y lo devolvemos directamente en nuestra solicitud AJAX:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14,
        'nonce': Theme_Variables.nonce
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

Y finalmente, en nuestra wp_ajaxfunción enganchada, deberíamos comenzar comprobando si el nonce era válido con wp_verify_nonce(). Proporcionamos la cadena única que configuramos anteriormente, y si WordPress no coincide con el valor codificado único transmitido con esta cadena, terminamos inmediatamente:

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {
        wp_die(-1);
    }
 
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}