style.css<\/code>. Et en utilisant SCSS, vous d\u00e9finissez tr\u00e8s probablement des \u00e9l\u00e9ments r\u00e9currents tels que les couleurs, les tailles ou les points d’arr\u00eat en tant que variables SCSS, et utilisez ces variables tout au long de votre style.<\/p>\nVous pouvez cr\u00e9er autant de param\u00e8tres de personnalisation que vous le souhaitez pour les variables de votre fichier SCSS. Les s\u00e9lecteurs de couleurs, les entr\u00e9es de nombres et de texte sont parfaits pour cela. Pendant que l’utilisateur modifie les param\u00e8tres dans WordPress Customizer, il verra un aper\u00e7u du th\u00e8me avec les variables modifi\u00e9es. Et lorsqu’ils cliquent sur "Enregistrer", le CSS final sera compil\u00e9 dans le fichier CSS de la feuille de style principale en utilisant les valeurs choisies.<\/p>\n
\u00c0 titre d’exemple pour ce didacticiel, je suppose que le fichier SCSS de la feuille de style principale du th\u00e8me fait @import<\/code>un variables.scss<\/code>fichier. Nous y avons d\u00e9fini trois variables que nous voulons personnaliser dans Customizer\u00a0: deux couleurs et une taille de texte dans px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nVeuillez noter qu’afin de permettre au SCSS de red\u00e9finir les variables, elles doivent \u00eatre d\u00e9finies<\/strong> avec !default<\/code>. C’est une r\u00e8gle dans SCSS<\/a>. Pour que ce tutoriel fonctionne\u00a0; toutes les variables que vous souhaitez personnaliser doivent \u00eatre d\u00e9finies par d\u00e9faut dans vos fichiers SCSS.<\/p>\nC’est \u00e0 vous de d\u00e9cider quand (ou si) vous voulez \u00e9craser le fichier CSS. Ce didacticiel suppose que lorsque l’utilisateur clique sur "Enregistrer" dans Customizer, il recompilera et \u00e9crira dans le CSS du th\u00e8me. Cependant, lorsque l’aper\u00e7u de Customizer est actif et que l’utilisateur modifie les param\u00e8tres (avant de cliquer sur Enregistrer), nous publions simplement le CSS compil\u00e9 dans l’en-t\u00eate de l’aper\u00e7u du site Web. Nous ne voulons pas \u00e9craser le fichier CSS imm\u00e9diatement au cas o\u00f9 l’utilisateur souhaiterait annuler les modifications qu’il a apport\u00e9es.<\/p>\n
\u00a0 Gardez \u00e0 l’esprit\u2026<\/h3>\n
Ce didacticiel \u00e9crasera le style.css<\/code>fichier du th\u00e8me \u00e0 chaque fois que les param\u00e8tres de personnalisation seront enregistr\u00e9s.<\/p>\nJe suppose que vous compilez d\u00e9j\u00e0 vos fichiers SCSS avec un programme compilateur (par exemple Koala<\/a> ou ligne de commande). Avoir ce code dans votre th\u00e8me \u00e9crasera 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 \u00e0 vos fichiers SCSS d’origine et recompilez, vos param\u00e8tres de personnalisation seront perdus\u00a0!<\/p>\nIl existe plusieurs m\u00e9thodes pour contourner cela et cela d\u00e9pend de votre projet et de votre fa\u00e7on de travailler. Dans la plupart des cas, ce ne serait pas un probl\u00e8me. C’est g\u00e9n\u00e9ralement juste une chose \u00e0 garder \u00e0 l’esprit pendant que vous d\u00e9veloppez votre th\u00e8me. Si vous donnez votre th\u00e8me finalis\u00e9 \u00e0 quelqu’un d’autre, il ne touchera normalement pas \u00e0 vos fichiers SCSS de toute fa\u00e7on.<\/p>\n
Cela dit, commen\u00e7ons par examiner comment nous proc\u00e9dons\u00a0:<\/p>\n
\n- Se familiariser avec la biblioth\u00e8que SCSSPHP et l’inclure dans notre th\u00e8me<\/li>\n
- Cr\u00e9er des param\u00e8tres de personnalisation pour chaque variable SCSS que nous voulons personnaliser<\/li>\n
- Assurez-vous que le personnalisateur pr\u00e9visualise les modifications lors de vos d\u00e9placements<\/li>\n
- Lors de l’enregistrement des param\u00e8tres de personnalisation, nous recompilons et \u00e9crasons le fichier CSS du th\u00e8me.<\/li>\n<\/ol>\n
1 La biblioth\u00e8que SCSSPHP<\/h2>\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nPour compiler les fichiers SCSS, nous utiliserons une biblioth\u00e8que SCSSPHP de leafo<\/a> (licence MIT). Veuillez noter que ce didacticiel concerne la biblioth\u00e8que SCSS. L’auteur de la biblioth\u00e8que poss\u00e8de une biblioth\u00e8que PHP LESS<\/a> similaire si vous pr\u00e9f\u00e9rez utiliser LESS, mais rappelez-vous que le didacticiel suivant concerne la biblioth\u00e8que SCSS.<\/p>\nLa librairie SCSSPHP est vraiment simple \u00e0 utiliser! Voici un aper\u00e7u simplifi\u00e9 de la fa\u00e7on dont nous utiliserons la biblioth\u00e8que dans le PHP de notre th\u00e8me\u00a0:<\/p>\n
\n- Nous incluons la biblioth\u00e8que<\/li>\n
- Cr\u00e9er une nouvelle instance de la classe du compilateur \u00e0 partir de la biblioth\u00e8que<\/li>\n
- Chargez le contenu du fichier SCSS source et transmettez-le \u00e0 l’objet compilateur<\/li>\n
- D\u00e9finissez un tableau associatif\u00a0; Noms des variables SCSS (y compris le
$<\/code>) en tant que cl\u00e9s et leurs valeurs. Tout \u00e9l\u00e9ment de ce tableau remplacera les variables du m\u00eame nom dans le fichier SCSS fourni.<\/li>\n- Nous demandons \u00e0 l’objet compilateur de compiler et de recevoir en retour le CSS compil\u00e9 sous forme de cha\u00eene. Nous pouvons alors soit afficher ce CSS \u00e0 l’int\u00e9rieur
head<\/code>, soit l’\u00e9crire dans le style.css<\/code>fichier du th\u00e8me<\/li>\n<\/ul>\n\u00a0 Quel type de variables SCSS pouvons-nous compiler\u00a0?<\/h3>\n
La r\u00e9ponse simple est\u00a0: n’importe quel type de variable SCSS valide\u00a0!<\/p>\n
La biblioth\u00e8que SCSSPHP peut compiler n’importe quel type de variable SCSS valide, mais gardez \u00e0 l’esprit que vous devez vous assurer qu’elles sont correctement format\u00e9es \u00e0 partir de Customizer. Par exemple, les couleurs doivent \u00eatre pr\u00e9fix\u00e9es par un #<\/code>pour les couleurs hexad\u00e9cimales ou \u00eatre format\u00e9es en tant que d\u00e9finitions rgb()<\/code>ou. rgba()<\/code>Une variable de taille devrait g\u00e9n\u00e9ralement \u00eatre ajout\u00e9e avec ‘ px<\/code>‘, ‘ em<\/code>‘, ‘ %<\/code>‘, etc.<\/p>\nSi vous envisagez de cr\u00e9er un syst\u00e8me avanc\u00e9 pour compiler des variables SCSS via le th\u00e8me Customizer, assurez-vous d’avoir un bon syst\u00e8me en place pour formater correctement chaque type de variable !<\/p>\n
\u00c9liminons le premier pas; t\u00e9l\u00e9charger et inclure la biblioth\u00e8que dans notre th\u00e8me\u00a0:<\/p>\n
T\u00e9l\u00e9charger et inclure la biblioth\u00e8que SCSSPHP dans votre th\u00e8me<\/h3>\n
La premi\u00e8re \u00e9tape consiste \u00e0 t\u00e9l\u00e9charger la biblioth\u00e8que SCSSPHP<\/a>. Dans la page li\u00e9e, cliquez sur le bouton "T\u00e9l\u00e9charger" tout en haut. Si vous souhaitez plut\u00f4t utiliser Composer, le site fournit un guide \u00e0 ce sujet.<\/p>\nExtrayez le zip dans un sous-dossier quelque part dans votre th\u00e8me. Par exemple, je le place dans le theme\/inc\/scssphp\/<\/code>dossier.<\/p>\nOuvrez le fichier PHP o\u00f9 vous souhaitez ajouter votre code pour la compilation. Il peut \u00eatre directement dans votre th\u00e8me functions.php<\/code>ou dans un fichier PHP inclus par functions.php<\/code>. Par souci de simplicit\u00e9, j’\u00e9cris tout \u00e0 l’int\u00e9rieur functions.php<\/code>.<\/p>\nAvant de pouvoir utiliser la biblioth\u00e8que, nous devons l’inclure ; ainsi:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nAjustez le chemin d’acc\u00e8s \u00e0 vos fichiers en cons\u00e9quence. Nous devons inclure le scss.inc.php<\/code>fichier trouv\u00e9 dans le dossier racine de la biblioth\u00e8que. Maintenant, apr\u00e8s cette ligne, nous pouvons utiliser les classes de la biblioth\u00e8que\u00a0!<\/p>\n2 Cr\u00e9ation des param\u00e8tres de personnalisation pour les variables SCSS<\/h2>\n
Cr\u00e9ons les param\u00e8tres de WordPress Customizer pour nos variables. Pour les besoins du didacticiel, nous ajouterons des param\u00e8tres pour les variables SCSS mentionn\u00e9es ci-dessus\u00a0: deux s\u00e9lecteurs de couleurs et une entr\u00e9e num\u00e9rique.<\/p>\n
Je n’entrerai pas dans les d\u00e9tails pour expliquer comment ajouter des param\u00e8tres de personnalisation – il existe de nombreux didacticiels pour cela. Dans l’exemple de code ci-dessous, je cr\u00e9e une nouvelle section et y place les trois param\u00e8tres\u00a0:<\/p>\n
add_action('customize_register', function($wp_customize) {\n $wp_customize->add_section('theme-variables', [\n 'title' => __('Theme Variables', 'txtdomain'),\n 'priority' => 25\n ]);\n\u00a0\n $wp_customize->add_setting('theme-main', ['default' => '#594c74']);\n $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme-main', [\n 'section' => 'theme-variables',\n 'label' => __('Main theme color', 'txtdomain'),\n 'priority' => 10\n ]));\n\u00a0\n $wp_customize->add_setting('theme-secondary', ['default' => '#555']);\n $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme-secondary', [\n 'section' => 'theme-variables',\n 'label' => __('Secondary theme color', 'txtdomain'),\n 'priority' => 20\n ]));\n\u00a0\n $wp_customize->add_setting('theme-text-size', ['default' => '12']);\n $wp_customize->add_control('theme-text-size', [\n 'section' => 'theme-variables',\n 'label' => __('Text size', 'txtdomain'),\n 'type' => 'number',\n 'priority' => 30,\n 'input_attrs' => ['min' => 8, 'max' => 20, 'step' => 1]\n ]);\n});<\/code><\/pre>\nCe code s’accroche customize_register<\/code>et ajoute une section appel\u00e9e "Variables de th\u00e8me". Il proc\u00e8de ensuite \u00e0 l’ajout d’un s\u00e9lecteur de couleurs ‘ theme-main<\/code>‘, d’un autre s\u00e9lecteur de couleurs ‘ theme-secondary<\/code>‘ et d’une entr\u00e9e num\u00e9rique ‘ theme-text-size<\/code>‘. Ce sont toutes les fonctionnalit\u00e9s WordPress par d\u00e9faut. J’ajoute \u00e9galement d\u00e9finir la valeur par d\u00e9faut de chaque param\u00e8tre sur les m\u00eames valeurs que celles d\u00e9finies dans le variables.scss<\/code>fichier. C’est juste pour s’assurer que les param\u00e8tres de personnalisation d\u00e9marrent avec les bonnes couleurs.<\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\n\u00c7a a l’air super! Mais pour le moment, rien ne se passe lorsque vous ajustez ces variables. Continuons avec l’\u00e9tape 3; aper\u00e7u de la gestion dans Customizer.<\/p>\n
3 Compilez le CSS lors de vos d\u00e9placements dans l’aper\u00e7u de Customizer<\/h2>\n
Cette \u00e9tape g\u00e8re la mise \u00e0 jour de l’aper\u00e7u du Customizer pendant que l’utilisateur modifie les param\u00e8tres et n’\u00e9crit dans aucun de nos fichiers. Au lieu de cela, nous afficherons le CSS compil\u00e9 dans <head><\/code>l’aper\u00e7u \u00e0 l’int\u00e9rieur d’une <style><\/code>balise. De cette fa\u00e7on, nous nous assurons que le CSS en ligne remplace tous les styles du fichier CSS d’origine.<\/p>\nAfin de v\u00e9rifier si nous utilisons actuellement ou non l’aper\u00e7u de Customizer, nous utilisons la fonction [is_customize_preview](https:\/\/developer.wordpress.org\/reference\/functions\/is_customize_preview\/)()<\/code>. Lorsque cela revient true<\/code>, nous cr\u00e9ons une fonction accroch\u00e9e \u00e0 wp_head<\/code>. \u00c0 l’int\u00e9rieur de la fonction, nous initions et configurons la biblioth\u00e8que SCSSPHP, r\u00e9cup\u00e9rons les valeurs de r\u00e9glage actuelles, compilons le CSS et le sortons dans une <style><\/code>balise.<\/p>\nrequire_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');\n\u00a0\nif (is_customize_preview()) {\n add_action('wp_head', function() {\n $compiler = new ScssPhpScssPhpCompiler();\n\u00a0\n $source_scss = get_stylesheet_directory(). '\/assets\/scss\/style.scss';\n $scssContents = file_get_contents($source_scss);\n $import_path = get_stylesheet_directory(). '\/assets\/scss';\n $compiler->addImportPath($import_path);\n\u00a0\n $variables = [\n '$main' => get_theme_mod('theme-main', '#594c74'),\n '$secondary' => get_theme_mod('theme-secondary', '#555'),\n '$text-size' => get_theme_mod('theme-text-size', '12'). 'px',\n ];\n $compiler->setVariables($variables);\n\u00a0\n $css = $compiler->compile($scssContents);\n if (!empty($css) && is_string($css)) {\n echo '<style type=\"text\/css\">'. $css. '<\/style>';\n }\n });\n}<\/code><\/pre>\n\u00c0 la ligne, #7<\/code>nous d\u00e9finissons le chemin d’acc\u00e8s au fichier SCSS source et chargeons son contenu dans une variable \u00e0 #8<\/code>. Et \u00e0 la ligne #9<\/code>et #10<\/code>nous configurons le chemin d’importation de la biblioth\u00e8que pour nous assurer que tous les @import<\/code>s fonctionnent correctement dans nos fichiers SCSS. Vous pouvez en savoir plus \u00e0 ce sujet sur le site de documentation de la biblioth\u00e8que<\/a>, sous la rubrique "Import Paths". Fondamentalement, la biblioth\u00e8que SCSSPHP doit conna\u00eetre le chemin relatif de votre dossier SCSS afin que tous @import<\/code>les chemins soient corrects.<\/p>\n\u00c0 la ligne, #12-16<\/code>nous cr\u00e9ons le tableau pour le compilateur\u00a0; un tableau associatif avec les noms de variables comme cl\u00e9s. Pour les valeurs que nous utilisons [get_theme_mod](https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_mod\/)()<\/code>pour obtenir les valeurs de Customizer. La fonction get_theme_mod()<\/code>permet de d\u00e9finir un d\u00e9faut comme deuxi\u00e8me param\u00e8tre si la valeur n’a pas \u00e9t\u00e9 enregistr\u00e9e. Cela nous \u00e9vite de planter le compilateur avec des valeurs telles que null<\/code>. Nous fournissons donc la m\u00eame valeur par d\u00e9faut que dans notre fichier de variables SCSS et lorsque nous avons enregistr\u00e9 les param\u00e8tres du Customizer.<\/p>\nNotez \u00e9galement que le code \u00e0 la ligne #15<\/code>ajoute un ‘ px<\/code>‘, garantissant que la valeur r\u00e9elle de la variable est valide. Sinon, il compilerait en tant que " $text-size: 12;<\/code>" lorsque nous avons besoin de " $text-size: 12px;<\/code>". Nous fournissons le tableau de variables au compilateur \u00e0 la ligne #17<\/code>, lui indiquant de compiler en utilisant ces variables.<\/p>\nEnsuite, \u00e0 la ligne, #19-22<\/code>nous appelons la compile()<\/code>fonction qui doit renvoyer le CSS compil\u00e9 sous forme de cha\u00eene. Nous produisons une <style><\/code>balise avec la cha\u00eene CSS \u00e0 l’int\u00e9rieur. Parce que nous sommes accroch\u00e9s \u00e0 wp_head<\/code>, le Customizer affichera l’aper\u00e7u avec le CSS modifi\u00e9 \u00e0 chaque fois qu’un changement est effectu\u00e9.<\/p>\n4 Enregistrer le CSS compil\u00e9 dans la feuille de style du th\u00e8me<\/h2>\n
Le code de compilation du CSS est tr\u00e8s similaire \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente. La seule diff\u00e9rence est que nous \u00e9crivons maintenant le CSS dans un fichier au lieu de le sortir. Vous devriez vraiment<\/strong> envisager de mettre cela dans une fonction afin de ne pas r\u00e9p\u00e9ter le code, mais pour plus de clart\u00e9, j’ai choisi de s\u00e9parer les deux.<\/p>\nNous nous accrochons \u00e0 [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>ce qui se d\u00e9clenche chaque fois que quelqu’un clique sur Enregistrer dans WordPress Customizer. \u00c0 ce stade, nous r\u00e9cup\u00e9rons le SCSS source, d\u00e9finissons les valeurs des variables et le compilons en CSS. Avec la cha\u00eene CSS, nous utilisons une simple fonction PHP pour l’\u00e9crire dans le fichier CSS du th\u00e8me.<\/p>\nadd_action('customize_save_after', function() {\n $compiler = new ScssPhpScssPhpCompiler();\n\u00a0\n $source_scss = get_stylesheet_directory(). '\/assets\/scss\/style.scss';\n $scssContents = file_get_contents($source_scss);\n $import_path = get_stylesheet_directory(). '\/assets\/scss';\n $compiler->addImportPath($import_path);\n $target_css = get_stylesheet_directory(). '\/style.css';\n\u00a0\n $variables = [\n '$main' => get_theme_mod('theme-main', '#594c74'),\n '$secondary' => get_theme_mod('theme-secondary', '#555'),\n '$text-size' => get_theme_mod('theme-text-size', '12'). 'px',\n ]; \n $compiler->setVariables($variables);\n\u00a0\n $css = $compiler->compile($scssContents);\n if (!empty($css) && is_string($css)) {\n file_put_contents($target_css, $css);\n }\n});<\/code><\/pre>\nLa seule diff\u00e9rence par rapport \u00e0 avant est \u00e0 la ligne #8<\/code>o\u00f9 nous d\u00e9finissons le fichier cible dans lequel \u00e9crire et \u00e0 la ligne #19<\/code>o\u00f9 nous \u00e9crivons dans le fichier.<\/p>\n\u00a0 Conclusion<\/h2>\n
Nous avons maintenant des param\u00e8tres de personnalisation qui contr\u00f4lent les variables dans le fichier SCSS du th\u00e8me et \u00e9crasent la feuille de style principale du th\u00e8me \u00e0 l’aide de ces variables. Il n’y a pas de limite au nombre ou au type de param\u00e8tres que vous souhaitez autoriser les utilisateurs du th\u00e8me \u00e0 personnaliser\u00a0! Investissez du temps dans la configuration d’un syst\u00e8me appropri\u00e9 pour g\u00e9rer le formatage des diff\u00e9rents types de variables (par exemple, les pr\u00e9fixes ou les suffixes) et pour structurer correctement les param\u00e8tres du Customizer. Les utilisateurs du th\u00e8me appr\u00e9cieront la flexibilit\u00e9 et la facilit\u00e9 avec laquelle il est possible de personnaliser votre th\u00e8me !<\/p>\n
Vous pouvez \u00e9galement trouver diff\u00e9rentes fa\u00e7ons de g\u00e9rer l’\u00e9criture de fichier du CSS final. Si vous ne voulez pas \u00e9craser la feuille de style principale, vous voudrez peut-\u00eatre la sortir dans un fichier diff\u00e9rent. Vous pouvez \u00e9galement envisager d’utiliser des conditions if-else dans SCSS<\/a>.<\/p>\nCe tutoriel a \u00e9t\u00e9 \u00e9crit pour vous donner un tremplin sur la fa\u00e7on dont vous pouvez personnaliser votre th\u00e8me WordPress \u00e0 partir de Customizer. Faites-moi savoir si cela vous a \u00e9t\u00e9 utile – ou si vous souhaitez un didacticiel plus avanc\u00e9 garantissant que la feuille de style du th\u00e8me n’est pas \u00e9cras\u00e9e!<\/p>\n