woof_slideout
woof_slideout
Шорткод [woof_slideout] створює висувну панель фільтрів, яка з'являється з краю екрана. Це рішення для економії місця, яке приховує фільтр, доки користувач не потребує його — ідеально підходить для мобільних пристроїв, сторінок архіву товарів або будь-якого макета, де простір екрана обмежений.
Висувна панель підтримує як тригери зображень, так і текстові тригери, настроювану анімацію, поведінку, специфічну для мобільних пристроїв, і передає всі невідомі атрибути внутрішньому шорткоду [woof].
Атрибути
| Атрибут | За замовчуванням | Опис |
|---|---|---|
image | Іконка плагіна за замовчуванням | URL зображення-тригера. Встановіть значення null, щоб замість нього використовувати текстову кнопку. |
image_h | 50 | Висота зображення-тригера в пікселях |
image_w | 50 | Ширина зображення-тригера в пікселях |
action | click | Дія тригера: click або hover |
location | right | Позиція висунення: left, right, top або bottom |
speed | 100 | Швидкість анімації в мілісекундах |
offset | 100px | Зміщення від верхнього краю (для розташування ліворуч/праворуч) або лівого краю (для розташування зверху/знизу). Підтримує px, %, em тощо. |
onloadslideout | true | Чи повинна панель бути відкритою при завантаженні сторінки (true або false) |
mobile_behavior | 0 | Контроль видимості: 0 = показувати на всіх пристроях, 1 = показувати лише на мобільних, 2 = показувати лише на настільних |
width | auto | Ширина панелі (наприклад, 350px, 30%, auto) |
height | auto | Висота панелі (наприклад, 500px, auto) |
text | Filter | Текст кнопки, що відображається, коли image встановлено на null. Також використовується як мітка ручки. |
class | '' | Додатковий CSS клас для контейнера висувної панелі |
redirect | '' | URL перенаправлення після застосування фільтра |
Базове використання
[woof_slideout]
Відображає висувну панель фільтрів з правого боку з налаштуваннями за замовчуванням. Панель містить стандартний фільтр [woof].
Висунення зліва
[woof_slideout location="left" speed="300" width="400px"]
Висувається з лівого боку з анімацією 300 мс та шириною панелі 400px.
Текстова кнопка замість зображення
[woof_slideout image="null" text="Filter Products"]
Використовує текстову кнопку ("Filter Products") замість зображення як ручку тригера.
Фільтр лише для мобільних пристроїв
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
Висувна панель з'являється лише на мобільних пристроях, знизу, займаючи 80% висоти екрана. Ідеально підходить для дизайнів, орієнтованих на мобільні пристрої.
Автоматичне відкриття при завантаженні з тригером наведення
[woof_slideout onloadslideout="true" action="hover" speed="200"]
Панель відкрита за замовчуванням і реагує на наведення (а не на клік). Анімація триває 200 мс.
Розширено: Власний вміст всередині
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
Будь-який вміст, розміщений між відкриваючим і закриваючим тегами, використовується як вміст висувної панелі. У цьому прикладі, всередині висувної панелі розміщено специфічний шорткод [woof] з фільтрацією за таксономією категорій.
Передача атрибутів внутрішньому шорткоду [woof]
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Атрибути, які не є частиною самої висувної панелі (taxonomies, sid, by_text тощо), автоматично передаються внутрішньому шорткоду [woof]. Це означає, що будь-який атрибут [woof] працює прозоро.
Лише для настільних ПК зі зміщенням
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Видно лише на настільних ПК, розташовано праворуч зі зміщенням 200px від верхнього краю, шириною 320px.
Приклад PHP: Перевизначення шаблону висувної панелі
Ви можете перевизначити шаблон висувної панелі, розмістивши файл за адресою:
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
Або програмно відфільтрувати поведінку висувної панелі:
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
Примітки
- Розширення висувної панелі має бути увімкнено в налаштуваннях плагіна HUSKY, щоб шорткод працював.
- При використанні зображення як тригера, рекомендований розмір становить близько 50×50 пікселів.
- Атрибут
redirect, якщо встановлений, перенаправить сторінку на вказаний URL після вибору значень фільтра. - Підтримується кілька екземплярів висувної панелі на одній сторінці — кожен отримує унікальний ключ.