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.
Cet article prend 5 minutes à lire et comporte 1226 mots.
Créer un thème WordPress n’est pas compliqué en soi. Il existe d’excellents thèmes spécialement conçus pour cela, tels que underscores (_s).
Si vous créez pour vos propres besoins, vous allez probablement coder « en dur » chaque option du thème. Rapide, simple, performant.
Si par contre vous créez un thème pour le commercialiser — il va falloir passer par la gestion d’options. Et si vous souhaitez en proposer une version light dans le dépôt WordPress — qui vous donne une visibilité 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 personnalisation, aussi appelé Customizer.
En effet, depuis octobre 2015, pour être inclus dans le dépôt WordPress, les thèmes doivent être exclusivement gérés via cette interface.
In a nutshell: Themes are now required 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 (customizer) guideline
Cette normalisation a du bon pour l’utilisateur : tous les thèmes sont gérés depuis une interface unique, native, exit les pages de réglages spécifiques à chaque créateur.
Mais vous, vous allez avoir à programmer chacune de vos options — rassurez-vous, quelques unes sont nativement incluses dans WordPress.
Certaines boutiques, dont Themify ont déplacé toute l’interface de gestion dans l’outil de personnalisation, preuve que tout est possible, quand on le veut…
Si vous ne voulez pas vous plonger dans la documentation technique, il existe une alternative simple, présentée sous forme d’extension : Kirki, et la création d’options devient un jeu d’enfant.
Cerise sur le gâteau, Kirki propose des contrôles inédits, plus puissants que les contrôles natifs de l’outil de personnalisation.
En prime, je vous explique ensuite comment aller plus loin, en utilisant des feuilles de style LESS, en les compilant à la volée et en les mettant en cache, pour gagner à la fois en souplesse et en performances.
Mais en premier lieu, nous allons nous intéresser à…
L’extension Kirki
Comment fonctionne cette extension ? C’est tout simplement une surcouche au Customizer de WordPress, elle se charge de communiquer entre vos données et les fonctions WordPress, grâce aux 30 contrôles actuellement inclus dans Kirki.
Je vous le disais en introduction, certains contrôles sont plus avancés que la version proposée par le Customizer :
- la gestion des couleurs ne se limite pas au RVB à codage hexadécimal, il est aussi possible de jouer sur la transparence en utilisant le mode RGBA .
- il est possible de gérer du code CSS, javascript, HTML… dans une zone utilisant la coloration syntaxique et le formatage des données introduites.
- la gestion des polices de caractères présentes dans Google Fonts permet de choisir la police (avec les déclinaisons existantes), la taille des caractères, la hauteur de ligne, l’espacement entre les caractères, et pour finir la couleur.
WordPress recommande de passer par des filtres de nettoyage (sanitization) avant d’utiliser le contenu d’une variable saisie par l’utilisateur. Kirki gère la validation des données, chaque variable est vérifiée avant d’être utilisée ou enregistrée.
En prime, une option dans la configuration de l’extension permet de l’utiliser en « marque blanche », en utilisant son propre logo ou une image d’en-tête spécifique.
Installer et activer Kirki
L’extension peut être utilisée telle quelle, ou être directement intégrée dans le thème — c’est le choix de betheme par exemple (créateurs de BeAgency et BeOnePage).
La première méthode permet de mettre à jour l’extension indépendamment du thème, la deuxième est transparente 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 trouverez l’extension dans le dépôt WordPress ou en saisissant simplement « kirki » depuis Extensions > Ajouter dans la console d’administration de WordPress. Installez et activez — c’est terminé, l’extension est prête à être utilisé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 comprenant toutes les librairies externes par exemple.
wp-content _ plugins _ themes __ theme_directory ___ languages ___ css ___ js ___ includes ____ kirki
Maintenant que l’extension est opérationnelle, voyons comment…
Utiliser Kirki pour votre thème
Si vous utilisez Kirki en tant qu’extension, il faut tout d’abord récupérer les fichiers nécessaires pour lier l’extension à votre thème, sur Github.
Il faut ensuite indiquer à votre thème qu’il faut utiliser cette extension en rajoutant une ligne dans le fichier functions.php :
require_once get_template_directory() . '/inc/include-kirki.php';
L’extension va détecter par elle même si elle a été intégrée au thème ou si elle est utilisée en tant qu’extension, et adapter son comportement en fonction de cela.
Vous trouverez de plus amples informations concernant l’intégration de l’extension sur la page Integrating Kirki.
Initialiser les contrôles
Il est possible d’ajouter le code nécessaire à la personnalisation dans le fichier functions.php — mais pour garder un code facilement maintenable, je vous recommande de créer un fichier dédié, que vous nommerez functions_customizer.php par exemple, à appeler en ajoutant 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 initialiser Kirki :
Kirki::add_config(
'theme_slug',
array(
'capability' => 'edit_theme_options',
'option_type' => 'theme_mod'
)
);
Vous remarquerez que l’on utilise theme_mod : les options sont stockées dans un champ unique, on les récupè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 recommandée par WordPress, et on gagne en performances.
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éfinie, ainsi qu’une étiquette… en comparaison, voici le code correspondant, en utilisant les fonctions 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 simplifie considérablement la création des options de votre thème.
Il ne reste maintenant qu’à…
Récupérer l’option créée
Ce sont les fonctions WordPress qui sont mises à contribution, 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 officielle de l’extension, sur Github. Tout y est expliqué avec force détails, et vous trouverez des exemples pour chaque contrôle.