Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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. 🚀