¿Cómo utilizar AJAX dentro de WordPress?

¿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.

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

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.

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

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.

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

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.

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

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

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

Todo clarísimo. Gracias

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.

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.

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

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' );

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);
            }
        });
    });
});

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' );