Как настроить кнопку "Показать еще" на сайте WordPress с использованием AJAX?

Для настройки кнопки "Показать еще" на сайте WordPress с использованием AJAX, вам потребуется создать функцию обработчик для AJAX запросов, которая будет загружать дополнительные записи при нажатии на кнопку.

Пример кода для создания кнопки "Показать еще" с использованием AJAX:

1. Создайте скрипт JavaScript для отправки AJAX запроса:
```javascript
jQuery(function($) {
    var page = 1;
    var term = 'your_term_here'; // Замените на нужное значение

    $('#show-more-button').on('click', function() {
        page++;

        var data = {
            action: 'load_more_posts',
            page: page,
            term: term
        };

        $.post(ajaxurl, data, function(response) {
            $('#post-container').append(response);
        });
    });
});
```

2. Создайте PHP функцию обработчик для AJAX запросов в файле functions.php вашей темы:
```php
function load_more_posts() {
    $page = $_POST['page'];
    $term = $_POST['term'];

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => $page,
        'tax_query' => array(
            array(
                'taxonomy' => 'your_taxonomy_here',
                'field' => 'slug',
                'terms' => $term
            )
        )
    );

    $posts = new WP_Query($args);

    if ($posts->have_posts()) {
        while ($posts->have_posts()) {
            $posts->the_post();
            // Выводите содержимое записей
        }
    }

    wp_die();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
```

3. Добавьте кнопку "Показать еще" на вашу страницу WordPress:
```html
<button id="show-more-button">Показать еще</button>
<div id="post-container">
    <!-- Сюда будут добавляться дополнительные записи -->
</div>
```

Чтобы исправить ошибку, которая возникает при нажатии на кнопку "Показать еще" на следующей вкладке после переключения на вкладку ajax-label и использовании различных значений term для каждой вкладки, вы можете добавить дополнительный атрибут data-term к кнопке "Показать еще" и передавать его значение в AJAX запросе. Таким образом, AJAX запрос будет использовать правильное значение term для каждой вкладки.

Например:
```html
<button class="show-more-button" data-term="term1">Показать еще</button>
```

И в JavaScript скрипте измените переменную term на:
```javascript
var term = $(this).data('term');
```

Таким образом, при клике на кнопку "Показать еще" на каждой вкладке будет использоваться соответствующее значение term.

Решил проблему: 
 
 Нужно добавить атрибут для кнопки до AJAX запроса. Обновленный код: 
 
const container = $("#works-response");
	let paged = 1;
	let maxPages = 1;
	$(".ajax-label").click(function (e) {
		e.preventDefault();

		let term = $(this).data("term");
		if ($(this).hasClass("ajax-label")) {
			$(this).siblings().removeClass("active");
			$(this).addClass("active");
		}
		$("#loadmore-works button").data("term", term);
		console.log("PAGED до запроса", paged);
		$.ajax({
			url: perviy_ajax_obj.ajaxurl,
			type: "POST",
			data: {
				action: "get_works",
				term: term,
				// paged: 0,
			},
			success: function (response) {
				if (response.message) {
					console.log(response.message);
				} else {
					console.log(response);
					response.posts.forEach(function (post) {
						console.log(post);
						container.html("");
						container.append(post.html);
					});
					paged = 1;
					console.log("PAGED ПОСЛЕ запроса", paged);
					maxPages = response.max_pages;
					$("#loadmore-works button").attr("data-term", term);
					$("#loadmore-works button").removeAttr("data-max_pages");
					$("#loadmore-works button").removeAttr("data-paged");
					if (paged == maxPages) {
						$("#loadmore-works button").addClass("none");
					} else {
						$("#loadmore-works button").removeClass("none");
					}
					$(".works__images").twentytwenty();
				}
			},
		});
	});
	$(document).on("click", "#loadmore-works button", function (e) {
		e.preventDefault();
		let term = $(this).data("term");
		paged = 1;
		$.ajax({
			url: perviy_ajax_obj.ajaxurl,
			type: "POST",
			data: {
				action: "get_works",
				term: term,
				paged: paged,
			},
			success: function (response) {
				if (response.message) {
					console.log(response.message);
				} else {
					console.log(response);
					response.posts.forEach(function (post) {
						console.log(post);
						container.append(post.html);
					});
					maxPages = response.max_pages;
					paged++;
					console.log("PAGED после запроса показать еще", paged);
					if (paged == maxPages) {
						$("#loadmore-works button").addClass("none");
					} else {
						$("#loadmore-works button").removeClass("none");
					}
					$(".works__images").twentytwenty();
				}
			},
		});
	});