À quoi ça sert
Websource Page Styles vous permet de retoucher l'apparence d'une page sans modifier le thème.
- Vous écrivez du CSS ou du SCSS (un CSS plus pratique) pour la fiche produit, le panier, l'accueil, une page précise ou tout le site.
- Le code est vérifié, allégé et mis en cache automatiquement.
- Chaque page ne reçoit que le style qui la concerne : le site reste rapide.
- Une erreur de saisie ne casse jamais le site : l'ancienne version reste en ligne.
Installation
- Ouvrez Extensions > Ajouter une extension.
- Cliquez sur Téléverser une extension et choisissez
websource-page-styles.zip. - Cliquez sur Installer maintenant, puis sur Activer.
- Ouvrez Apparence > Styles par page.
Prise en main en 5 minutes
- Ouvrez Apparence > Styles par page.
- Sur la ligne Fiche produit, cliquez sur Éditer le SCSS.
- Dans la liste Exemples, choisissez Bouton aux couleurs de la boutique. Le code s'ajoute dans l'éditeur.
- Cliquez sur Enregistrer et compiler.
- Ouvrez une fiche produit de votre site : le style est appliqué, sur cette page seulement.
Réglages
Liste des pages
| Réglage | Rôle |
|---|---|
| Page | Type de page : Toutes les pages, Accueil, Catégorie de produits, Fiche produit, Panier, Commande, pages du compte, Pages de contenu, Blog, Recherche, 404. |
| CSS du thème | Poids du fichier de style que le thème fournit pour cette page, s'il en fournit un. |
| SCSS compilé | Poids de votre style une fois allégé. |
| Total chargé | Poids total envoyé au visiteur pour cette page. |
| État | Compilé, Désactivé, Erreur ou Aucun SCSS. |
| Éditer le SCSS | Ouvre l'éditeur de cette page. |
| Recompiler | Refait le fichier de style de cette page. |
| Recompiler tous les SCSS | Refait tous les fichiers de style. |
| Styler une page précise | Choisissez une page de votre site, puis Écrire son SCSS. |
Éditeur SCSS
| Réglage | Rôle |
|---|---|
| Exemples | Insère un exemple prêt à adapter. |
| Code SCSS | Votre code. Le CSS classique est accepté tel quel. |
| Publier ce SCSS sur le site | Décochez pour garder le code sans l'afficher. |
| Enregistrer et compiler | Enregistre et met en ligne. |
| Retour à la liste | Revient à la liste sans enregistrer. |
| Supprimer | Efface le style de cette page. |
| Variables du thème disponibles | Raccourcis vers les couleurs et arrondis de votre thème, par exemple $brand ou $radius. |
Réglages
| Réglage | Rôle |
|---|---|
| Inliner le CSS critique | Place le style directement dans la page quand il pèse moins de 6 Ko. Cela évite un aller-retour avec le serveur. |
Cas d'usage
Mettre en valeur le bouton d'achat de la fiche produit
- Éditez le SCSS de Fiche produit.
- Collez :
scss .single_add_to_cart_button { border-radius: $radius; box-shadow: 0 6px 18px rgba($brand-hex, .25); } - Cliquez sur Enregistrer et compiler.
Styler une seule page
- Sous la liste, choisissez la page dans Styler une page précise.
- Cliquez sur Écrire son SCSS, saisissez votre code, puis Enregistrer et compiler.
Préparer un style sans le publier
- Dans l'éditeur, décochez Publier ce SCSS sur le site.
- Enregistrez. Le code est conservé ; rien n'est affiché aux visiteurs.
Questions fréquentes
Je ne connais pas le SCSS. Puis-je écrire du CSS ? Oui. Tout CSS valide est accepté.
Que se passe-t-il si je fais une erreur ? L'erreur s'affiche en rouge avec le numéro de ligne. Votre site garde la dernière version valide.
Mes couleurs suivent-elles Websource Theme Config ?
Oui. Les variables comme $brand suivent vos réglages en direct. Les variables terminées par -hex sont recalculées à la visite suivante.
L'extension fonctionne-t-elle avec un autre thème ? Oui. Les variables ont une valeur de secours.
Dépannage
| Problème | Solution |
|---|---|
| Mon style n'apparaît pas | Vérifiez que Publier ce SCSS sur le site est coché et que l'état est « Compilé ». Videz votre cache. |
| « Erreur » dans la colonne État | Ouvrez l'éditeur : le message indique la ligne à corriger. |
| « SCSS refusé » | Le code contient une balise ou un script. Seul du CSS / SCSS est accepté. |
| « Impossible d'écrire le CSS compilé » | Le dossier wp-content/uploads n'est pas accessible en écriture. Contactez votre hébergeur. |
Désinstallation
- Ouvrez Extensions > Extensions installées.
- Cliquez sur Désactiver sous Websource Page Styles. Vos styles sont conservés mais ne sont plus affichés.
- Cliquez sur Supprimer pour effacer vos styles et les fichiers créés.