Получить посты по категории через ajax

Вопрос или проблема

<?php
    $args = array(
        'orderby' => 'slug'
    );
    $categories = get_categories($args);
    foreach ($categories as $category) {
        echo '<a href="' . get_category_link($category->term_id) . '"><div class="category-block">' . $category->name . '</div></a>';
    }
?>

if (is_page()) {
    global $post;
    if ($post->post_name == 'members') {
        wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.js', array(), '', true);
        wp_enqueue_script('blog', get_template_directory_uri() . '/js/blog.js', array('jquery'), '', true);
        wp_localize_script('blog', 'ajaxposts', array(
            'ajaxurl' => admin_url('admin-ajax.php')
        ));
    }
}

(function($) {
    $(document).ready(function() {
        var cat_buttons = $(".category-block");
        cat_buttons.on( 'click', function(event){
            // 
            event.preventDefault();
            var cid = $(this).data('cid');
            $.ajax({
                type: "POST",
                url: ajaxposts.ajaxurl,
                data: {
                    action: 'my_action_name',
                    cat_id: cid // <-- ID категории кликнутого элемента / ссылки
                }
            })
            .done( function(data){
                // отображение записей
            });
        });
    });
})(jQuery);

add_action( 'wp_ajax_my_action_name', 'ajx_handle_my_action' );
add_action( 'wp_ajax_nopriv_my_action_name', 'ajx_handle_my_action' );

function ajx_handle_my_action() {
    $category_id = (int)$_POST['cat_id'];
    //
    // чтение записей категории

    echo json_encode( $result );    
    wp_die();
}

Ответ или решение

Чтобы реализовать функциональность загрузки постов по категории с использованием AJAX на странице page-members.php, вам нужно внести несколько изменений в JavaScript и PHP код. В этом ответе я подробно опишу необходимые шаги и приведу пример реализации.

1. Обновление HTML-кода с учетом ID категорий

Для того чтобы отправить ID категории через AJAX, необходимо добавить атрибут data-cid в элементы категорий. Измените код в page-members.php следующим образом:

<?php
    $args = array(
        'orderby' => 'slug'
    );
    $categories = get_categories($args);
    foreach ($categories as $category) {
        echo '<a href="#"><div class="category-block" data-cid="' . $category->term_id . '">' . $category->name . '</div></a>';
    }
?>

2. Код JavaScript (blog.js)

Следующим шагом будет добавление функциональности в blog.js для обработки кликов на блоки категорий и отправки запроса AJAX:

(function($) {
    $(document).ready(function() {
        var cat_buttons = $(".category-block");
        cat_buttons.on('click', function(event) {
            event.preventDefault();
            var cid = $(this).data('cid');
            $.ajax({
                type: "POST",
                url: ajaxposts.ajaxurl,
                data: {
                    action: 'fetch_posts_by_category', // задаем действие
                    cat_id: cid // идентификатор категории
                }
            })
            .done(function(data) {
                // Обработка полученных данных
                var posts = JSON.parse(data);
                var output = '';
                if(posts.length){
                    posts.forEach(function(post) {
                        output += '<h2>' + post.title + '</h2>'; // выводим заголовки постов
                        output += '<div>' + post.content + '</div>'; // выводим содержание постов
                    });
                } else {
                    output = '<p>Посты не найдены для этой категории.</p>';
                }
                $('#posts-container').html(output); // отображаем данные в контейнере
            });
        });
    });
})(jQuery);

В этом коде мы обрабатываем данные, полученные с сервера, и отображаем посты в элементе с ID posts-container, который вы должны добавить на вашу страницу для отображения результатов.

3. PHP-обработка AJAX-запроса

Теперь необходимо определить функцию, которая будет обрабатывать AJAX-запросы. Добавьте следующий код в файл functions.php:

add_action('wp_ajax_fetch_posts_by_category', 'ajx_handle_fetch_posts_by_category');
add_action('wp_ajax_nopriv_fetch_posts_by_category', 'ajx_handle_fetch_posts_by_category');

function ajx_handle_fetch_posts_by_category() {
    check_ajax_referer('ajax_nonce', 'security'); // проверка безопасности, если требуется

    $category_id = intval($_POST['cat_id']);

    $query_args = array(
        'cat' => $category_id,
        'post_status' => 'publish',
        'posts_per_page' => -1 // получить все посты
    );

    $query = new WP_Query($query_args);
    $result = array();

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $result[] = array(
                'title' => get_the_title(),
                'content' => get_the_content()
            );
        }
    } else {
        $result = array(); // если постов нет
    }

    echo json_encode($result); // возвращаем результат в формате JSON
    wp_die();
}

4. Добавление контейнера для постов

Не забудьте добавить в ваш HTML-код контейнер для отображения загруженных постов. Например:

<div id="posts-container"></div>

Заключение

С вышеописанными изменениями ваша страница page-members.php теперь будет динамически загружать посты по категориям с использованием AJAX без перезагрузки страницы. Убедитесь, что вы правильно настроили все скрипты и правильно подключили jQuery. Попробуйте протестировать функциональность и адаптировать стили под ваши нужды.