Как добавить фильтрацию постов и страниц в WordPress

Если вы когда-либо покупали товары в интернет-магазинах, вы, скорее всего, уже оценили силу фильтров, которые позволяют фильтровать большой объем контента и находить то, что вам нужно. Все интернет-магазины имеют боковую панель с фильтрами, которые помогают искать нужное, возвращая только те результаты, которые отвечают вашим требованиям. К полезным фильтрам можно отнести рейтинг товара, бренд, состояние и многое другое.

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

 

 

Зачем нужна фильтрация постов и страниц WordPress?

WordPress невероятно гибкий. Платформа позволяет разработчикам контролировать практически все на своем сайте. Фильтрация постов и страниц – одна из самых мощных функций WordPress. Для этого существует несколько встроенных функций, которые позволяют фильтровать посты, страницы и даже пользовательский контент. Кроме того, существует множество способов выбора, группировки и фильтрации элементов, которые хранятся в базе данных. Вы можете создавать отсортированные списки результатов поиска по шаблону страницы, типам постов, таксономическим условиям, иерархии шаблонов, страницам товаров и др.

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

 

 

Как добавить фильтрацию контента без использования плагина

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

Для этого, во-первых, нужно создать простую форму:

 

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="post-date-filter">
<?php
if( $terms = get_terms( 'category', 'orderby=name' ) ) :
  echo '<select name="categoryfilter"><option>Выберите категорию...</option>';
  foreach ( $terms as $term ) :
    echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
  endforeach;
  echo '</select>';
endif;
?>
<label>
  <input type="radio" name="date" value="ASC" /> Дата: по возрастанию
</label>
<label>
  <input type="radio" name="date" value="DESC" selected="selected" /> Дата: по убыванию
</label>
<button>Применить фильтр</button>
<input type="hidden" name="action" value="customfilter">
</form>
<div id="filtering-results"></div>

 

В приведенной выше форме мы реализуем выбор таксономии с помощью функции get_terms.

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

Вы можете добавить этот код, например, в файл-шаблона для боковой панели на сайте sidebar.php.

 

На следующем шаге мы будем использовать небольшой код jQuery, который позволит видеть результаты фильтрации без перезагрузки страницы (т.е., в режиме AJAX):

 

jQuery(function($){
 $('#post-date-filter').submit(function(){
  var filter = $('#post-date-filter');
  $.ajax({
   url:filter.attr('action'),
   data:filter.serialize(), // данные формы
   type:filter.attr('method'), // POST
   beforeSend:function(xhr){ filter.find('button').text('Применяем фильтр...'); },
   success:function(data){ filter.find('button').text('Применить фильтр'); $('#filtering-results').html(data); }
  });
  return false;
 });
});

 

 

Вышеприведенный код вы также можете добавить в шаблон сайдбара, либо же добавить скрипт в отдельный файл скриптов темы.

После этого нужно добавить небольшую функцию в файл function.php активной темы, которая будет обрабатывать результат на основе выбранных фильтров. Она будет анализировать выбранную категорию, и пока в наличии есть посты, функция отобразит их по дате публикации (в порядке возрастания или убывания). Если в выбранной категории нет постов, посетителю покажется сообщение, что посты не найдены. Добавьте этот код в файл function.php активной темы:

 

function posts_filters(){
 $args = array(
  'orderby' => 'date',
  'order' => $_POST['date']
 );

 if( isset( $_POST['categoryfilter'] ) )
  $args['tax_query'] = array(
  array(
   'taxonomy' => 'category',
   'field' => 'id',
   'terms' => $_POST['categoryfilter']
  )
 );

 $query = new WP_Query( $args );

 if( $query->have_posts() ) :
  echo '<ul>';
  while( $query->have_posts() ): $query->the_post();
    echo '<li><a href="' . get_permalink( $query->post->ID ) . '">' . $query->post->post_title . '</a></li>';
  endwhile;
  echo '</ul>';
 wp_reset_postdata();
 else :
   echo 'Записей не найдено';
 endif;

 die();
}
add_action('wp_ajax_customfilter', 'posts_filters');
add_action('wp_ajax_nopriv_customfilter', 'posts_filters');

 

 

 

Вышеупомянутый метод – отличный способ разрешить пользователям фильтровать ваши посты. Но зачем вам это делать? WordPress уже позволяет организовывать ваши посты по категориям и тегам, но дает возможность пользователям просматривать только одну категорию (или тег) за раз. Более того, если вы используете пользовательские типы постов, которые используют свои собственные категории, эти категории не будут видны с теми, которые используются для обычных постов.

Рассмотренный сегодня функционал можно использовать для фильтрации не только постов и страниц, но и, например, товаров или услуг. Добавьте свои улучшения в код, придайте форме стилевого оформления с помощью CSS и у вас будет отличный функционал, который придется по душе посетителям вашего сайта!