Впровадження анімованого фільтрування публікацій за категоріями

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

У цьому підручнику ми створимо список усіх дописів (бажано в межах спеціального типу дописів, як-от співробітників), красиво розбитих у стовпці та з відповідними зображеннями. Над публікаціями ми створюємо фільтри для підключеної таксономії. Після натискання фільтра дописи будуть перемішуватися з гарною анімацією та приховувати дописи, яких немає у вибраній категорії.

Для цього ми використовуємо бібліотеку Javascript для фільтрації. Є багато доступних – для деяких потрібен jQuery, а для інших – ні – деякі з відкритим кодом, а для інших потрібна комерційна ліцензія. Найпопулярнішими є MixItUp і Isotope. Однак обидва вони потребують комерційної ліцензії. Для мого проекту мені потрібна була бібліотека, яка б виконувала ці завдання, і водночас була абсолютно безкоштовною для використання в комерційних проектах. Я спробував кілька, і найкращий, який я знайшов, це FilterizR. Давайте почнемо цей підручник із отримання цієї бібліотеки!

Бібліотека FilterizR

Перегляньте демонстрацію на домашній сторінці FilterizR, щоб дізнатися, чи ця бібліотека для вас. Ви навіть можете грати з параметрами в реальному часі. Ця бібліотека підтримує фільтрацію (це те, що ми будемо робити в цьому підручнику), перемішування (випадковий порядок), пошук і сортування. Він адаптивний і оптимізований для мобільних пристроїв. З того, що я відчував, він також дуже добре справляється з налаштуванням автоматичної висоти контейнера для кожного елемента.

FilterizR пропонує три різні типи використання:

• Vanilla Javascript: надає FilterizR як глобальну функцію для виклику в стандартному Javascript.
• jQuery: дозволяє використовувати jQueryдля ініціалізації та налаштування.
• Чиста бібліотека Javascript/npm: для використання в імпорті ES6 (наприклад, якщо ви пишете власні блоки для Gutenberg).

Другий варіант найпростіший для людей, які не знайомі з Javascript. Більшість людей починають з jQuery. Але пам’ятайте, що jQuery — це велика та важка бібліотека для завантаження у ваш проект, і якщо цього можна уникнути, то варто. У цьому підручнику ми будемо використовувати метод vanilla Javascript. Якщо ви реалізуєте це в спеціальному блоці Gutenberg, вам слід розглянути можливість використання третього варіанту. Тоді ви можете просто встановити його за допомогою 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);
});

Налаштуйте імена файлів та/або шляхи відповідно до вашого проекту/теми. Наведений вище код ставить у чергу сценарій ванільного filterizR, а по-друге, filtering-main.jsсценарій, який має залежність від сценарію filterizR. Це гарантує, що сценарій ініціалізації завантажується після необхідної бібліотеки.

Візуалізація шаблону

Наступним кроком є ​​наявність місця, де ми хочемо відобразити цей список публікацій. Це повністю залежить від вас. Щоб зробити це простим, у цьому підручнику я використаю шаблон сторінки у своїй темі. Якщо ви реалізуєте це в блоці Gutenberg, ви можете відобразити це або за допомогою 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 за допомогою ванільного Javascript полягає в створенні нового екземпляра Filterizr, надаючи селектор контейнера як перший параметр і необов’язково об’єкт налаштувань як другий параметр. Ось приклад найпростішого:

Ініціалізація відбувається в рядку #4. Ми надаємо ім’я класу контейнеру, який обгортає наші повідомлення з крапкою попереду, що означає селектор класу. За допомогою наведеного вище коду FilterizR тепер повинен взяти на себе ваші публікації та розмістити їх у стовпцях. Оскільки ми використали відповідні атрибути даних, фільтри також мають працювати автоматично!

Налаштування параметрів FilterizR

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

Для того, щоб колонки працювали оптимально в адаптивних розмірах, я виявив, що налаштування layout« sameWidth» покращує роботу FilterizR із публікаціями, які мають різну висоту. Це призводить до стилю «масонства». У нашому прикладі ми відтворюємо додатковий вміст після зображення, і це може призвести до різної висоти (імена можуть бути довшими, змушуючи його розміщуватись у кількох рядках). Це може призвести до дивної поведінки.

За замовчуванням кожен елемент не має місця між собою. Якщо вам потрібен відстань між кожним елементом, ви можете встановити розмір проміжку в px для gutterPixels. У наведеному вище прикладі я використовував 10 пікселів як розмір проміжку. PS: розмір зазору також додається до упаковки. Це не завжди може бути те, що ви хочете. Щоб перевизначити це, я просто додав стиль padding: 0!importantдо .filter-container.

Ось скоригований код для ініціалізації FilterizR з моїми параметрами:

З деякими незначними стилями результат виглядає приблизно так:

Майте на увазі, що фільтрація – це лише одна річ, яку може робити FilterizR! Перегляньте приклади в розділі «Посібники» на їх домашній сторінці. Ви можете додати елементи керування для сортування, перемішування та/або пошуку. Крім того, у вас є більше можливостей для керування макетом.