Это фактический макет: https://i.stack.imgur.com/LEB8Z.png
Содержит пост-цикл WordPress внутри макета начальной загрузки с тремя статьями для каждой страницы.
У меня есть следующая кнопка справа, которая в настоящее время загружает следующую страницу старых постов, но без анимации. После этого мне нужно правильно настроить кнопку «Назад» и добавить эффекты перехода, аналогичные горизонтальным слайдам в карусели начальной загрузки.
Код в теле:
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page1000 = 2;
jQuery(function($) {
$('body').on('click', '.loadmore1000', function() {
var data = {
'action': 'load_posts_by_ajax1000',
'page1000': page1000,
'security1000': '<?php echo wp_create_nonce("load_more_posts1000"); ?>'
};
$.post(ajaxurl, data, function(response) {
$('.my-posts1000').html(response);
page1000++;
});
});
});
</script>
<div class="row news">
<div class="col-md-10 offset-md-1 margin-top-2 margin-bottom-2">
<h2 class="text-center">News</h2>
<div class="row my-posts1000">
<?php
$paged = ( get_query_var( 'paged' ) );
$args = array (
'orderby' => 'date',
'order' => 'DSC',
'posts_per_page' => 3,
'paged' => 1,
'category_name' => 'News',
);
$query = new WP_Query( $args ); ?>
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-md-4 ">
<!--Here there's further content....-->
</div>
<?php endwhile; ?>
</div>
</div>
<?php if ( $query->max_num_pages > 1 )
echo '<div class="col-md-1">
<div class="loadmore1000">
<p>
<a href="#/"><span class="carousel-control-next-icon"></span></a>
</p>
</div>
</div>'; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
Код в функциях
add_action('wp_ajax_load_posts_by_ajax1000', 'load_posts_by_ajax_callback1000');
add_action('wp_ajax_nopriv_load_posts_by_ajax1000', 'load_posts_by_ajax_callback1000');
function load_posts_by_ajax_callback1000() {
check_ajax_referer('load_more_posts1000', 'security1000');
$paged1000 = $_POST['page1000'];
$args = array (
'orderby' => 'date',
'order' => 'DSC',
'posts_per_page' => 3,
'category_name' => 'News',
'paged' => $paged1000,
);
$query = new WP_Query( $args ); ?>
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-md-4 ">
<!--Here there's further content....-->
</div>
<?php endwhile ?>
<?php
endif;
wp_die();
}