woof_slideout
woof_slideout
Shortcode [woof_slideout] tworzy wysuwany panel filtra, który pojawia się z krawędzi ekranu. Jest to rozwiązanie oszczędzające miejsce, które utrzymuje filtr ukryty, dopóki użytkownik go nie potrzebuje — idealne dla urządzeń mobilnych, stron archiwów produktów lub dowolnego układu, gdzie przestrzeń ekranu jest ograniczona.
Panel wysuwany obsługuje zarówno wyzwalacze obrazkowe, jak i tekstowe, konfigurowalną animację, zachowanie specyficzne dla urządzeń mobilnych i przekazuje wszystkie nieznane atrybuty do wewnętrznego shortcode'u [woof].
Atrybuty
| Atrybut | Domyślny | Opis |
|---|---|---|
image | Domyślna ikona pluginu | URL do obrazu wyzwalającego. Ustaw na null, aby zamiast tego użyć przycisku tekstowego. |
image_h | 50 | Wysokość obrazu wyzwalającego w pikselach |
image_w | 50 | Szerokość obrazu wyzwalającego w pikselach |
action | click | Akcja wyzwalająca: click lub hover |
location | right | Pozycja wysuwania: left, right, top lub bottom |
speed | 100 | Prędkość animacji w milisekundach |
offset | 100px | Odsunięcie od góry (dla pozycji lewej/prawej) lub od lewej (dla pozycji górnej/dolnej). Obsługuje px, %, em itp. |
onloadslideout | true | Czy panel powinien być otwarty po załadowaniu strony (true lub false) |
mobile_behavior | 0 | Kontrola widoczności: 0 = pokaż na wszystkich urządzeniach, 1 = pokaż tylko na urządzeniach mobilnych, 2 = pokaż tylko na komputerach stacjonarnych |
width | auto | Szerokość panelu (np. 350px, 30%, auto) |
height | auto | Wysokość panelu (np. 500px, auto) |
text | Filter | Tekst przycisku wyświetlany, gdy image jest ustawione na null. Używany również jako etykieta uchwytu. |
class | '' | Dodatkowa klasa CSS dla kontenera wysuwanego panelu |
redirect | '' | URL przekierowania po zastosowaniu filtra |
Podstawowe użycie
[woof_slideout]
Renderuje wysuwany panel filtra z prawej strony z domyślnymi ustawieniami. Panel zawiera standardowy filtr [woof].
Wysuwanie z lewej strony
[woof_slideout location="left" speed="300" width="400px"]
Wysuwa się z lewej strony z animacją trwającą 300ms i szerokością panelu 400px.
Przycisk tekstowy zamiast obrazu
[woof_slideout image="null" text="Filter Products"]
Używa przycisku tekstowego („Filter Products”) zamiast obrazu jako uchwytu wyzwalającego.
Filtr tylko dla urządzeń mobilnych
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
Wysuwany panel pojawia się tylko na urządzeniach mobilnych, od dołu, zajmując 80% wysokości ekranu. Idealny do projektów mobile-first.
Automatyczne otwieranie po załadowaniu z wyzwalaczem najechania myszką
[woof_slideout onloadslideout="true" action="hover" speed="200"]
Panel jest domyślnie otwarty i reaguje na najechanie myszką (nie na kliknięcie). Animuje się w 200ms.
Zaawansowane: Niestandardowa zawartość wewnątrz
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
Dowolna zawartość umieszczona między tagami otwierającym i zamykającym jest używana jako zawartość wysuwanego panelu. W tym przykładzie, specyficzny shortcode [woof] z filtrowaniem taksonomii kategorii jest umieszczony wewnątrz wysuwanego panelu.
Przekazywanie atrybutów do wewnętrznego shortcode'u [woof]
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Atrybuty, które nie są częścią samego wysuwanego panelu (taxonomies, sid, by_text itp.), są automatycznie przekazywane do wewnętrznego shortcode'u [woof]. Oznacza to, że każdy atrybut [woof] działa transparentnie.
Tylko dla komputerów stacjonarnych z przesunięciem
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Widoczny tylko na komputerach stacjonarnych, umieszczony po prawej stronie z przesunięciem 200px od góry, o szerokości 320px.
Przykład PHP: Nadpisanie szablonu wysuwanego panelu
Możesz nadpisać szablon wysuwanego panelu, umieszczając plik w:
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
Lub programowo filtrować zachowanie wysuwanego panelu:
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
Uwagi
- Rozszerzenie slideout musi być włączone w ustawieniach pluginu HUSKY, aby shortcode działał.
- Przy użyciu obrazu jako wyzwalacza, zalecany rozmiar to około 50×50 pikseli.
- Atrybut
redirect, po ustawieniu, przekieruje stronę na określony URL po wybraniu wartości filtra. - Obsługiwane są wielokrotne instancje slideout na tej samej stronie — każda otrzymuje unikalny klucz.