Jak załadować posty WordPress za pomocą AJAX
Prowadzę kanał YouTube, na którym zamieszczam filmy związane z programowaniem i oprogramowaniem. Niedawno jeden z subskrybentów zapytał mnie, jak załadować post WordPress za pomocą AJAX. W odpowiedzi na jego pytanie postanowiłem napisać posta na jego pytanie. W tym artykule dowiemy się, jak załadować post WordPress za pomocą AJAX za pomocą przycisku ładowania więcej i przewijania strony.
Różnica między ładowaniem więcej a przewijaniem strony jest dość prosta. Korzystając z przycisku Load more, musisz kliknąć przycisk, aby zobaczyć następny zestaw postów. A podczas przewijania strony, gdy przewiniesz do końca okienka ekranu, następny zestaw postów powinien zostać automatycznie załadowany.
Załóżmy, że masz kilka postów i musisz wyświetlić 2 posty podczas ładowania strony, a następnie klikając „Załaduj więcej" lub „Przewijanie strony” powinny wyświetlić się kolejne 2 posty. Ten proces będzie trwał do momentu wyświetlenia wszystkich Twoich postów.
Utwórz nową stronę o nazwie „Blog”. Aby wyświetlić swoje posty na stronie Blog, utwórz niestandardowy szablon page-blog.phpw katalogu aktywnego motywu.
Teraz, gdy użytkownicy odwiedzają stronę Twojego bloga, powinni zobaczyć 2 posty. Dodaj więc poniższy kod do niestandardowego pliku szablonu.
<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>Tutaj użyłem klucza „paged” i przekazałem do niego wartość „1″. „paged” to klucz używany w WordPressie, jeśli chodzi o paginację. ‘paged’ => 1 oznacza pierwszą stronę.
Zauważyłbyś element div z klasą ‘loadmore’. Po kliknięciu Load More, zadzwonimy do Ajaxu i otrzymamy następny zestaw postów.
Załaduj posty WordPress za pomocą Ajax za pomocą przycisku Załaduj więcej
Aby wykonać wywołanie Ajax, musisz dołączyć plik JS do środowiska WordPress. Utwórz custom.jsplik w jskatalogu, a następnie dodaj poniższy kod w functions.phppliku.
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' );Następnie napiszmy trochę jQuery i dajmy wywołanie Ajax, które w zamian da kolejne posty.
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();
}
});
});
});To, co tutaj robimy, to wziąłem zmienną javascript ‘page’ z początkową wartością 2, ponieważ zaczniemy od paginacji drugiej strony. Zwiększam tę zmienną „strony” po otrzymaniu odpowiedzi Ajax. Po otrzymaniu odpowiedzi dołączam ją do istniejącej listy postów.
Użyłem również parametru akcji jako ‘load_posts_by_ajax’ do wywołania Ajax, które musi być zmapowane z akcjami WordPressa. Otwórz functions.phpplik i dodaj poniższy kod do pliku.
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');W powyższych akcjach WordPressa wywołujemy funkcję callback, load_posts_by_ajax_callbackktórą zdefiniuję w następnym kroku. Możesz zdefiniować tę funkcję w swoim 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();
}Teraz, gdy klikniesz przycisk „Załaduj więcej”, załaduje następne posty przez Ajax i zwróci je w odpowiedzi. Napisany powyżej kod JavaScript poradziłby sobie z resztą.
Załaduj posty WordPress za pomocą Ajax na przewijaniu strony
Niektórzy użytkownicy mogą nie chcieć przycisku ładowania więcej do wyświetlania postów za pomocą Ajax. Zamiast tego wolą, aby posty były wyświetlane, gdy użytkownik dotrze do końca widocznego obszaru.
Aby to osiągnąć, musisz napisać logikę, która przechwytuje zdarzenie na końcu rzutni, reszta kodu jest taka sama, jak przycisk „Załaduj więcej”. Poniżej znajduje się kod jQuery do przewijania strony.
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();
}
});
}
});Otóż to! Możesz śmiało spróbować. Chciałabym poznać Wasze przemyślenia i sugestie w komentarzach poniżej.