Як завантажувати повідомлення в WordPress за допомогою AJAX
Я веду канал YouTube, де публікую відео, пов’язані з програмуванням та програмним забезпеченням. Нещодавно один з абонентів запитав мене, як завантажити допис WordPress за допомогою AJAX. У відповідь на нього я вирішив написати допис на його запитання. Отже, у цій статті ми вивчаємо, як завантажити публікацію WordPress за допомогою AJAX, використовуючи кнопку завантаження більше та прокручування сторінки.
Різниця між завантаженням більше і прокруткою сторінки досить проста. Коли ви використовуєте кнопку завантажити більше, вам потрібно натиснути кнопку, щоб побачити наступний набір дописів. А при прокрутці сторінки, коли ви прокручуєте кінець області перегляду, наступний набір повідомлень повинен автоматично завантажуватися.
Припустимо, у вас є кілька дописів, і вам потрібно відобразити 2 дописи при завантаженні сторінки, а потім, натиснувши "Завантажити більше" або "Прокрутка сторінки", повинні відобразитися наступні 2 дописи. Цей процес триватиме доти, доки не з’являться всі ваші дописи.
Створіть нову сторінку під назвою "Блог". Для відображення своїх дописів на сторінці блогу створіть власний шаблон page-blog.phpу каталозі вашої активної теми.
Тепер, коли користувачі відвідують вашу сторінку блогу, вони повинні побачити 2 повідомлення. Отже, додайте код нижче у файл власного шаблону.
<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>Тут я використав «підкачуваний» ключ і передав йому значення «1». "paged" – це ключ, який використовується в WordPress, коли йдеться про пагінацію. ‘paged’ => 1 означає першу сторінку.
Ви помітили би елемент div із класом ‘loadmore’. Після натискання кнопки «Завантажити більше» ми зателефонуємо Ajax і отримаємо наступний набір дописів.
Завантажте повідомлення WordPress за допомогою Ajax за допомогою кнопки "Завантажити більше"
Щоб здійснити виклик Ajax, вам потрібно включити файл JS у середовище WordPress. Створіть custom.jsфайл всередині jsкаталогу, а потім додайте нижче functions.phpфайл у файл.
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' );Далі, давайте напишемо трохи jQuery та надішлемо виклик Ajax, який натомість дасть наступні повідомлення.
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();
}
});
});
});Те, що ми тут робимо, це те, що я взяв змінну javascript ‘page’ з початковим значенням 2, оскільки ми збираємося розпочати з розміщення сторінок на другій сторінці. Я збільшую цю змінну "сторінки" після отримання відповіді Ajax. Отримавши відповідь, я додаю її до списку існуючих публікацій.
Я також використовував параметр дії як ‘load_posts_by_ajax’ для виклику Ajax, який повинен бути зіставлений з діями WordPress. Відкрийте functions.phpфайл і додайте в файл код нижче.
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');У наведених вище діях WordPress ми викликаємо функцію зворотного виклику, load_posts_by_ajax_callbackяку я збираюся визначити на наступному кроці. Ви можете визначити цю функцію у своєму 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();
}Тепер, коли ви натискаєте кнопку «Завантажити більше», вона завантажить наступні повідомлення через Ajax і поверне їх назад у відповідь. Написаний вище код JavaScript обробляє решту речей.
Завантажте повідомлення WordPress за допомогою Ajax для прокрутки сторінки
Деякі користувачі можуть не хотіти кнопку завантаження більше, щоб відображати повідомлення в Ajax. Натомість вони вважають за краще, щоб публікації відображалися, коли користувач досягає кінця області перегляду.
Для цього потрібно написати логіку, яка фіксує подію в кінці області перегляду, решта коду така ж, як кнопка «Завантажити більше». Нижче наведено код jQuery для прокрутки сторінки.
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();
}
});
}
});Це воно! Ви можете спробувати. Я хотів би знати ваші думки та пропозиції в коментарях нижче.