Вопрос или проблема
Это мой файл функций
add_action( 'wp_ajax_homekong_pagination', 'homekong_pagination' );
add_action( 'wp_ajax_nopriv_homekong_pagination', 'homekong_pagination' );
function homekong_pagination($pages="", $range = 2)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class=\"paginations\">";
echo "<nav class=\"page-navigation\">";
echo "<ul id='pagination' class=\"pagination\">";
if($paged > 2 && $paged > $range+1 && $showitems < $pages)
echo "<li class=\"page-item\"><a aria-current=\"page\" class=\"page-numbers page-link prev\" href=\"".get_pagenum_link(1)."\">ПРЕДЫДУЩИЙ</a></li>";
if($paged > 1 && $showitems < $pages)
echo "<li class=\"page-item\"><a class=\"page-numbers page-link\" href=\"".get_pagenum_link($paged - 1)."\"><span class=\"dashicons dashicons-arrow-left-alt\"></span></a></li>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<li class=\"page-item\"><a class=\"page-numbers page-link current\">".$i."</a></li>" : "<li class=\"page-item\"><a class=\"page-numbers page-link\" href=\"".get_pagenum_link($i)."\">".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages)
echo "<li class=\"page-item\"><a class=\"page-numbers page-link\" href=\"".get_pagenum_link($paged + 1)."\"><span class=\"dashicon dashicons-arrow-right-alt\"></span></a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages)
echo "<li class=\"page-item\"><a class=\"next page-numbers page-link\" href=\"".get_pagenum_link($pages)."\">ДАЛЕЕ</a></li>";
echo "</ul>";
echo "</nav>";
echo "</div>";
}
exit();
}
Это мой фронтенд код, в который я хотел бы внести изменения.
<div id="blogs" class="blog-items">
<div class="row">
<?php
// аргументы
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'order_by' => 'publish_date',
'order' => 'desc',
'post_type' => 'blogs',
'paged' => $paged,
);
// получить результаты
$the_query = new WP_Query( $args );
// Цикл
?>
<?php if( $the_query->have_posts() ): ?>
<?php $counter = 0;?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="col-lg-6">
<div class="blog-item">
<div class="img-thumb">
<?php the_post_thumbnail();?>
</div>
<div class="blog-text">
<div class="blog-cat">
<label for="">
<?php echo blog_categories_terms($post->ID, 'blog-category');?>
</label>
</div>
<a href="https://wordpress.stackexchange.com/questions/348207/<?php the_permalink();?>">
<h3 class="blog-title">
<?php the_title();?>
</h3>
</a>
<div class="blog-date">
<?php echo get_the_date();?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); // Восстановить глобальные данные поста, перезаписанные the_post(). ?>
<!-- завершение строки -->
</div>
<!-- завершение элементов блога -->
Как мне добавить ajax в пагинацию? Я не могу понять, как это сделать.
Для этого вам просто нужно сделать один ajax-запрос на языке javascript.
Вот пошаговое решение.
-
Добавьте обработчик кликов на javascript
-
При клике отправьте ajax-запрос на страницу пагинации
-
Замените элемент с селектором “.blog-items” на текущей странице новым элементом
jQuery(document.body).on('click', '#pagination a', function (event) {
var linkElement = jQuery(event.currentTarget);
jQuery.ajax(linkElement.attr('href')).done(function (newPageHTML) {
jQuery('.blog-items').replaceWith(
jQuery(newPageHTML).find('.blog-items')
);
});
Ответ или решение
Чтобы добавить Ajax к вашей пагинации в WordPress, вам нужно выполнить несколько шагов. Мы будем использовать JavaScript для обработки кликов по ссылкам пагинации и делать Ajax-запросы для получения новых данных, которые будут заменять текущее содержимое на странице. Ниже представлен полный процесс.
Шаг 1: Изменение вашего PHP кода
Убедитесь, что ваши ссылки пагинации используют URL для Ajax-запроса и содержат нужные данные. По умолчанию ваши <a>
теги уже содержат правильные URL, так что здесь делать ничего не нужно.
Шаг 2: Добавление JavaScript кода
Добавьте следующий JavaScript в ваш файл, чтобы обрабатывать клики по элементам пагинации и выполнять Ajax-запросы:
jQuery(document).ready(function($) {
$(document.body).on('click', '#pagination a', function(event) {
event.preventDefault(); // Предотвращаем переход по ссылке
var linkElement = $(this);
// Отправляем Ajax-запрос
$.ajax({
url: linkElement.attr('href'),
type: 'GET',
success: function(newPageHTML) {
// Заменяем содержимое .blog-items новым содержимым
$('.blog-items').replaceWith(
$(newPageHTML).find('.blog-items')
);
// Заменяем пагинацию, так как мы загружаем новую страницу
$('#pagination').replaceWith(
$(newPageHTML).find('#pagination')
);
}
});
});
});
Шаг 3: Подключите JavaScript файл
Убедитесь, что вы подключили этот JavaScript файл в functions.php
вашего темы. Например:
function my_theme_enqueue_scripts() {
wp_enqueue_script('ajax-pagination', get_template_directory_uri() . '/js/ajax-pagination.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
Шаг 4: Проверьте работу Ajax
Теперь, когда вы выполните эти шаги, проверьте, что при нажатии на ссылки пагинации ваше содержимое будет загружаться динамически без перезагрузки страницы.
Дополнительные улучшения
-
Обработка ошибок: Вы можете добавить обработку ошибок в AJAX-запрос, чтобы уведомлять пользователя о проблемах с загрузкой.
error: function(jqXHR, textStatus, errorThrown) { console.error('Ошибка загрузки страницы: ' + textStatus); }
-
Анимации загрузки: Для улучшения пользовательского опыта вы можете добавить индикацию загрузки, чтобы пользователи видели, что что-то происходит.
Заключение
Теперь вы успешно добавили поддержку Ajax к пагинации вашего сайта на WordPress. Этот подход делает ваш сайт более отзывчивым и улучшает пользовательский опыт. Если у вас возникают дополнительные вопросы, не стесняйтесь обращаться за помощью!