Как сделать крутой фильтр записей на WordPress с использованием WP_Query, Ajax и template_redirect…

Сейчас я расскажу, как можно сделать крутой фильтр для сайта на WordPress с использованием самых современных технологий 🙂 Для нетерпеливых — демо прямо тут. Код выложен в виде плагина на GitHub. Внимание!!! Код только для ознакомления, хоть это и полноценный плагин, но на рабочем сайте его нельзя использовать без доработок. Демонстрационных данных он также не содержит.

1. Для целей демонстрации я сделал custom post type (CPT) и custom taxonomy (CT) для него. В принципе это необязательно, можно прицепить к любому типу записей, как и к любой таксономии. Хоть к товарам из WooCommerce.

2. Для этого CPT я сделал три мета-поля, значения которых можно редактировать в специально созданном мета боксе, прямо в окне редактирования этой записи. Можно использовать и стандартный функционал работы с мета полями или плагин Advanced Custom Fields — кому как больше нравится. Равно как и использовать стандартные мета-записи. Мне удобнее именно так.

3. Сделал отдельную функцию, использующую WP_Query для вывода списка записей. Стандартный вариант вывода в этом случае неудобен, так как использовать Ajax с ним не очень-то комфортно.

4. Сделал форму выбора параметров, изменения которых отслеживаются с помощью Jquery и передаются через Ajax в плагин. В результате после каждого изменения параметра пользователь видит новый список, отфильтрованный с учетом выбранных параметров.

5. Для вывода страницы используется хук template_redirect и фильтры pre_get_document_title, body_class. В принципе можно создать пустую страницу с нужным адресом в админке и подвесить к ней нужный шаблон, но так намного красивее, а я за красивые решения! 🙂

Этот фильтр я использовал в том или ином виде на ряде проектов, где нужно фильтровать данные по нескольким параметрам. Работает он достаточно быстро, по крайней мере, на проекте с 30 000+ записей и порядка 12-15 параметров фильтра обновление страницы занимало несколько секунд. Конечно, это все работало не на виртуальном хостинге 🙂

Где это применимо? Да практически где угодно. Например, на лендинге с несколькими товарами. Или в каталоге с несколькими десятками тысяч наименований чего угодно. Без проблем такой фильтр прикручивается к WooCommerce.

Есть и ещё один вариант фильтрации, когда под каждый тип товара создается отдельная страница. Такое решение очень удобно для SEO, но его не имеет смысла применять для того же WooCommerce — там это уже есть. А вот для каталога услуг или компаний, к примеру, подходит замечательно.

Обновлено 16.09.2016: исправил несколько багов в скриптах, спасибо Александру!

Добавить комментарий