Как добавить фильтрацию постов и страниц в 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 и у вас будет отличный функционал, который придется по душе посетителям вашего сайта!

 

Recent Posts

Ошо

Уже поздно возвращаться назад, чтобы все правильно начать, но еще не поздно устремиться вперед, чтобы… Read More

23/05/2021

Шпаргалка по временным формам глагола в английском языке

В английском языке очень сложная система времен (временные формы глагола – Verb Tenses), которая относится… Read More

17/05/2021

Теория цвета – советы для вдохновения веб-дизайнерам

Вы когда-нибудь задумывались о том, как веб-дизайнеры подбирают идеальное сочетание цветов? Интересовались тем, какие цвета… Read More

30/04/2021

Как стать фрилансером – действенные советы

Фриланс – это возможность спокойно и размеренно работать дома, не обращая внимания на окружающее пространство,… Read More

27/04/2021

Самые красивые каньоны со всего мира (часть 1/2)

На протяжении многих сотен тысяч, или даже миллионов лет, быстрое течение рек подтачивало и вымывало… Read More

27/04/2021

Уильям Шекспир

Грехи других судить вы так усердно рветесь, начните со своих и до чужих не доберетесь… Read More

18/04/2021