Cet article prend 5 minutes à lire et comporte 1226 mots.

La gestion des options du thème rebute plus d'un créateur. Comment simplifier cette phase, et optimiser votre thème ? C'est le sujet de ce tutoriel.

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.

Kirki

Kirki

The ulti­mate frame­work for theme deve­lo­pers using the WordPress Customizer

Aristeides Stathopoulos

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.

wp-content
_ plugins
_ themes
__ theme_directory
___ languages
___ css
___ js
___ includes
____ kirki

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 :

require_once get_template_directory() . '/inc/include-kirki.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 :

require_once get_template_directory() . '/functions_customizer.php';

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

Kirki::add_config(
  'theme_slug',
  array(
    'capability' => 'edit_theme_options',
    'option_type' => 'theme_mod'
  )
);

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 :

Kirki::add_field(
  'theme_slug',
  array(
    'settings' => 'text_field_name',
    'label' => __( 'My Text Field', 'translation_domain' ),
    'section' => 'my_section',
    'type' => 'text',
    'priority' => 10,
    'default' => 'some default value for text field'
  )
);

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 :

function my_custom_text_settings( $wp_customize ) {

    $wp_customize->add_setting( 'my_setting', array(
        'default'        => 'some default value for text field',
        'type'           => 'theme_mod',
        'capability'     => 'edit_theme_options',
    ) );

    // Add the controls
    $wp_customize->add_control( 'my_setting', array(
        'label'       => __( 'My Text Field', 'translation_domain' ),
        'section'     => 'my_section',
        'settings'    => 'my_setting',
        'type'        => 'text',
        'priority'    => 10
    ) );

}
add_action( 'customize_register', 'my_custom_text_settings' );

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() :

// une option
$value = get_theme_mod( 'text_field_name' );
// toutes les options
$value = get_theme_mods();

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.

Besoin d'aide ?

Découvrez mes forfaits installation

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *