Websource Theme pour WordPress — référence développeur

Vue d'ensemble

• Thème classique (gabarits PHP) avec theme.json pour l'éditeur de blocs.
• Espace de noms Websource\Theme, classes dans src/ (chargeur PSR-4 maison dans functions.php).
• Aucun bloc, aucun shortcode, aucune route REST, aucune table : le thème ne fait qu'afficher. Les éléments d'affichage (méga-menu, carrousel, réassurance…) sont fournis par les extensions Websource, qui se branchent sur les zones et les actions ci-dessous.
• Réglages enregistrés : theme_mods préfixés wsx_ uniquement.

Blocs et shortcodes

Le thème n'en déclare aucun. Il habille :

• les blocs du cœur (palette, tailles, boutons, citation, tableau : theme.json et assets/src/wp-blocks.css) ;
• les blocs Panier et Commande de WooCommerce (assets/src/wc-blocks.css) ;
• les shortcodes classiques [woocommerce_cart], [woocommerce_checkout], [woocommerce_my_account], [products].

Variables CSS

Mêmes noms que le thème PrestaShop (assets/src/tokens.css). Les valeurs par défaut sont compilées dans assets/css/theme.css ; seules les valeurs modifiées sont imprimées dans <style id="websource-theme-inline-css">.

Alias courts, définis sur :root et acceptés par le filtre :

Dans une extension, toujours prévoir un repli : color: var(--color-brand-600, #0f766e);.

Filtres

websource_theme_tokens

Point d'entrée de l'extension Websource Theme Config.

add_filter('websource_theme_tokens', function (array $tokens, array $defaults) {
    $tokens['--wst-brand'] = '#7c3aed';        // recalcule --color-brand-50 … 900, -on, -text
    $tokens['--radius-xl'] = '.5rem';
    $tokens['--wst-card-shadow'] = '0 6px 18px rgba(0,0,0,.12)';
    $tokens['--mon-extension-couleur'] = '#123456'; // toute variable --… est imprimée telle quelle
    return $tokens;
}, 10, 2);

Résultat dans la page :

<style id="websource-theme-inline-css">
:root{--color-brand-50:#f6f1fe;…;--color-brand-600:#7c3aed;…;--radius-xl:.5rem;--wst-card-shadow:0 6px 18px rgba(0,0,0,.12);--wst-brand:#7c3aed;--mon-extension-couleur:#123456;}
</style>

Les noms doivent commencer par -- ; une valeur contenant {, }, <, >, ; ou \ est ignorée.

websource_theme_settings

add_filter('websource_theme_settings', function (array $s) {
    $s['header_desktop'] = 'centered';   // classic | centered | compact
    $s['header_mobile']  = 'icons_right'; // icons_right | centered | stacked
    $s['mobile_nav']     = 'bottom';     // bottom | top
    $s['footer_style']   = 'dark';       // dark | light
    $s['product_layout'] = 'classic';    // classic | xl | showcase | minimal | sticky-buy | magazine
    $s['product_details'] = 'tabs';      // tabs | accordion | stacked
    $s['shop_sidebar']   = 'left';       // left | none
    $s['shop_columns']   = '3';          // 3 | 4
    return $s;
});

Clés supplémentaires : primary_color, footer_text, copyright. Une valeur inconnue revient au défaut.

Autres filtres

Actions et zones

Chaque zone exécute d'abord l'action websource_theme_area_<id> (tirets remplacés par des soulignés), puis affiche les widgets de la zone wsx-<id>. Une zone vide n'écrit aucun balisage.

Exemple : remplacer le menu principal par un méga-menu.

add_action('websource_theme_area_header_menu', function () {
    echo do_shortcode('[mon_mega_menu]');
});

Autres actions :

Emplacements de menus : primary, topbar, footer, legal.

Classes posées sur <body> : wsx, wsx-dh-{classic|centered|compact}, wsx-mh-{icons_right|centered|stacked}, wsx-mn-{bottom|top}, wsx-ft-{dark|light}, wsx-page-<type>.

Fonctions publiques

Toutes surchargeables dans un thème enfant (function_exists).

Routes REST

Le thème ne déclare aucune route. Le compteur du panier lit la route publique de WooCommerce :

GET /wp-json/wc/store/v1/cart

{ "items_count": 3, "items": [ … ], "totals": { … } }

assets/js/theme.js met à jour tous les éléments [data-wsx-cart-count] après les évènements added_to_cart, removed_from_cart, updated_cart_totals (scripts classiques) et wc-blocks_added_to_cart, wc-blocks_removed_from_cart (blocs). Les ajouts AJAX classiques passent aussi par le fragment span.wsx-cart-count.

En-tête SEO

Imprimé par Seo::head() et Seo::jsonLd() : meta description, meta robots (noindex,follow sur la recherche, le panier, la commande, le compte et les listes triées), canonical, hreflang + x-default (Polylang, WPML), rel=prev/next, Open Graph (product:price:* sur une fiche produit), twitter:card, JSON-LD Organization, WebSite (accueil), WebPage / CollectionPage / SearchResultsPage / ContactPage / AboutPage, BreadcrumbList, ItemList (listes de produits), BlogPosting. Le nœud Product reste celui de WooCommerce (@id = <permalien>#product), référencé par mainEntity.

Le thème n'imprime rien si l'une de ces constantes existe : WPSEO_VERSION, RANK_MATH_VERSION, SEOPRESS_VERSION, AIOSEO_VERSION, THE_SEO_FRAMEWORK_VERSION, SLIM_SEO_VER.

Gabarits WooCommerce surchargés

Tous les hooks d'origine sont conservés, dans le même ordre. Blocs de la fiche produit : .wsx-pb--flags, --gallery, --title, --price, --short-description, --buy, --reassurance, --meta, --details, --related.

Build CSS

npm install
npm run build      # assets/css/theme.css + assets/css/pages/<type>.css + assets/css/editor.css
npm run watch

• Sources : assets/src/ ; correspondance page → sources et gabarits : scripts/pages.config.mjs.
• Tailwind v4 ne scanne que les gabarits de la page ; tout ce qui est déjà dans theme.css est retiré des fichiers de page.
• Le CSS des composants est hors couche (@layer) pour primer sur le CSS du cœur, de WooCommerce et des extensions ; seuls la remise à zéro et les utilitaires Tailwind sont en couches.
• Ajouter un type de page : une entrée dans pages.config.mjs, puis renvoyer ce type avec websource_theme_page_type.