woof_slideout
woof_slideout
Le shortcode [woof_slideout] crée un panneau de filtre coulissant qui apparaît depuis le bord de l'écran. C'est une solution peu encombrante qui maintient le filtre caché jusqu'à ce que l'utilisateur en ait besoin — idéal pour les appareils mobiles, les pages d'archives de produits, ou toute mise en page où l'espace d'écran est limité.
Le panneau coulissant prend en charge les déclencheurs d'image et de texte, une animation configurable, un comportement spécifique aux mobiles, et transmet tous les attributs inconnus au shortcode interne [woof].
Attributs
| Attribut | Par défaut | Description |
|---|---|---|
image | Icône par défaut du plugin | URL de l'image du déclencheur. Définissez sur null pour utiliser un bouton de texte à la place. |
image_h | 50 | Hauteur de l'image du déclencheur en pixels |
image_w | 50 | Largeur de l'image du déclencheur en pixels |
action | click | Action de déclenchement : click ou hover |
location | right | Position du panneau coulissant : left, right, top, ou bottom |
speed | 100 | Vitesse de l'animation en millisecondes |
offset | 100px | Décalage par rapport au haut (pour les positions gauche/droite) ou à gauche (pour les positions haut/bas). Prend en charge les px, %, em, etc. |
onloadslideout | true | Indique si le panneau doit être ouvert au chargement de la page (true ou false) |
mobile_behavior | 0 | Contrôle de la visibilité : 0 = afficher sur tous les appareils, 1 = afficher sur mobile uniquement, 2 = afficher sur ordinateur uniquement |
width | auto | Largeur du panneau (par exemple, 350px, 30%, auto) |
height | auto | Hauteur du panneau (par exemple, 500px, auto) |
text | Filter | Texte du bouton affiché lorsque image est défini sur null. Également utilisé comme libellé de la poignée. |
class | '' | Classe CSS additionnelle pour le conteneur coulissant |
redirect | '' | URL de redirection après l'application du filtre |
Utilisation de base
[woof_slideout]
Affiche un panneau de filtre coulissant depuis le côté droit avec les paramètres par défaut. Le panneau contient le filtre [woof] standard.
Panneau coulissant depuis la gauche
[woof_slideout location="left" speed="300" width="400px"]
Coulisse depuis le côté gauche avec une animation de 300 ms et une largeur de panneau de 400px.
Bouton de texte au lieu d'une image
[woof_slideout image="null" text="Filter Products"]
Utilise un bouton de texte ("Filter Products") au lieu d'une image comme poignée de déclenchement.
Filtre uniquement pour mobile
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
Le panneau coulissant apparaît uniquement sur les appareils mobiles, depuis le bas, occupant 80 % de la hauteur de l'écran. Parfait pour les conceptions "mobile-first".
Ouverture automatique au chargement avec déclencheur au survol
[woof_slideout onloadslideout="true" action="hover" speed="200"]
Le panneau est ouvert par défaut et réagit au survol (pas au clic). S'anime en 200 ms.
Avancé : Contenu personnalisé à l'intérieur
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
Tout contenu placé entre les balises d'ouverture et de fermeture est utilisé comme contenu du panneau coulissant. Dans cet exemple, un shortcode [woof] spécifique avec filtrage par taxonomie de catégorie est placé à l'intérieur du panneau coulissant.
Transmission des attributs au shortcode interne [woof]
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Les attributs qui ne font pas partie du panneau coulissant lui-même (taxonomies, sid, by_text, etc.) sont automatiquement transmis au shortcode interne [woof]. Cela signifie que tout attribut [woof] fonctionne de manière transparente.
Uniquement pour ordinateur avec décalage
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Visible uniquement sur ordinateur, positionné à droite avec un décalage de 200px par rapport au haut, d'une largeur de 320px.
Exemple PHP : Remplacer le modèle du panneau coulissant
Vous pouvez remplacer le modèle du panneau coulissant en plaçant un fichier à l'adresse :
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
Ou filtrer le comportement du panneau coulissant par programmation :
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
Notes
- L'extension de panneau coulissant doit être activée dans les réglages du plugin HUSKY pour que le shortcode fonctionne.
- Lorsque vous utilisez une image comme déclencheur, la taille recommandée est d'environ 50×50 pixels.
- L'attribut
redirect, lorsqu'il est défini, redirigera la page vers l'URL spécifiée après la sélection des valeurs de filtre. - Plusieurs instances de panneau coulissant sur la même page sont prises en charge — chacune obtient une clé unique.