Вопрос или проблема
Я использую пользовательский запрос на статической главной странице, чтобы показать свои посты, но я хотел бы, чтобы моя пагинация работала как карусель (вместо того, чтобы загружать полностью новый URL). В основном, я хочу, чтобы только секция #slides загружалась снова. Это вообще возможно?
Это мой код:
<body>
[... page content ...]
<div id="slides" class="slide bg-mediumgray">
<div id="gridcontainer" class="carousel">
<?php
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
$counter = 1; //start counter
$grids = 2; //Grids per row
global $query_string; //Need this to make pagination work
$mosaicoMenu = new WP_Query(array(
'post_type' => 'artist',
'orderby' => 'title',
'order' => ASC,
'posts_per_page' => 8,
'paged'=>$paged
));
if($mosaicoMenu->have_posts()) :
while($mosaicoMenu->have_posts()) :
$mosaicoMenu->the_post();
//Show the left hand side column
if($counter == 1) :
?>
<div class="griditemleft">
<div class="artista no-padding no-margin" style="background-image: url(<?php the_post_thumbnail_url(); ?>), url('<?php echo get_theme_file_uri('/img/gradient.png') ?>');">
<p><a href="https://wordpress.stackexchange.com/questions/328131/<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?><span>+</span></a></p>
</div>
</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="artista no-padding no-margin" style="background-image: url(<?php the_post_thumbnail_url(); ?>), url('https://i.postimg.cc/9QS9Mn00/gradient2.png');">
<p><a href="https://wordpress.stackexchange.com/questions/328131/<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?><span>+</span></a></p>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
?>
</div>
<div class="pagination-arrows">
<?php
previous_posts_link('<p><i class="nav-arrow fas fa-chevron-left"></i> anterior</p>');
next_posts_link('<p>próximo <i class="nav-arrow fas fa-chevron-right"></i></p>', $mosaicoMenu->max_num_pages);
?>
</div>
<?php
endif;
wp_reset_postdata();
?>
</div>
[... more content ...]
</body
Вы можете загрузить посты с помощью AJAX. Ознакомьтесь с документацией здесь: https://developer.wordpress.org/plugins/javascript/ajax/
Когда загружается первая страница, в карусели у вас есть ваши 8 постов из WP_Query. Когда вы нажимаете далее в карусели, вы захотите сделать AJAX-запрос, чтобы загрузить следующий(-ие) пост(-ы). Например, когда вы доходите до 8-го слайда, вы делаете AJAX-запрос, который вызывает новый WP_Query, но с использованием параметра paged для имитации перехода на страницу 2, 3, 4 и так далее.
Ваша функция отправит обратно новые слайды на вашу страницу, которые вы затем можете добавить в свою карусель.
Предупреждаю, сначала будет небольшая задержка при загрузке с AJAX, так что если пользователь быстро прокручивает слайды, вы, возможно, захотите начать предзагрузку следующего содержимого до того, как он нажмёт “следующий слайд”. Во-вторых, если у вас много постов, у вас может оказаться много слайдов на странице, что потенциально замедлит саму веб-страницу.
Напротив, если у вас всего несколько постов (возможно, 50 или 60), альтернативой может быть загрузка всех слайдов и использование ленивой загрузки для любых изображений.
.
Ответ или решение
Чтобы реализовать пагинацию в стиле карусели для вашего статического фронтального сайта на WordPress, потребуется использование AJAX для динамической подгрузки контента. Это позволит обновлять только секцию #slides без перезагрузки всей страницы.
Шаги для реализации AJAX-карусели:
Техническое задание: Вы желаете осуществить пагинацию постов в секции #slides, обновляя только её, при этом тяже перезагружая страницу. Это возможно при помощи AJAX, который позволяет асинхронно получать данные и обновлять HTML-контент.
1. Изменение структуры HTML и PHP
Ваш текущий код содержит цикл WP_Query, который уже использует параметр ‘paged’ для пагинации. Однако для AJAX-реализации нужно немного изменить этот подход.
<div id="slides" class="slide bg-mediumgray">
<div id="gridcontainer" class="carousel"></div>
<div class="pagination-arrows">
<a href="#" id="previous-link" data-page="1">anterior</a>
<a href="#" id="next-link" data-page="2">próximo</a>
</div>
</div>2. Реализация AJAX для загрузки постов
Создайте файл JavaScript для обработки AJAX-запросов. Он будет отправлять запросы на сервер при клике по ссылкам пагинации и обновлять содержимое секции #gridcontainer.
jQuery(document).ready(function($) {
$('.pagination-arrows a').click(function(e) {
e.preventDefault();
var page = $(this).data('page');
$.ajax({
url: my_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'load_carousel_posts',
page: page
},
success: function(data) {
$('#gridcontainer').html(data);
updatePaginationLinks(page);
}
});
});
function updatePaginationLinks(page) {
// Логика для обновления ссылок пагинации на основе page
}
});3. Создание функций для обработки AJAX-запросов на сервере
На стороне WordPress, создайте функцию, которая будет обрабатывать AJAX-запросы, возвращать соответствующие посты и регистрировать AJAX-действия.
add_action('wp_ajax_load_carousel_posts', 'load_carousel_posts_callback');
add_action('wp_ajax_nopriv_load_carousel_posts', 'load_carousel_posts_callback');
function load_carousel_posts_callback() {
$paged = $_POST['page'];
$mosaicoMenu = new WP_Query(array(
'post_type' => 'artist',
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page' => 8,
'paged' => $paged
));
if($mosaicoMenu->have_posts()) :
while($mosaicoMenu->have_posts()) :
$mosaicoMenu->the_post();
// Ваш HTML-код для отображения каждого поста
endwhile;
endif;
wp_reset_postdata();
die(); // Завершаем AJAX-запрос
}4. Безопасность и оптимизация
Обязательно добавьте ‘wp_enqueue_script’ для регистрации вашего скрипта и передайте AJAX URL WordPress.
function enqueue_my_scripts() {
wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), null, true);
wp_localize_script('my_script', 'my_ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');Заключение
Реализация карусели с помощью AJAX требует участия как клиентской, так и серверной стороны. Это обеспечивает плавность работы интерфейса, манипуляцию только необходимой секцией и создает более интерактивный пользовательский опыт. Однако, как было подсказано ранее, учтите возможные замедления при большом объеме данных и, при необходимости, используйте технику ленивой загрузки изображений.