Как сделать ajax фильтрацию по произвольному полю флажок?

Question

[starkingdom]

Пытаюсь для себя сделать ajax фильтрацию по произвольному полю флажок. Решил сначала сделать по рубрикам:

<!-- Выводим все рубрики и все записи -->

<div class="category-filter">
    <ul>
        <li><a href="#" data-cat="0">Все записи</a></li>
        <?php
        $categories = get_categories(array(
            'hide_empty' => 0,
        ));
        foreach ($categories as $category) {
            echo '<li><a href="#" data-cat="' . $category->term_id . '">' . $category->name . '</a></li>';
        }
        ?>
    </ul>
</div>

<div id="post-container">
    <?php
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post(); ?>
            <?php the_title(); ?>
        <?php endwhile;
        wp_reset_postdata();
    else :
        echo '<p>Записи не найдены.</p>';
    endif;
    ?>
</div>

<!-- в function добавляем данный код -->

function enqueue_ajax_filter() {
    wp_enqueue_script('ajax-filter', get_stylesheet_directory_uri() . '/assets/js/ajax-filter.js', array('jquery'), '1.0', true);
    wp_localize_script('ajax-filter', 'myAjax', array(
        'url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('filter_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_filter');

function filter_posts_by_category() {
    check_ajax_referer('filter_nonce', 'nonce');

    $cat_id = isset($_POST['cat_id']) ? intval($_POST['cat_id']) : 0;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
    );

    if ($cat_id > 0) {
        $args['cat'] = $cat_id;
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            // Вывести шаблон поста (например, content.php)
           the_title();
        endwhile;
        wp_reset_postdata();
    else :
        echo '<p>Записи не найдены.</p>';
    endif;

    wp_die();
}
add_action('wp_ajax_filter_posts_by_category', 'filter_posts_by_category');
add_action('wp_ajax_nopriv_filter_posts_by_category', 'filter_posts_by_category');

<!-- создаём файл ajax-filter.js -->

jQuery(document).ready(function($) {
    $('.category-filter a').on('click', function(e) {
        e.preventDefault();
        var cat_id = $(this).data('cat');
        $.ajax({
            url: myAjax.url,
            type: 'POST',
            data: {
                action: 'filter_posts_by_category',
                cat_id: cat_id,
                nonce: myAjax.nonce
            },
            success: function(response) {
                $('#post-container').html(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

А теперь пытаюсь этот код адаптировать под страницы с определенным шаблоном. Вопрос такой, как мне вывести на другой странице все поля флажков, а потом по этим флажкам фильтровать уже страницы с определённым шаблоном?

Comments

[Артем Золин]

Что такое поле флажок? checkbox? Ну так используйте тогда html теги и

[starkingdom]

Артем Золин, checkbox переводится как флажок, такое поле есть в acf. Вы говорите через html теги, но как это сделать? Я предполагаю такой алгоритм. Нужно как-то вывести все эти флажки и вывести все страницы, и потом делать ajax фильтр, но как это реализовать?