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