Vue d'ensemble
- Espace de noms PHP :
Websource\Slider(classes danssrc/, chargeur PSR-4 maison). - Stockage : table
{prefix}wsx_sliders(une ligne par slider, contenu en JSON), optionswsx_slider_optionsetwsx_slider_db_version. - Domaine de traduction :
websource-slider. - Capacité requise pour l'administration et l'API :
manage_options(filtrewebsource_slider_capability). - Fichiers publics :
assets/css/front.css(handlewebsource-slider) etassets/js/front.js(handlewebsource-slider,defer), mis en file uniquement quand un slider est rendu ; le script seulement si le slider compte plusieurs diapositives.
Bloc Gutenberg
websource/slider — rendu serveur (block.json dans blocks/slider/, éditeur sans étape de build).
| Attribut | Type | Défaut | Rôle |
|---|---|---|---|
slider | string | "" | Identifiant (ou numéro) du slider à afficher. |
align | string | — | wide ou full (support natif). |
className | string | — | Classe CSS supplémentaire. |
<!-- wp:websource/slider {"slider":"accueil","align":"wide"} /-->
Le bloc ne rend rien si le slider est masqué, inconnu ou sans diapositive affichable.
Code court
[websource_slider]
| Attribut | Rôle |
|---|---|
slider | Identifiant du slider (par exemple accueil) ou son numéro. |
id | Alias numérique de slider. |
class | Classe CSS supplémentaire sur la balise <section>. |
[websource_slider slider="accueil"]
[websource_slider id="3" class="mon-slider"]
Fonctions publiques
// HTML d'un slider (identifiant ou numéro). Chaîne vide s'il est masqué ou inconnu.
echo websource_slider_render('accueil');
// Dans un thème : affiche les sliders affectés à une position
// (home, under_header, page_top, page_bottom, before_footer, footer).
websource_slider_position('under_header');
do_action('websource_slider_position', 'under_header') est équivalent à la seconde fonction et ne provoque pas d'erreur si l'extension est absente. Une position n'est affichée qu'une fois par page : un thème qui l'appelle à l'endroit exact prend le pas sur l'emplacement automatique.
Emplacements automatiques
| Position | Thème à blocs | Thème classique (repli) |
|---|---|---|
home, page_top | juste après l'ouverture du groupe <main> | woocommerce_before_main_content (pages boutique) ou loop_start de la requête principale ; à défaut de boucle (page 404), juste avant le pied de page |
under_header | après le modèle de zone header | idem page_top, priorité plus haute |
page_bottom | juste avant </main> | woocommerce_after_main_content ou loop_end |
before_footer | avant le modèle de zone footer | get_footer |
footer | avant </footer> dans le modèle de zone footer | wp_footer (priorité 5) |
custom | action WordPress saisie par le marchand | idem |
Pages reconnues : all, home, shop, category, product, brand (taxonomie product_brand), cms, blog, search, login, account, cart, checkout, notfound.
Hooks et filtres
Filtres
| Filtre | Paramètres | Rôle |
|---|---|---|
websource_slider_capability | string $capability | Capacité exigée (défaut manage_options). |
websource_slider_current_page | string $page | Type de page détecté pour les emplacements. |
websource_slider_position_hooks | array $hooks | Table position → [action => priorité] des thèmes classiques. |
websource_slider_image_size | string $size, int $attachment_id | Taille d'image servant de source (défaut full). |
websource_slider_view | array|null $view, array $content, string $identifier | Données passées au gabarit. |
websource_slider_template | string $path, array $view | Chemin du gabarit utilisé. |
websource_slider_html | string $html, array $view | HTML final du slider. |
websource_theme_export_sections | array $sections | Ajoute la section sliders à un export de thème. |
websource_theme_import_section | mixed $report, array $section, string $mode | Importe une section dont key vaut sliders ; renvoie le rapport. |
// Servir une taille intermédiaire plutôt que l'image d'origine.
add_filter('websource_slider_image_size', static function ($size, $attachment_id) {
return '2048x2048';
}, 10, 2);
// Brancher « sous l'en-tête » sur l'action d'un thème classique.
add_filter('websource_slider_position_hooks', static function (array $hooks) {
$hooks['under_header'] = ['mon_theme_after_header' => 10];
return $hooks;
});
Actions
| Action | Paramètres | Moment |
|---|---|---|
websource_slider_position | string $position | À déclencher par un thème pour afficher une position. |
websource_slider_saved | array $slider | Après l'enregistrement (publication) d'un slider. |
websource_slider_deleted | array $slider | Après la suppression d'un slider. |
Gabarit surchargeable
Copiez templates/slider.php vers <votre-thème>/websource-slider/slider.php. Le gabarit reçoit $view : identifier, name, classes[], style, effect, autoplay, delay (ms), loop, arrows, dots, pause_button, count, dom_id, slides[] (classes, style, duration, picture, title, subtitle, heading, buttons[], link, link_label, blank).
Routes REST
Espace de noms websource-slider/v1. Toutes les routes exigent un utilisateur connecté disposant de la capacité (permission_callback) et un nonce wp_rest (en-tête X-WP-Nonce).
| Méthode | Chemin | Paramètres | Réponse |
|---|---|---|---|
| GET | /sliders | — | { sliders: [résumé…] } |
| POST | /sliders | name (string), preset (starter | empty) | slider complet, 201 |
| GET | /sliders/{id} | — | slider complet |
| PUT | /sliders/{id} | content (objet) | slider complet (publie et efface le brouillon) |
| DELETE | /sliders/{id} | — | { deleted: true } |
| POST | /sliders/{id}/draft | content (objet) | { saved: true, time } |
| POST | /sliders/{id}/toggle | active (bool) | résumé |
| POST | /sliders/{id}/duplicate | — | résumé, 201 |
| POST | /preview | content (objet) | { html } |
| GET | /export | — | section sliders |
| POST | /import | package (objet), mode (merge | replace) | { report, sliders } |
| POST | /options | keep_data (bool) | options |
Exemple de requête :
curl -X POST 'https://exemple.fr/wp-json/websource-slider/v1/sliders/1/toggle' \
-H 'Content-Type: application/json' -H 'X-WP-Nonce: <nonce>' --cookie '<cookies de session>' \
-d '{"active":true}'
Exemple de réponse (résumé) :
{
"id": 1,
"identifier": "accueil",
"name": "Accueil",
"active": true,
"slides_count": 3,
"placements": ["Page d'accueil, dans le contenu"],
"has_draft": false,
"thumb": "https://exemple.fr/wp-content/uploads/2026/10/demo-lagon-300x113.jpg",
"shortcode": "[websource_slider slider=\"accueil\"]"
}
Un slider complet ajoute content, draft (ou null) et media ({ id: { thumb, name } }). Erreurs : wsx_slider_not_found (404), wsx_slider_import (400), rest_forbidden (401/403).
Structure de content
{
"name": "Accueil",
"settings": { "effect": "slide", "autoplay": true, "delay": 5, "loop": true, "arrows": true, "dots": true,
"pause_button": true, "height_mode": "ratio", "ratio": "16:6", "ratio_mobile": "4:3",
"height": 480, "height_mobile": 360, "heading": "h2" },
"design": { "inherit": true, "width": "box", "radius": "theme", "overlay_color": "#000000",
"overlay_opacity": 35, "text_color": "", "button_bg": "", "button_text": "" },
"placements": [ { "page": "home", "position": "home", "hook": "" } ],
"slides": [ { "active": true, "image": 83, "image_mobile": 86, "alt": "", "title": "", "subtitle": "",
"buttons": [ { "label": "Voir la boutique", "url": "page:shop", "style": "primary" } ],
"link": "", "new_tab": false, "v_pos": "center", "h_pos": "start", "align": "auto",
"focus": "center", "text_color": "", "overlay_color": "", "overlay_opacity": -1, "duration": 0 } ]
}
Tout contenu passe par Websource\Slider\Slider\Sanitizer : textes bruts, liens limités à http(s), mailto:, tel:, adresses relatives, ancres, post:ID et page:nom, images limitées aux fichiers image de la médiathèque, 12 diapositives, 2 boutons et 8 emplacements au plus.
Liens
| Forme | Résolution |
|---|---|
post:12 (alias cms:12) | get_permalink() du contenu 12, ou de sa traduction (Polylang / WPML). |
page:home, page:blog, page:privacy | accueil, page des articles, politique de confidentialité. |
page:shop, page:cart, page:checkout, page:account | pages WooCommerce. |
page:mon-slug | page WordPress portant ce slug. |
Un lien externe (autre domaine) s'ouvre dans un nouvel onglet avec rel="noopener noreferrer".
Export / import
Format : section sliders, version 1.
{ "key": "sliders", "version": 1, "label": "Sliders", "generator": "websource-slider/1.1.0 (wordpress)",
"data": { "sliders": [ { "identifier": "accueil", "name": "Accueil", "active": true, "content": { } } ] } }
À l'export, les images sont remplacées par leur adresse et les liens post:ID par une clé stable @type:slug (par exemple @page:livraison). À l'import, une image est réutilisée si elle est déjà dans la médiathèque (même adresse, même source ou même contenu), sinon téléchargée ; les métadonnées _wsx_slider_source_url et _wsx_slider_source_hash mémorisent sa provenance. Les paquets du module PrestaShop (textes et images par code ISO de langue, liens @cms:slug) sont acceptés : la langue du site est retenue, les emplacements sur un hook PrestaShop sont ignorés et signalés.
$package = Websource\Slider\Plugin::instance()->package();
$section = $package->export();
$report = $package->import($section, 'merge'); // create, update, delete, skip, messages[]
Traduction des contenus (Polylang, WPML)
Titre, sous-titre, texte alternatif, lien, libellés et liens des boutons sont déclarés comme chaînes (pll_register_string, groupe « Websource Slider » ; wpml_register_single_string, domaine websource-slider) sous le nom slider-<identifiant>-slide-<n>-<champ>. Les images suivent la traduction du média (pll_get_post, wpml_object_id).
Variables CSS
Le slider lit les variables du thème Websource, avec repli : var(--wst-x, var(--color-x, valeur)).
| Variable du thème | Repli | Usage |
|---|---|---|
--wst-brand → --color-brand-600 | #0f766e | boutons pleins, diapositive sans image, anneau de focus |
--wst-brand-on → --color-brand-on | #fff | texte des boutons pleins |
--wst-radius-2xl → --radius-2xl | 1.5rem | arrondi du slider |
--wst-radius-xl → --radius-xl | 999px | arrondi des boutons |
--wst-card-shadow | none | ombre du slider |
--wst-container | 1320px | largeur maximale en mode « Dans la page » |
--wst-surface-muted → --color-surface-muted | #e5e7eb | fond pendant le chargement |
--wst-font-head → --font-head | police héritée | titres |
Variables propres au slider, posées sur .wss (ou sur une diapositive) et surchargeables :
| Variable | Rôle |
|---|---|
--wss-accent | couleur d'accent du slider |
--wss-radius, --wss-shadow | arrondi et ombre |
--wss-text | couleur du texte |
--wss-ov | voile (rgba(…)) |
--wss-btn-bg, --wss-btn-text, --wss-btn-radius | boutons |
--wss-ratio, --wss-ratio-m | proportions ordinateur / téléphone |
--wss-h, --wss-hm | hauteurs fixes ordinateur / téléphone |
Classes utiles : .wss--slide / .wss--fade, .wss--box / .wss--wide, .wss--ratio / .wss--fixed, .wss--theme / .wss--own, .wss--multi, .wss--js (script actif), .wss__slide.is-active.
JavaScript
window.WebsourceSlider.init(conteneur) initialise les sliders ajoutés après le chargement (contenu injecté en AJAX). L'attribut data-wss-current de .wss porte l'index de la diapositive active.
Écarts par rapport au module PrestaShop
- Multiboutique : sans équivalent, ignoré.
- Images : médiathèque WordPress et
srcsetnatif, à la place de l'envoi maison et des déclinaisons AVIF / WebP générées par le module. - Textes par langue : une seule valeur par champ, traduite par Polylang / WPML.
- Hook libre
display*: remplacé par une action WordPress libre. - Reprise de
ps_imageslider: sans objet.