Реализация анимированной фильтрации постов по категориям

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

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

Для этого мы используем библиотеку Javascript для фильтрации. Их много — некоторые требуют jQuery, а некоторые нет — некоторые с открытым исходным кодом, а некоторые требуют коммерческой лицензии. Самые популярные из них — MixItUp и Isotope. Однако оба они требуют коммерческой лицензии. Для моего проекта мне нужна была библиотека, которая делает свое дело и при этом полностью бесплатна для использования в коммерческих проектах. Я пробовал несколько, и лучший из них, который я нашел, — это FilterizR. Давайте начнем этот урок с этой библиотеки!

Библиотека FilterizR

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

FilterizR предлагает три различных типа использования:

• Ванильный Javascript: предоставляет FilterizR как глобальную функцию для вызова в стандартном Javascript.
• jQuery: позволяет использовать jQueryдля инициализации и настройки.
• Чистая библиотека Javascript/npm: для использования в импорте ES6 (например, если вы пишете пользовательские блоки для Гутенберга).

Второй вариант самый простой для людей, незнакомых с Javascript. Большинство людей начинают с jQuery. Но имейте в виду, что jQuery — это большая и тяжелая библиотека для загрузки в ваш проект, и если ее можно избежать, вам следует. В этом уроке мы будем использовать ванильный метод Javascript. Если вы реализуете это в пользовательском блоке Гутенберга, вам следует рассмотреть возможность использования третьего варианта. Затем вы можете просто установить его через npmи импортировать библиотеку в свой блочный код.

Загрузка и настройка файлов

Давайте получим нужный файл! Перейдите на Github FilterizR для загрузки. Если вы не устанавливаете через npm (третий вариант), вы можете зайти в папку ‘ dist‘ и скачать нужную минимизированную библиотеку. Поскольку я буду использовать его с ванильным Javascript в этом уроке, я загружу vanilla.filterizr.min.jsфайл и положу его в свою theme-folder/assets/js/папку. Место, где вы разместите библиотеку, конечно же, полностью зависит от вас, просто отрегулируйте путь ниже.

Нам также понадобится еще один файл Javascript для инициализации и определения параметров. Я создам файл theme-folder/assets/js/filtering-main.js. Мы вернемся к этому файлу позже. Это, конечно, не обязательно, если вы реализуете это в пользовательском блоке Гутенберга.

Чтобы WordPress включал скрипты, нам нужно поставить оба скрипта в wp_enqueue_scriptsхук. Это можно добавить где-нибудь в файле вашей темы functions.php. Вот так:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('filterizr', get_template_directory_uri(). '/assets/js/vanilla.filterizr.min.js', [], false, true);
    wp_enqueue_script('filtering-script', get_template_directory_uri(). '/assets/js/filtering-main.js', ['filterizr'], false, true);
});

Настройте имена файлов и/или пути в соответствии с вашим проектом/темой. Приведенный выше код ставит в очередь сценарий vanilla filterizR, а во-вторых, filtering-main.jsсценарий, который зависит от сценария filterizR. Это гарантирует, что скрипт инициализации загружается после необходимой библиотеки.

Отрисовка шаблона

Следующим шагом будет место, где мы хотим отображать этот список сообщений. Это полностью зависит от вас. Для простоты в этом уроке я буду использовать шаблон страницы в своей теме. Если вы реализуете это в блоке Гутенберга, вы можете отображать его либо с помощью PHP (для динамических блоков), либо с помощью Javascript в saveметоде блока. Важной частью является правильное отображение HTML, окружающего посты и фильтры.

Рендеринг фильтров

Я создам шаблон страницы template-filters.phpв папке моей темы и добавлю свой PHP-код для вывода туда вывода.

В этом уроке мы предполагаем, что хотим отображать сообщения в пользовательском типе сообщений. Вы можете сделать это со стандартными сообщениями и категориями, но сообщений обычно становится довольно много, что невозможно использовать для такого вида отображения. Предположим, например, настраиваемый тип записи для сотрудников с подключенной пользовательской таксономией для отдела. Я не буду показывать, как добавить пользовательский тип записи в этом руководстве, просто имейте в виду, что имя типа записи employeesи имя пользовательской таксономии department. Переключите имена для вашего типа сообщения и таксономии. Если вы не знаете, как добавить пользовательский тип записи, у меня есть обучающая статья о том, как создавать пользовательские типы записей и таксономии.

В моем шаблоне я начинаю с создания фильтров. Я выберу все непустые термины в своей пользовательской таксономии с помощью [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()и добавлю их в неупорядоченный список.

Прежде чем генерировать элементы для каждого термина в таксономии, я обязательно создам один элемент для «Все» (строка #6). Чтобы фильтрация FilterizR работала, нам нужно предоставить атрибут данных «data-filter» для каждого элемента фильтра. Содержимое должно однозначно означают уникальное значение фильтрации, в нашем случае ярлык термина (вы можете использовать идентификатор термина или что-то еще, если хотите) Это означает, что мне нужно добавить ярлыки термина в качестве атрибутов данных к сообщениям (см. далее), поэтому FilterizR может знать, какие сообщения принадлежат какому фильтру.

С помощью приведенного выше кода вы должны получить список со словом «Все», за которым следуют все непустые термины. Большой!

Теперь, чуть ниже этого, я начну рендерить посты.

Отрисовка постов

При рендеринге постов нужно помнить две вещи. Один из них заключается в том, чтобы обернуть все сообщения внутри контейнера, которому я дам имя класса filter-container. Этот класс — то, на что нам нужно ориентироваться с помощью Javascript, чтобы заставить FilterizR работать. И, во-вторых, каждый элемент должен иметь атрибут данных «data-category», в котором перечислены все термины, разделенные запятой. Значения здесь должны соответствовать значениям, сгенерированным вами в data-filterатрибуте фильтров «».

Я запрашиваю все сообщения из пользовательского типа сообщений с помощью [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)и перебираю сообщения. То, что вы отображаете для каждого поста, полностью зависит от вас, но в приведенном ниже примере отображается избранное изображение, заголовок поста и одна настраиваемая мета-запись для названия должности. Все завернутые внутри ссылки, которые ведут к одному сотруднику.

Запрос в строке #2-7гарантирует, что я извлекаю все опубликованные сообщения сотрудников типа сообщения, упорядоченные по алфавиту. Перед рендерингом обертки divдля каждого сообщения в строке #13я использую [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()для получения всех терминов, назначенных этому сообщению. В качестве параметра я прошу только слаги терминов. Возврат представляет собой массив любых назначенных слагов терминов. Затем я использую функцию PHP [implode](https://www.php.net/manual/en/function.implode.php)()для создания строки из всех элементов массива, разделенных запятой. Это повторяется как обязательный data-categoryатрибут для корня div, что заставляет фильтры работать.

Что касается контента для каждого поста, вывод довольно стандартный. Мы генерируем избранное изображение поста, используя пользовательский размер изображения (‘ employees-thumb‘), заголовок поста и значение одного пользовательского метаданных поста (для названия должности). Все завернуто в ссылку, которая ведет к единому представлению для этого сотрудника. Я также добавил несколько классов и оберток, чтобы упростить нацеливание с помощью CSS. Вывод для каждого элемента, конечно, полностью зависит от вас.

На этом этапе рендеринг PHP должен быть завершен. Вы можете стилизовать и сделать так, чтобы это выглядело красиво, но не беспокойтесь о стилизации столбцов. FilterizR создаст для вас столбцы (flexbox). Следующий шаг — инициализация скрипта фильтрации!

Инициализация скрипта фильтра

Последняя часть — редактирование filtering-main.jsсценария. Нам просто нужно сказать FilterizR, чтобы он инициализировал фильтрацию нашего отображаемого контента. Однако здесь следует помнить о нескольких вещах:

FilterizR позаботится о том, чтобы размер контейнера-оболочки всех сообщений автоматически соответствовал размеру представления. Например, если активный фильтр отображает сообщения в одной строке, а мы нажимаем другой фильтр с четырьмя строками, контейнер автоматически масштабируется до нужной высоты. Таким образом, убедитесь, что любой контент, который идет после, не будет скрыт позади. Но для того, чтобы это автоматическое изменение размера работало, сначала должны быть загружены все изображения. В некоторых случаях сценарий может быть загружен и запущен до завершения загрузки каждого изображения, и это приводит к автоматическому сворачиванию контейнера до высоты 0. Это нехорошо. Поэтому нам нужно поместить код инициализации внутри функции, где мы знаем, что изображения загружаются. Для ванильного Javascript это window.onload. Для jQuery вы должны использовать $(window).load().

Во-вторых, мы хотим убедиться, что наш скрипт инициализирует FilterizR только в том случае, если действительно присутствует фильтруемый контейнер. Если мы инициализируем FilterizR, а текущая страница не имеет необходимого класса-оболочки, это приведет к ошибке Javascript. Мы можем решить эту проблему, сначала проверив, существует ли класс контейнера. В ванильном Javascript вы можете использовать document.getElementById()или document.getElementsByClassName(). См. пример ниже. Для jQuery вы должны использовать jQuery('<selector>').length, чтобы проверить это.

Способ инициализации FilterizR с помощью vanilla Javascript заключается в создании нового экземпляра Filterizr, предоставляющего селектор контейнера в качестве первого параметра и, возможно, объект настроек в качестве второго параметра. Это пример самого основного:

Инициализация происходит в строке #4. Мы предоставляем имя класса контейнеру, который оборачивает наши сообщения с точкой впереди, обозначающей селектор класса. С приведенным выше кодом FilterizR теперь должен взять на себя ваши сообщения и разместить их в столбцах. Поскольку мы использовали соответствующие атрибуты данных, фильтры также должны работать автоматически!

Настройка параметров FilterizR

У меня есть несколько последних советов по оптимизации FilterizR, которые мы можем сделать, предоставив объект настроек. Я рекомендую взглянуть на возможные варианты FilterizR, чтобы увидеть, что вы можете сделать. Вы можете контролировать скорость анимации, тип анимации и многое другое!

Чтобы столбцы оптимально работали в адаптивных размерах, я обнаружил, что настройка layout‘ sameWidth‘ заставляет FilterizR лучше работать с сообщениями разной высоты. В результате получается стиль «каменная кладка». В нашем примере мы отображаем дополнительный контент после изображения, и это может привести к разной высоте (имена могут быть длиннее, заставляя их располагаться в несколько строк). Это может привести к некоторому странному поведению.

По умолчанию каждый элемент не получает пробела между собой. Если вам нужен интервал между каждым элементом, вы можете установить размер промежутка в пикселях для gutterPixels. В приведенном выше примере я использовал 10 пикселей в качестве размера промежутка. PS: размер зазора также добавляется в контейнер для упаковки. Это не всегда может быть тем, что вы хотите. Чтобы переопределить это, я просто добавил стиль padding: 0!importantв .filter-container.

Вот скорректированный код для инициализации FilterizR с моими параметрами:

С небольшим стилем результат выглядит примерно так:

Имейте в виду, что фильтрация — это только одна вещь, которую может сделать FilterizR! Ознакомьтесь с примерами в разделе «Учебники» на их домашней странице. Вы можете добавить элементы управления для сортировки, перемешивания и/или поиска. И у вас есть больше возможностей для управления макетом.