Solution:
Pass the current category to load more buttons.
<div class="loadmore" data-cat-id="<?php echo $category[0]->cat_ID; ?>">Load More...</div>
Now you have to pass that id to ajax on click.
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security,
'cat_id': $(this).data('cat-id')
};
in your ajax callback get that id and pass it to WP_query args.
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'cat' => array($_POST['cat_id']),
'paged' => $paged,
);
Updated as per OP code.
Example.php
<?php
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '5',
'paged' => 1,
'cat' => $category,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ( $blog_posts->have_posts() ) : ?>
<div class="example-container">
<?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>
<div class="season-item">
<div class="serial__preview">
<a class="serial__poster" href="<?php the_permalink(); ?>">
<img loading="lazy" src="<?php echo get_template_directory_uri(); ?>/images/play.svg" class="serial__play" alt="">
<img loading="lazy" class="serial__img" src="<?php echo the_field('миниатюра'); ?>" alt="">
<p>52:00</p>
</a>
</div>
<div class="serial__text">
<a href="<?php the_permalink(); ?>" class="serial__number"><?php the_title(); ?></a>
</div>
</div>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<div class="loadmore" data-cat-id="<?php echo $category; ?>">Load More...</div>
<?php endif; ?>
Function.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' );
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');
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'cat' => $_POST['cat_id'],
'paged' => $paged,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ( $blog_posts->have_posts() ) : ?>
<?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>
<div class="season-item">
<div class="serial__preview">
<a class="serial__poster" href="<?php the_permalink(); ?>">
<img loading="lazy" src="<?php echo get_template_directory_uri(); ?>/images/play.svg" class="serial__play" alt="">
<img loading="lazy" class="serial__img" src="<?php echo the_field('миниатюра'); ?>" alt="">
<p>52:00</p>
</a>
</div>
<div class="serial__text">
<a href="<?php the_permalink(); ?>" class="serial__number"><?php the_title(); ?></a>
</div>
</div>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php
endif;
wp_die();
}
Custom.js
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security,
'cat_id': $(this).data('cat-id')
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.example-container').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
});
});