Desarrollo de Funciones Ajax en WordPress con PHP y JavaScript

Clase 13 de 29 • Curso Profesional de WordPress

Resumen

¿Cómo funcionan las peticiones AJAX en WordPress?

Las peticiones AJAX son fundamentales para crear sitios web interactivos y dinámicos. En el contexto de WordPress, estas peticiones permiten enviar o recibir datos del servidor sin necesidad de recargar la página web completa, optimizando la experiencia del usuario. Si quieres comprender más sobre este proceso y su aplicación en WordPress, sigue leyendo.

¿Cuál es el flujo de una petición AJAX?

En un sitio web, durante la interacción del usuario, se desencadenan diferentes eventos como clics o cargas de la página. Para manejar estos eventos, un archivo JavaScript escucha y desencadena funciones específicas. Cuando se produce un evento esperado, el archivo envía una petición AJAX al servidor, donde se ejecuta en un entorno PHP. De esta manera:

Archivo JavaScript: Detecta eventos y ejecuta funciones.
Servidor en PHP: Procesa la petición AJAX y genera una respuesta.
Resultado de la petición: Puede ser satisfactorio o devolver un error, el cual se maneja en el JavaScript, asegurando que el usuario esté consciente de cualquier fallo.

Es importante entender que este proceso en WordPress se adapta a los elementos específicos del CMS, asegurando su integración adecuada.

¿Cómo se implementan las peticiones AJAX en WordPress?

Las peticiones AJAX se realizan típicamente utilizando jQuery.ajax(), pero también puedes utilizar funciones nativas de JavaScript como fetch para mejorar la eficiencia y aprovechar sus ventajas.

Parámetros básicos para una petición AJAX:

URL: Generalmente es una URL genérica de WordPress para ejecutar funciones AJAX.
Método: Puede ser GET o POST, dependiendo de la naturaleza de la petición.
Datos (Data): Deben incluir un atributo específico con el nombre de la función a ejecutar en el servidor, como action: 'mi_funcion'.

Cuando se desea registrar una función para que pueda ser llamada mediante AJAX, WordPress ofrece dos métodos importantes:

wp_ajax_{action}: Para acciones disponibles solo para usuarios autenticados.
wp_ajax_nopriv_{action}: Para acciones accesibles por cualquier usuario, autenticado o no.

Esto permite una gran flexibilidad dependiendo de las necesidades de seguridad de tu aplicación web.

¿Cómo gestionar la respuesta del servidor?

Luego de registrar y enviar una función a través de AJAX, la respuesta se maneja mediante la función wp_send_json(). Esta función puede enviar datos en formatos como array o string en JSON, que el archivo JavaScript luego procesará:

JavaScript recibe la respuesta: Se verifica si hay errores.
Acciones según el resultado: Muestra mensajes al usuario o realiza cambios en el DOM.

El correcto manejo de estas respuestas es esencial para mantener una experiencia de usuario fluida y evitar confusiones ante posibles errores.

Ahora que tienes conocimiento sobre cómo funcionan las peticiones AJAX en WordPress, puedes aventurarte a implementar estos conceptos en tus proyectos. ¡Sigue aprendiendo y mejora tus habilidades para crear sitios web más interactivos y eficientes!

María Sierra

student•

¿Cómo utilizar AJAX dentro de WordPress?

Para poder hacer cosas con AJAX en Wordpress usaremos algunas funciones y cosas en particular.

En el envío de la petición se puede hacer con JQuery o con Javascript Vanilla. Nosotros envíamos tres parámetros:

url:ajaxurl → Todas las peticiones AJAX se envían a la misma url.
method → La información puede enviarse por GET o POST.
data (action) → Cada función PHP que procesará una petición AJAX se registra.

Una vez que la función la recibe Wordpress, para poder recibirla necesitamos que esta función esté registrada. Para registrarla tenemos dos opciones:

wp_ajax() → Las funciones se registran con este hook para los usuarios logeados.
wp_ajax_nopriv() → Las funciones se registran con este hook para funcionar sin usuarios logeados.

Y las funciones de respuestas son:

wp_send_json() → Nos va permitir enviar la respuesta del servidor en formato JSON. Esta función puede recibir un string o un Array, y ese Array va a ser transformado en JSON para poder ser recibido por el archivo de Javascript.

Por último el hacivo de Javascript, va a recibir esa información.

success / .done() → Nos permite recibir la respuesta y procesarla.
error / .catch() → Nos permite manejar errores y procesarlos.

Usuario anónimo

user•

success / .done() Nos permite recibir la respuesta y procesarla. ● error / .catch() Nos permite manejar errores y procesarlos.

María José Ledesma

student•

¡Muchas gracias por el aporte! 😄

Jose L. Figueroa

student•

Gracias por el aporte @Jorge Gianareas

Usuario anónimo

user•

wp_send_json() Es una función de WordPress que está preparada para devolver las peticiones. Las funciones registradas deben finalizar siempre con esta función o con wp_die() para generar una respuesta.

Usuario anónimo

user•

$.ajax() WordPress trae incorporada la librería jQuery y permite utilizarla para hacer peticiones.

Juan Carlos Ortiz Romero

student•

Encolaremos un archivo JavaScript que contendrá nuestra lógica: que al hacer click en el botón, haga la petición AJAX y nos pinte un listado con los últimos 10 eventos destacados.

A este archivo le pasaremos una serie de variables, entre las que se encuentra la URL contra la que haremos la petición AJAX. WordPress dispone de una ruta, el archivo admin-ajax.php, donde gestionar este tipo de peticiones.

Irmin Corona 🐯

student•

¿Qué es AJAX en WordPress?

Es una técnica que permite hacer peticiones al servidor sin recargar la página
WordPress tiene su propio sistema para manejar estas peticiones

Elementos principales para hacer una petición AJAX:

Se puede usar jQuery o JavaScript puro (Vanilla)
Requiere tres parámetros importantes:
- ajaxurl: La URL única donde se envían todas las peticiones AJAX
- method: El método de envío (GET o POST)
- action: Identifica qué función PHP procesará la petición

Registro de funciones en WordPress:

Hay dos maneras de registrar las funciones que procesarán las peticiones:
- wp_ajax(): Para usuarios que han iniciado sesión
- wp_ajax_nopriv(): Para usuarios que no han iniciado sesión

Manejo de respuestas:

Del lado del servidor:
- wp_send_json(): Envía la respuesta en formato JSON
- Puede recibir texto (string) o arrays
Del lado del cliente (JavaScript):
- success/done(): Para procesar respuestas exitosas
- error/catch(): Para manejar errores

Juan Guillermo Perez Cardozo

student•

ya he usado ajax antes por mucho tiempo, vamos a ver que tan similar sigue siendo en wp

Juan Carlos Ortiz Romero

student•

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

LUIS ESTEBAN ORDOÑEZ ERAZO

student•

Hola!

He visto que hay unos plugins que permiten controlar que plugins/acrivos CSS/JS corren en una página específico, hay alguno forma de hacer eso desde functions.php del theme? Asi se evita que el el cliente por error modifique configuraciones del plugin

Lucio Negrello

teacher•

Hola Esteban, cómo estás? WordPress tiene sus propios condicionales para poder determinar dónde ejecutar algunas cosas. Uno de los casos de uso más común es el de limitar en qué páginas se cargan los CSS y JS (con las funciones wp_enqueue_style() y wp_enqueue_script()). Te dejo en este enlace todas las etiquetas condicionales propias de WordPress, para que revises cuál se ajusta a tus necesidades. Un ejemplo sería:

if (is_page('home')) {
	wp_enqueue_style('handler-style');
	wp_enqueue_script('handler-script');
}

Saludos!

Santiago Salej Villada

student•

No logro entender como das tanta información tan importante en tan poco tiempo

Jorge Santos Velasco

student•

¿Cuáles son las carpetas por defecto que utiliza @wordpress/scripts para compilar el código?

Lucio Negrello

teacher•

Hola Jorge, tu código debe ir en la carpeta src. Saludos!

Daniel da Silva Jarque

student•

Todo clarísimo. Gracias

Usuario anónimo

user•

wp_ajax Las funciones se registran con este hook para los usuarios logueados. ● wp_ajax_nopriv Las funciones se registran con este hook para funcionar sin usuarios logueados.

María José Ledesma

student•

¡Muchas gracias por el aporte! 😄

Usuario anónimo

user•

url: ajaxurl Todas las peticiones AJAX se envían a la misma url. ● method La información puede enviarse por GET o POST. ● data (action) Cada función PHP que procesará una petición AJAX se registra.

Usuario anónimo

user•

fetch También podemos hacer las peticiones con JavaScript Vanilla.

María José Ledesma

student•

¡Nunca pares de aprender! 🦄

Kenneth Angulo L

student•

Ajax -> (JavaScript asíncrono y XML)

Cuando la tecnologia es util, es util y no hay nada mas que hacer.

En Wordpress al dia de hoy (2025), sus componentes, los objetos, el disenador de paginas, pluggins, etc. todos usan extensivamente estas tecnicas por detras.

Juan Carlos Ortiz Romero

student•

functions.php

<?php

function my_event_list_cb() {
    // Check for nonce security
    $nonce = sanitize_text_field( $_POST['nonce'] );

    if ( ! wp_verify_nonce( $nonce, 'my-ajax-nonce' ) ) {
        die ( 'Busted!');
    }

    $args = array(
        'post_type' => 'evento',
        'meta_query' => array(
            array(
                'key'     => 'destacado',
                'value'   => 1,
                'compare' => '=',
            ),
        ),
    );
    $query = new WP_Query( $args );

    if ( $query->have_posts() ) {
        echo '<ul>';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li>' . get_the_title() . '</li>';
        }
        echo '</ul>';
    }

    wp_die();
}
add_action( 'wp_ajax_nopriv_event-list', 'my_event_list_cb' );
add_action( 'wp_ajax_event-list', 'my_event_list_cb' );

Juan Carlos Ortiz Romero

student•

evento.js

jQuery(document).ready(function ($) {
    $("#my-button").on("click", function(){
        jQuery.ajax({
            type: "post",
            url: ajax_var.url,
            data: "action=" + ajax_var.action + "&nonce=" + ajax_var.nonce,
            success: function(result){
                $('#my-events-list').html(result);
            }
        });
    });
});

Juan Carlos Ortiz Romero

student•

admin_ajax.php

<?php

function my_load_scripts() {
    wp_enqueue_script( 'my_js', get_theme_file_uri( 'js/eventos.js'), array('jquery') );

    wp_localize_script( 'my_js', 'ajax_var', array(
        'url'    => admin_url( 'admin-ajax.php' ),
        'nonce'  => wp_create_nonce( 'my-ajax-nonce' ),
        'action' => 'event-list'
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_load_scripts' );