Как реализовать фильтрацию по категориям с помощью AJAX в WordPress?

Как изменить код для реализации ajax фильтрации по произвольному полю флажок с использованием выпадающего списка вместо списка тегов `<li>`?
  • 1 мая 2024 г. 18:30
Ответы на вопрос 1
Для реализации фильтрации по категориям с помощью AJAX в WordPress сначала необходимо создать функцию обработчика AJAX запроса в файле functions.php вашей темы:

```php
add_action('wp_ajax_filter_posts', 'filter_posts');
add_action('wp_ajax_nopriv_filter_posts', 'filter_posts');

function filter_posts() {
    $category = $_POST['category'];

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

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // Вывод постов
        }
    }

    wp_reset_postdata();

    die();
}
```

Затем нужно добавить обработчик AJAX запросов в файле JavaScript вашей темы:

```javascript
jQuery(function($) {
    $('#filter').change(function() {
        var category = $(this).val();

        $.ajax({
            url: ajaxurl,
            data: {
                action: 'filter_posts',
                category: category
            },
            success: function(response) {
                // Обновление контента на странице
            }
        });
    });
});
```

Замените `#filter` на идентификатор вашего элемента фильтрации, а `ajaxurl` на URL для обработки запросов AJAX в WordPress.

Чтобы изменить код для реализации фильтрации по произвольному полю флажок с использованием выпадающего списка вместо списка тегов `<li>`, вам нужно изменить HTML элемент для фильтрации в вашем шаблоне на выпадающий список:

```html
<select id="filter">
    <option value="">All</option>
    <option value="category1">Category 1</option>
    <option value="category2">Category 2</option>
</select>
```

И измените JavaScript обработчик, чтобы обрабатывать выбранное значение вместо тегов `<li>`:

```javascript
jQuery(function($) {
    $('#filter').change(function() {
        var category = $(this).val();

        $.ajax({
            url: ajaxurl,
            data: {
                action: 'filter_posts',
                category: category
            },
            success: function(response) {
                // Обновление контента на странице
            }
        });
    });
});
```

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