Ce didacticiel vous montrera comment ajouter des paramètres de thème, par exemple des couleurs de thème, dans WordPress Customizer et recompiler la feuille de style de thème avec les variables choisies. En ayant un style de thème dans SCSS à l’aide d’une bibliothèque, vous pouvez facilement permettre aux utilisateurs de thème de personnaliser toutes les variables de la feuille de style de thème, sans qu’ils aient à modifier les fichiers SCSS eux-mêmes.
Tout bon thème devrait permettre une bonne dose de personnalisation. À tout le moins, il devrait être possible de définir les couleurs du thème principal. Au lieu d’écrire beaucoup de CSS laids pour remplacer les couleurs du thème partout, vous pouvez à la place recompiler la feuille de style complète directement à partir de Customizer. Ce tutoriel vous apprendra comment faire !
Ce que nous ferons – et ce dont nous avons besoin
Je suppose que votre thème a déjà un peu de style dans les fichiers SCSS que vous compilez déjà dans le fichier style.css. Et en utilisant SCSS, vous définissez très probablement des éléments récurrents tels que les couleurs, les tailles ou les points d’arrêt en tant que variables SCSS, et utilisez ces variables tout au long de votre style.
Vous pouvez créer autant de paramètres de personnalisation que vous le souhaitez pour les variables de votre fichier SCSS. Les sélecteurs de couleurs, les entrées de nombres et de texte sont parfaits pour cela. Pendant que l’utilisateur modifie les paramètres dans WordPress Customizer, il verra un aperçu du thème avec les variables modifiées. Et lorsqu’ils cliquent sur "Enregistrer", le CSS final sera compilé dans le fichier CSS de la feuille de style principale en utilisant les valeurs choisies.
À titre d’exemple pour ce didacticiel, je suppose que le fichier SCSS de la feuille de style principale du thème fait @importun variables.scssfichier. Nous y avons défini trois variables que nous voulons personnaliser dans Customizer : deux couleurs et une taille de texte dans px.
$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;Veuillez noter qu’afin de permettre au SCSS de redéfinir les variables, elles doivent être définies avec !default. C’est une règle dans SCSS. Pour que ce tutoriel fonctionne ; toutes les variables que vous souhaitez personnaliser doivent être définies par défaut dans vos fichiers SCSS.
C’est à vous de décider quand (ou si) vous voulez écraser le fichier CSS. Ce didacticiel suppose que lorsque l’utilisateur clique sur "Enregistrer" dans Customizer, il recompilera et écrira dans le CSS du thème. Cependant, lorsque l’aperçu de Customizer est actif et que l’utilisateur modifie les paramètres (avant de cliquer sur Enregistrer), nous publions simplement le CSS compilé dans l’en-tête de l’aperçu du site Web. Nous ne voulons pas écraser le fichier CSS immédiatement au cas où l’utilisateur souhaiterait annuler les modifications qu’il a apportées.
Gardez à l’esprit…
Ce didacticiel écrasera le style.cssfichier du thème à chaque fois que les paramètres de personnalisation seront enregistrés.
Je suppose que vous compilez déjà vos fichiers SCSS avec un programme compilateur (par exemple Koala ou ligne de commande). Avoir ce code dans votre thème écrasera le fichier CSS, mais cela ne changera pas vos fichiers SCSS source. Cela signifie que chaque fois que vous apportez des modifications dans Customizer, puis que vous revenez à vos fichiers SCSS d’origine et recompilez, vos paramètres de personnalisation seront perdus !
Il existe plusieurs méthodes pour contourner cela et cela dépend de votre projet et de votre façon de travailler. Dans la plupart des cas, ce ne serait pas un problème. C’est généralement juste une chose à garder à l’esprit pendant que vous développez votre thème. Si vous donnez votre thème finalisé à quelqu’un d’autre, il ne touchera normalement pas à vos fichiers SCSS de toute façon.
Cela dit, commençons par examiner comment nous procédons :
- Se familiariser avec la bibliothèque SCSSPHP et l’inclure dans notre thème
- Créer des paramètres de personnalisation pour chaque variable SCSS que nous voulons personnaliser
- Assurez-vous que le personnalisateur prévisualise les modifications lors de vos déplacements
- Lors de l’enregistrement des paramètres de personnalisation, nous recompilons et écrasons le fichier CSS du thème.
1 La bibliothèque SCSSPHP
Pour compiler les fichiers SCSS, nous utiliserons une bibliothèque SCSSPHP de leafo (licence MIT). Veuillez noter que ce didacticiel concerne la bibliothèque SCSS. L’auteur de la bibliothèque possède une bibliothèque PHP LESS similaire si vous préférez utiliser LESS, mais rappelez-vous que le didacticiel suivant concerne la bibliothèque SCSS.
La librairie SCSSPHP est vraiment simple à utiliser! Voici un aperçu simplifié de la façon dont nous utiliserons la bibliothèque dans le PHP de notre thème :
- Nous incluons la bibliothèque
- Créer une nouvelle instance de la classe du compilateur à partir de la bibliothèque
- Chargez le contenu du fichier SCSS source et transmettez-le à l’objet compilateur
- Définissez un tableau associatif ; Noms des variables SCSS (y compris le
$) en tant que clés et leurs valeurs. Tout élément de ce tableau remplacera les variables du même nom dans le fichier SCSS fourni. - Nous demandons à l’objet compilateur de compiler et de recevoir en retour le CSS compilé sous forme de chaîne. Nous pouvons alors soit afficher ce CSS à l’intérieur
head, soit l’écrire dans lestyle.cssfichier du thème
Quel type de variables SCSS pouvons-nous compiler ?
La réponse simple est : n’importe quel type de variable SCSS valide !
La bibliothèque SCSSPHP peut compiler n’importe quel type de variable SCSS valide, mais gardez à l’esprit que vous devez vous assurer qu’elles sont correctement formatées à partir de Customizer. Par exemple, les couleurs doivent être préfixées par un #pour les couleurs hexadécimales ou être formatées en tant que définitions rgb()ou. rgba()Une variable de taille devrait généralement être ajoutée avec ‘ px‘, ‘ em‘, ‘ %‘, etc.
Si vous envisagez de créer un système avancé pour compiler des variables SCSS via le thème Customizer, assurez-vous d’avoir un bon système en place pour formater correctement chaque type de variable !
Éliminons le premier pas; télécharger et inclure la bibliothèque dans notre thème :
Télécharger et inclure la bibliothèque SCSSPHP dans votre thème
La première étape consiste à télécharger la bibliothèque SCSSPHP. Dans la page liée, cliquez sur le bouton "Télécharger" tout en haut. Si vous souhaitez plutôt utiliser Composer, le site fournit un guide à ce sujet.
Extrayez le zip dans un sous-dossier quelque part dans votre thème. Par exemple, je le place dans le theme/inc/scssphp/dossier.
Ouvrez le fichier PHP où vous souhaitez ajouter votre code pour la compilation. Il peut être directement dans votre thème functions.phpou dans un fichier PHP inclus par functions.php. Par souci de simplicité, j’écris tout à l’intérieur functions.php.
Avant de pouvoir utiliser la bibliothèque, nous devons l’inclure ; ainsi:
require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');Ajustez le chemin d’accès à vos fichiers en conséquence. Nous devons inclure le scss.inc.phpfichier trouvé dans le dossier racine de la bibliothèque. Maintenant, après cette ligne, nous pouvons utiliser les classes de la bibliothèque !
2 Création des paramètres de personnalisation pour les variables SCSS
Créons les paramètres de WordPress Customizer pour nos variables. Pour les besoins du didacticiel, nous ajouterons des paramètres pour les variables SCSS mentionnées ci-dessus : deux sélecteurs de couleurs et une entrée numérique.
Je n’entrerai pas dans les détails pour expliquer comment ajouter des paramètres de personnalisation – il existe de nombreux didacticiels pour cela. Dans l’exemple de code ci-dessous, je crée une nouvelle section et y place les trois paramètres :
Ce code s’accroche customize_registeret ajoute une section appelée "Variables de thème". Il procède ensuite à l’ajout d’un sélecteur de couleurs ‘ theme-main‘, d’un autre sélecteur de couleurs ‘ theme-secondary‘ et d’une entrée numérique ‘ theme-text-size‘. Ce sont toutes les fonctionnalités WordPress par défaut. J’ajoute également définir la valeur par défaut de chaque paramètre sur les mêmes valeurs que celles définies dans le variables.scssfichier. C’est juste pour s’assurer que les paramètres de personnalisation démarrent avec les bonnes couleurs.
Ça a l’air super! Mais pour le moment, rien ne se passe lorsque vous ajustez ces variables. Continuons avec l’étape 3; aperçu de la gestion dans Customizer.
3 Compilez le CSS lors de vos déplacements dans l’aperçu de Customizer
Cette étape gère la mise à jour de l’aperçu du Customizer pendant que l’utilisateur modifie les paramètres et n’écrit dans aucun de nos fichiers. Au lieu de cela, nous afficherons le CSS compilé dans <head>l’aperçu à l’intérieur d’une <style>balise. De cette façon, nous nous assurons que le CSS en ligne remplace tous les styles du fichier CSS d’origine.
Afin de vérifier si nous utilisons actuellement ou non l’aperçu de Customizer, nous utilisons la fonction [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). Lorsque cela revient true, nous créons une fonction accrochée à wp_head. À l’intérieur de la fonction, nous initions et configurons la bibliothèque SCSSPHP, récupérons les valeurs de réglage actuelles, compilons le CSS et le sortons dans une <style>balise.
À la ligne, #7nous définissons le chemin d’accès au fichier SCSS source et chargeons son contenu dans une variable à #8. Et à la ligne #9et #10nous configurons le chemin d’importation de la bibliothèque pour nous assurer que tous les @imports fonctionnent correctement dans nos fichiers SCSS. Vous pouvez en savoir plus à ce sujet sur le site de documentation de la bibliothèque, sous la rubrique "Import Paths". Fondamentalement, la bibliothèque SCSSPHP doit connaître le chemin relatif de votre dossier SCSS afin que tous @importles chemins soient corrects.
À la ligne, #12-16nous créons le tableau pour le compilateur ; un tableau associatif avec les noms de variables comme clés. Pour les valeurs que nous utilisons [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)()pour obtenir les valeurs de Customizer. La fonction get_theme_mod()permet de définir un défaut comme deuxième paramètre si la valeur n’a pas été enregistrée. Cela nous évite de planter le compilateur avec des valeurs telles que null. Nous fournissons donc la même valeur par défaut que dans notre fichier de variables SCSS et lorsque nous avons enregistré les paramètres du Customizer.
Notez également que le code à la ligne #15ajoute un ‘ px‘, garantissant que la valeur réelle de la variable est valide. Sinon, il compilerait en tant que " $text-size: 12;" lorsque nous avons besoin de " $text-size: 12px;". Nous fournissons le tableau de variables au compilateur à la ligne #17, lui indiquant de compiler en utilisant ces variables.
Ensuite, à la ligne, #19-22nous appelons la compile()fonction qui doit renvoyer le CSS compilé sous forme de chaîne. Nous produisons une <style>balise avec la chaîne CSS à l’intérieur. Parce que nous sommes accrochés à wp_head, le Customizer affichera l’aperçu avec le CSS modifié à chaque fois qu’un changement est effectué.
4 Enregistrer le CSS compilé dans la feuille de style du thème
Le code de compilation du CSS est très similaire à l’étape précédente. La seule différence est que nous écrivons maintenant le CSS dans un fichier au lieu de le sortir. Vous devriez vraiment envisager de mettre cela dans une fonction afin de ne pas répéter le code, mais pour plus de clarté, j’ai choisi de séparer les deux.
Nous nous accrochons à [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/)ce qui se déclenche chaque fois que quelqu’un clique sur Enregistrer dans WordPress Customizer. À ce stade, nous récupérons le SCSS source, définissons les valeurs des variables et le compilons en CSS. Avec la chaîne CSS, nous utilisons une simple fonction PHP pour l’écrire dans le fichier CSS du thème.
La seule différence par rapport à avant est à la ligne #8où nous définissons le fichier cible dans lequel écrire et à la ligne #19où nous écrivons dans le fichier.
Conclusion
Nous avons maintenant des paramètres de personnalisation qui contrôlent les variables dans le fichier SCSS du thème et écrasent la feuille de style principale du thème à l’aide de ces variables. Il n’y a pas de limite au nombre ou au type de paramètres que vous souhaitez autoriser les utilisateurs du thème à personnaliser ! Investissez du temps dans la configuration d’un système approprié pour gérer le formatage des différents types de variables (par exemple, les préfixes ou les suffixes) et pour structurer correctement les paramètres du Customizer. Les utilisateurs du thème apprécieront la flexibilité et la facilité avec laquelle il est possible de personnaliser votre thème !
Vous pouvez également trouver différentes façons de gérer l’écriture de fichier du CSS final. Si vous ne voulez pas écraser la feuille de style principale, vous voudrez peut-être la sortir dans un fichier différent. Vous pouvez également envisager d’utiliser des conditions if-else dans SCSS.
Ce tutoriel a été écrit pour vous donner un tremplin sur la façon dont vous pouvez personnaliser votre thème WordPress à partir de Customizer. Faites-moi savoir si cela vous a été utile – ou si vous souhaitez un didacticiel plus avancé garantissant que la feuille de style du thème n’est pas écrasée!