Как можно реализовать простой фильтр на WordPress?

Реализация простого фильтра на WordPress с использованием JavaScript может быть выполнена несколькими способами. Один из самых простых методов - это использование дополнительных классов CSS и jQuery.

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

<div class="filter-container">
  <a href="#" class="filter-option" data-filter="all">Все</a>
  <a href="#" class="filter-option" data-filter="category1">Категория 1</a>
  <a href="#" class="filter-option" data-filter="category2">Категория 2</a>
  <a href="#" class="filter-option" data-filter="category3">Категория 3</a>
</div>

2. Добавьте необходимые классы CSS и стилизуйте элементы фильтра по своему усмотрению. Например:

.filter-container {
  text-align: center;
  margin-bottom: 20px;
}

.filter-option {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #f1f1f1;
  color: #333;
  text-decoration: none;
}

3. Используя jQuery, добавьте обработчики событий к ссылкам фильтра, чтобы вызывать функцию фильтрации при щелчке. Определите функцию фильтрации, которая будет скрывать или отображать элементы в соответствии с выбранной категорией. Например:

jQuery(document).ready(function($) {
  // Обработчик событий клика на ссылках фильтра
  $('.filter-option').on('click', function(e) {
    e.preventDefault();
    
    // Получение выбранной категории фильтрации
    var filter = $(this).data('filter');
    
    // Показать все элементы, если выбрана опция "Все"
    if (filter === 'all') {
      $('.filtered-items').show();
    } else {
      // Скрыть все элементы
      $('.filtered-items').hide();
      
      // Отобразить только элементы с выбранной категорией
      $('.filtered-items[data-category="' + filter + '"]').show();
    }
  });
});

4. Разместите элементы, которые вы хотите фильтровать, в оболочку с классом .filtered-items и добавьте атрибут data-category для каждого элемента, указывающий на соответствующую категорию. Например:

<div class="filtered-items" data-category="category1">Элемент 1 с категорией 1</div>
<div class="filtered-items" data-category="category2">Элемент 2 с категорией 2</div>
<div class="filtered-items" data-category="category1">Элемент 3 с категорией 1</div>
<div class="filtered-items" data-category="category3">Элемент 4 с категорией 3</div>

Теперь, при клике на ссылки фильтра, скрипт будет скрывать или отображать элементы в зависимости от выбранной категории, и вы получите простой фильтр на вашем сайте WordPress. Вы можете настроить стили и функциональность фильтра по своему усмотрению, чтобы соответствовать оформлению вашего сайта.