En esta lección aprenderás a realizar peticiones Ajax en WordPress, un método esencial para crear sitios web dinámicos sin necesidad de recargar la página.

¿Qué es Ajax y por qué usarlo en WordPress?

Ajax (Asynchronous JavaScript and XML) permite enviar y recibir datos del servidor sin recargar la página. En WordPress, esto es útil para:

✅ Cargar contenido dinámicamente (posts, productos, comentarios, etc.).
✅ Filtrar resultados sin refrescar la página.
✅ Enviar formularios sin recargar la web.
✅ Mejorar la experiencia de usuario con respuestas más rápidas.

Funcionamiento de Ajax en WordPress

Todas las peticiones Ajax en WordPress se procesan a través del archivo admin-ajax.php, el cual se encarga de gestionar las solicitudes y responder con la información deseada.

Ejemplo práctico: Cargar contenido con Ajax

1. Crear el script JavaScript para enviar la petición

En el archivo script.js de tu tema o plugin, agrega:

jQuery(document).ready(function($) {
    $("#boton-cargar").click(function() {
        $.ajax({
            url: ajaxurl, // URL de admin-ajax.php
            type: "POST",
            data: {
                action: "cargar_posts"
            },
            success: function(response) {
                $("#contenido").html(response);
            }
        });
    });
});

📌 Explicación:
1️⃣ url: ajaxurl → Apunta al archivo admin-ajax.php.
2️⃣ type: "POST" → Se envía una petición POST.
3️⃣ data: { action: "cargar_posts" } → Especifica la acción que se ejecutará en WordPress.
4️⃣ success: function(response) {} → Inserta la respuesta en el contenedor #contenido.

2. Definir la función en functions.php

En el archivo functions.php de tu tema, agrega la función que responderá la petición:

function cargar_posts() {
    $posts = new WP_Query(array(
        'posts_per_page' => 5,
        'post_status'    => 'publish'
    ));

    if ($posts->have_posts()) {
        while ($posts->have_posts()) {
            $posts->the_post();
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<p>' . get_the_excerpt() . '</p>';
        }
        wp_reset_postdata();
    }

    die(); // Importante para terminar correctamente la petición Ajax
}

// Registrar la acción para usuarios autenticados y no autenticados
add_action('wp_ajax_cargar_posts', 'cargar_posts');
add_action('wp_ajax_nopriv_cargar_posts', 'cargar_posts');

📌 Explicación:
✅ Se usa WP_Query para obtener los últimos 5 posts publicados.
✅ while ($posts->have_posts()) recorre y muestra cada post.
✅ die(); finaliza la ejecución para evitar errores.
✅ add_action('wp_ajax_cargar_posts', 'cargar_posts'); → Permite la acción Ajax para usuarios autenticados.
✅ add_action('wp_ajax_nopriv_cargar_posts', 'cargar_posts'); → Permite la acción Ajax para usuarios no autenticados.

3. Agregar un botón en la plantilla

En page.php o donde necesites el botón, coloca:

<div id="contenido"></div>
<button id="boton-cargar">Cargar Posts</button>

Esto mostrará los posts al hacer clic en el botón.

Conclusión

Ahora sabes cómo hacer peticiones Ajax en WordPress de manera eficiente. Esto te ayudará a mejorar la interactividad de tu sitio sin recargar la página. 🚀