• Paru le 25 septembre 2016

Créez vos options de thème avec Kirki

2001 mots - 9mn

Créez vos options de thème avec Kirki

1024 598 Tout sur WordPress

La gestion des options du thème rebute plus d’un créa­teur. Comment simpli­fier cette phase, et opti­mi­ser votre thème ? C’est le sujet de ce tuto­riel.

Créer un thème WordPress n’est pas compli­qué en soi. Il existe d’excellents thèmes spécia­le­ment conçus pour cela, tels que unders­cores (_s).

Si vous créez pour vos propres besoins, vous allez proba­ble­ment coder « en dur » chaque option du thème. Rapide, simple, perfor­mant.

Si par contre vous créez un thème pour le commer­cia­li­ser – il va falloir passer par la gestion d’options. Et si vous souhai­tez en propo­ser une version light dans le dépôt WordPress – qui vous donne une visi­bi­lité accrue auprès de tous ceux qui cherchent un thème pour habiller leur site propulsé par WordPress, il faudra passer par l’outil de person­na­li­sa­tion, aussi appelé Customizer.

En effet, depuis octobre 2015, pour être inclus dans le dépôt WordPress, les thèmes doivent être exclu­si­ve­ment gérés via cette inter­face.

In a nutshell : Themes are now requi­red to utilize the Customizer API if the theme has custom theme settings. This means no custom settings screens.
– Justin Tadlock in Details on the new theme settings (custo­mi­zer) guide­line

Cette norma­li­sa­tion a du bon pour l’utilisateur : tous les thèmes sont gérés depuis une inter­face unique, native, exit les pages de réglages spéci­fiques à chaque créa­teur.

Mais vous, vous allez avoir à program­mer chacune de vos options – rassurez‐vous, quelques unes sont nati­ve­ment incluses dans WordPress.

Certaines boutiques, dont Themify ont déplacé toute l’interface de gestion dans l’outil de person­na­li­sa­tion, preuve que tout est possible, quand on le veut…

Si vous ne voulez pas vous plon­ger dans la docu­men­ta­tion tech­nique, il existe une alter­na­tive simple, présen­tée sous forme d’extension : Kirki, et la créa­tion d’options devient un jeu d’enfant.

Cerise sur le gâteau, Kirki propose des contrôles inédits, plus puis­sants que les contrôles natifs de l’outil de person­na­li­sa­tion.

En prime, je vous explique ensuite comment aller plus loin, en utili­sant des feuilles de style LESS, en les compi­lant à la volée et en les mettant en cache, pour gagner à la fois en souplesse et en perfor­mances.

Mais en premier lieu, nous allons nous inté­res­ser à…

L’extension Kirki

Comment fonc­tionne cette exten­sion ? C’est tout simple­ment une surcouche au Customizer de WordPress, elle se charge de commu­ni­quer entre vos données et les fonc­tions WordPress, grâce aux 26 contrôles actuel­le­ment  inclus dans Kirki.

Je vous le disais en intro­duc­tion, certains contrôles sont plus avan­cés que la version propo­sée par le Customizer :

  • la gestion des couleurs ne se limite pas au RVB à codage hexa­dé­ci­mal, il est aussi possible de jouer sur la trans­pa­rence en utili­sant le mode RGBA .
  • il est possible de gérer du code CSS, javas­cript, HTML… dans une zone utili­sant la colo­ra­tion syntaxique et le forma­tage des données intro­duites.
  • la gestion des polices de carac­tères présentes dans Google Fonts permet de choi­sir la police (avec les décli­nai­sons exis­tantes), la taille des carac­tères, la hauteur de ligne, l’espacement entre les carac­tères, et pour finir la couleur.

WordPress recom­mande de passer par des filtres de nettoyage (sani­ti­za­tion) avant d’utiliser le contenu d’une variable saisie par l’utilisateur. Kirki gère la vali­da­tion des données, chaque variable est véri­fiée avant d’être utili­sée ou enre­gis­trée.

En prime, une option dans la confi­gu­ra­tion de l’extension permet de l’utiliser en « marque blanche », en utili­sant son propre logo ou une image d’en-tête spéci­fique.

Installer et activer Kirki

L’extension peut être utili­sée telle quelle, ou être direc­te­ment inté­grée dans le thème – c’est le choix de betheme par exemple (créa­teurs de BeAgency et BeOnePage).

La première méthode permet de mettre à jour l’extension indé­pen­dam­ment du thème, la deuxième est trans­pa­rente pour l’utilisateur final, mais ce sera à vous de gérer la mise à jour en l’incluant dans la mise à jour du thème lui‐même.

En tant qu’extension

Vous trou­ve­rez l’extension dans le dépôt WordPress ou en saisis­sant simple­ment « kirki » depuis Extensions > Ajouter dans la console d’administration de WordPress. Installez et acti­vez – c’est terminé, l’extension est prête à être utili­sée.

En incluant Kirki directement dans le thème

Téléchargez l’extension dans le dépôt WordPress, copiez son contenu à l’intérieur du dossier de votre thème, dans un sous‐dossier compre­nant toutes les librai­ries externes par exemple.

Maintenant que l’extension est opéra­tion­nelle, voyons comment…

Utiliser Kirki pour votre thème

Si vous utili­sez Kirki en tant qu’extension, il faut tout d’abord récu­pé­rer les fichiers néces­saires pour lier l’extension à votre thème, sur Github.

Il faut ensuite indi­quer à votre thème qu’il faut utili­ser cette exten­sion en rajou­tant une ligne dans le fichier functions.php :

L’extension va détec­ter par elle même si elle a été inté­grée au thème ou si elle est utili­sée en tant qu’extension, et adap­ter son compor­te­ment en fonc­tion de cela.

Vous trou­ve­rez de plus amples infor­ma­tions concer­nant l’intégration de l’extension sur la page Integrating Kirki.

Initialiser les contrôles

Il est possible d’ajouter le code néces­saire à la person­na­li­sa­tion dans le fichier functions.php – mais pour garder un code faci­le­ment main­te­nable, je vous recom­mande de créer un fichier dédié, que vous nomme­rez functions_customizer.php  par exemple, à appe­ler en ajou­tant une deuxième ligne de code dans le fichier functions.php, juste en dessous de la ligne précé­dente :

Dans le fichier style.css, vous avez défini un slug pour votre thème ; nous allons l’utiliser pour initia­li­ser Kirki :

Vous remar­que­rez que l’on utilise theme_mod : les options sont stockées dans un champ unique, on les récu­père une à une avec get_theme_mod( 'option_name' ) ou toutes en une seule fois via get_theme_mods(), ce qui réduit le nombre de requêtes SQL. C’est la méthode recom­man­dée par WordPress, et on gagne en perfor­mances.

Nous allons à présent…

Créer une option

Nous allons créer un champ de texte :

L’option sera stockée sous le nom « text_field_name », elle est de type « text », une valeur par défaut est défi­nie, ainsi qu’une étiquette… en compa­rai­son, voici le code corres­pon­dant, en utili­sant les fonc­tions natives de WordPress :

 

Vous le voyez à travers ce simple exemple, Kirki simpli­fie consi­dé­ra­ble­ment la créa­tion des options de votre thème.

Il ne reste main­te­nant qu’à…

Récupérer l’option créée

Ce sont les fonc­tions WordPress qui sont mises à contri­bu­tion, get_theme_mod() :

Utiliser LESS et la compilation des feuilles de style

Plutôt que de récu­pé­rer les options du thème et de les inclure à chaque char­ge­ment de page dans la balise , il est possible de créer une feuille de style statique – d’où un gain de perfor­mances. La mise en place d’une telle solu­tion est rapide et n’est pas spécia­le­ment complexe.

Vous aurez besoin de less.inc.php, une classe permet­tant de compi­ler une feuille de style LESS via PHP. Vous trou­ve­rez cette classe dans Jetpack ou via une recherche sur Google.

En premier lieu, il va falloir…

Créer une feuille de style LESS

La seule diffé­rence avec une feuille de style CSS clas­sique, c’est la possi­bi­lité de placer des variables, d’utiliser des classes abstraites, des opéra­tions et des fonc­tions.

Prenons l’exemple de la couleur d’arrière-plan de la balise body. En CSS, vous décla­re­rez :

Avec LESS, vous rempla­ce­rez la couleur par une variable :

Et bien évidem­ment, il faut en prin­cipe décla­rer la valeur de cette variable pour pouvoir créer une feuille de style utili­sable :

Mais nous allons sauter cette étape, nous ne décla­re­rons pas nos variables dans la feuille de style LESS. Nous allons procé­der comme suit :

Création du fichier CSS

Nous allons en tout premier lieu récu­pé­rer l’ensemble des options du thème en utili­sant get_theme_mods().

Pour être certain qu’aucune option n’a été modi­fiée depuis la dernière utili­sa­tion, nous allons utili­ser un md5 « raw » à 16 carac­tères à partir de l’ensemble des options conca­té­nées. Si une option est modi­fiée, le md5 l’est aussi.

En nommant le fichier CSS d’après ce md5, vous pour­rez véri­fier si la feuille de style compi­lée existe – si elle existe, vous l’utilisez, sinon, vous la créez en utili­sant le compi­la­teur LESS.

Cette première étape peut souvent être la dernière, tant que les options du thème n’auront pas été modi­fiées. Sinon, nous passe­rons à l’étape suivante :

Compilation du fichier LESS

Nous avons récu­péré l’ensemble des variables, il suffit main­te­nant de les utili­ser pour décla­rer nos variables LESS à la volée…

puis de lancer la compi­la­tion :

Et voilà, la feuille de style est créée, il n’y a plus qu’à l’utiliser.  Et lorsque vous chan­ge­rez une option dans le thème, le md5 raw ne sera plus le même, une nouvelle feuille de style sera géné­rée avant d’être utili­sée. Il ne vous restera qu’à détruire la précé­dente, soit manuel­le­ment, soit en créant une fonc­tion PHP.

Aller plus loin

Pour tout savoir sur Kirki, il faudra vous rendre sur la page offi­cielle de l’extension, sur Github. Tout y est expli­qué avec force détails, et vous trou­ve­rez des exemples pour chaque contrôle.

Il existe aussi une exten­sion pour aider à la créa­tion des options, un visual buil­der pour Kirki – mais la version gratuite ne permet pas de créer tous les types d’options, et il n’y a à ce jour aucune infor­ma­tion quant à la version PRO. À suivre… [ Cette exten­sion n’est plus dispo­nible dans le dépôt offi­ciel WordPress, et la version Pro (décou­verte entre temps, mais au final déce­vante, n’est plus en ligne sur Themeforest. ]

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :