Всем привет. У меня такой дизайна сайта:
На каждом табе South Florida и т.д. свои посты, у каждого таба есть своя кнопка "Показать еще". Сейчас посты выводятся, кнопка отображется, но на первом табе если ее нажать, то она как-будто отрабатывает, но пост не показывает, а на следующих табах кнопка есть, но уже не нажимается, так как как-будто скрипт уже отработал. Как это исправить?
Вот код функции в файле страницы:
<div class="shooters-gallery gallery">
<?php foreach( $categories as $key => $category) : ?>
<?php $args = array(
'posts_per_page' => 1,
'post_type' => 'shooter',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => $category -> term_id,
)
)
);
$query = new WP_Query( $args );
// Цикл
if ( $query->have_posts() ) : ?>
<div class="tabs-content">
<div class="row ">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-12 col-sm-4 col-lg-3 shooters-gallery__item">
<div class="shooter-card">
<div class="shooter-card__photo irof mb-3 ">
<?php the_post_thumbnail(); ?>
</div>
<p class="text-h2 mb-3 shooter-card__title"><?php the_title(); ?></p>
<p class=" text-7 mb-2 ">
<?php $skills = get_field('shooters_skills');
if( $skills ): ?>
<?php foreach( $skills as $key => $skill ): ?>
<?php if($skill == end($skills)) {
echo $skill['label'];
} else {
echo $skill['label'] . ' / ';
} ?>
<?php endforeach; ?>
<?php endif; ?>
</p>
<div class="shooter-card__contact shooter-card-contact">
<div class="shooter-card-contact__row">
<span class="shooter-card__label">Phone</span> <a class="shooter-card__data"
href="tel:+1<?php the_field('shooters_phone'); ?>"><?php the_field('shooters_phone'); ?></a>
</div>
<div class="shooter-card-contact__row">
<span class="shooter-card__label">Email</span> <a class="shooter-card__data"
href="mailto:<?php the_field('shooters_email'); ?>"><?php the_field('shooters_email'); ?></a>
</div>
</div>
<a class="shooter-card__link" href="<?php the_field('shooters_portfolio'); ?>" target="_blank"><?php the_field('shooters_portfolio'); ?></a>
</div>
</div>
<!-- /.col-12 -->
<?php endwhile; ?>
<?php if ( $query->max_num_pages > 1 ) : ?>
<script>
var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
var true_posts = '<?php echo serialize($query->query_vars); ?>';
var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
var max_pages = '<?php echo $query->max_num_pages; ?>';
</script>
<button type="button" id="true_loadmore" class="button mb-30">Show more</button>
<?php endif; ?>
</div>
<!-- /.row -->
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php endforeach; ?>
</div>
Код js файла:
jQuery(function ($) {
$('#true_loadmore').click(function () {
$(this).text('Loading...'); // изменяем текст кнопки, вы также можете добавить прелоадер
var data = {
'action': 'loadmoreposts',
'query': true_posts,
'page': current_page
};
$.ajax({
url: ajaxurl, // обработчик
data: data, // данные
type: 'POST', // тип запроса
success: function (data) {
console.log(data);
if (data) {
$('#true_loadmore').text('Show more').before(data); // вставляем новые посты
current_page++; // увеличиваем номер страницы на единицу
if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
} else {
$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
}
}
});
});
});
И код в functions.php:
function main_load_posts(){
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
$args['post_type'] = 'locations';
$args['posts_per_page'] = 1; // по сколько записей подгружать
$args['tax_query'] = array( array( 'taxonomy' => 'category', 'field' => 'term_id', 'terms' => $category -> term_id));
// обычно лучше использовать WP_Query, но не здесь
query_posts( $args );
// если посты есть
if( have_posts() ) :
echo '
<div class="tabs-content">
<div class="row ">
';
// запускаем цикл
while( have_posts() ): the_post();
echo '
<div class="col-12">
<div class="page-location-item">
<div class="page-location-item__photo irof mb-3 mb-md-4">
'. get_the_post_thumbnail() .'
</div>
<p class="text-h1 text-h1--36 mb-3 mb-md-4 page-location-item__title">'. get_the_title() .'</p>
'. get_the_content() .'
</div>
</div>
';
endwhile;
echo '</div>
<!-- /.row -->
</div>';
endif;
die();
}
add_action('wp_ajax_loadmoreposts', 'main_load_posts');
add_action('wp_ajax_nopriv_loadmoreposts', 'main_load_posts');