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