Cómo cargar publicaciones de WordPress con AJAX
Estoy ejecutando un canal de YouTube donde publico videos relacionados con la programación y el software. Recientemente, uno de los suscriptores me preguntó cómo cargar una publicación de WordPress con AJAX. En respuesta a él, decidí escribir una publicación sobre su pregunta. Entonces, en este artículo, estudiamos cómo cargar una publicación de WordPress con AJAX usando un botón de carga más y un desplazamiento de página.
La diferencia entre cargar más y un desplazamiento de página es bastante simple. Cuando use el botón Cargar más, debe hacer clic en un botón para ver el siguiente conjunto de publicaciones. Y en el desplazamiento de página, cuando se desplaza hasta el final de una ventana gráfica, el siguiente conjunto de publicaciones debería cargarse automáticamente.
Supongamos que tiene un par de publicaciones y necesita mostrar 2 publicaciones en la carga de la página y luego, al hacer clic en ‘Cargar más’ o en ‘Desplazamiento de página’, deberían mostrarse las siguientes 2 publicaciones. Este proceso continuará hasta que se muestren todas sus publicaciones.
Crea una nueva página llamada ‘Blog’. Para mostrar sus publicaciones en la página del Blog, cree una plantilla personalizada page-blog.phpen el directorio de su tema activo.
Ahora, cuando los usuarios visiten la página de su blog, deberían ver 2 publicaciones. Por lo tanto, agregue el código a continuación en su archivo de plantilla personalizada.
<div class="entry-content">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => 1,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<div class="blog-posts">
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<div class="loadmore">Load More...</div>
<?php endif; ?>
</div>Aquí, utilicé la clave ‘paginado’ y le pasé el valor ‘1’. ‘paginado’ es una clave utilizada en WordPress cuando se trata de paginación. ‘paged’ => 1 significa la primera página.
Notaría el elemento div con la clase ‘loadmore’. Al hacer clic en Cargar más, realizaremos una llamada Ajax y obtendremos el siguiente conjunto de publicaciones.
Cargar publicaciones de WordPress con Ajax en el botón Cargar más
Para realizar una llamada Ajax, debe incluir el archivo JS en el entorno de WordPress. Cree un custom.jsarchivo dentro del jsdirectorio y luego agregue el siguiente código en el functions.phparchivo.
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_more_posts' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );A continuación, escribamos un poco de jQuery y hagamos una llamada Ajax que, a cambio, dará las siguientes publicaciones.
custom.js
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
});
});Lo que estamos haciendo aquí es que tomé una ‘página’ variable de JavaScript con el valor inicial 2 ya que vamos a comenzar con la paginación de la segunda página. Estoy incrementando esta variable de ‘página’ después de recibir la respuesta de Ajax. Después de recibir la respuesta, la anexaré a la lista de publicaciones existentes.
También utilicé el parámetro de acción como ‘load_posts_by_ajax’ para una llamada Ajax que debe mapearse con las acciones de WordPress. Abra su functions.phparchivo y agregue el siguiente código a un archivo.
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');En las acciones de WordPress anteriores, llamamos a la función de devolución de llamada load_posts_by_ajax_callbackque definiré en el siguiente paso. Puede definir esta función en su functions.php.
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => $paged,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php
endif;
wp_die();
}Ahora, cuando haga clic en el botón ‘Cargar más’, cargará las siguientes publicaciones a través de Ajax y las devolverá en respuesta. El código JavaScript escrito arriba se encargaría del resto.
Cargar publicaciones de WordPress con Ajax en el desplazamiento de página
Es posible que algunos usuarios no quieran un botón de carga más para mostrar las publicaciones con Ajax. En cambio, prefieren que las publicaciones se muestren una vez que el usuario llega al final de una ventana gráfica.
Para lograr esto, necesita escribir una lógica que capture el evento al final de una ventana gráfica, el resto del código es el mismo que el botón ‘Cargar más’. A continuación se muestra el código jQuery para el desplazamiento de página.
jQuery(window).scroll(function($) {
if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
}
});¡Eso es! Puedes seguir adelante y probarlo. Me gustaría conocer sus pensamientos y sugerencias en los comentarios a continuación.