Share
Bienvenue dans la deuxième partie de la série "Boîte à outils du développeur intelligent WordPress"! Dans cette partie, nous allons passer en revue Kirki, un formidable toolkit Customizer pour les développeurs de thèmes WordPress..
Commençons!
WordPress version 3.4 introduit une nouvelle API appelée API de personnalisation de thème et l'écran "Theme Customizer". (Dans la version 4.1, le mot "Thème" a été supprimé car il ne s'agit pas exclusivement d'un "personnaliseur de thème".) Il nous permet d'ajouter des options de personnalisation dans le menu déroulant. Apparence> Personnaliser menu, avec la possibilité de modifier les paramètres du thème simultanément tout en prévisualisant le site Web.
Au début, cela ne créait pas beaucoup de battage publicitaire, mais la communauté l’a adopté au fil du temps, et nous avons été de plus en plus enthousiasmés par cette API pratique. Deux ans après sa publication, l’API Customizer est devenue un formidable utilitaire qui nous permet même de publier des messages et de personnaliser l’écran de connexion..
Il n'est pas exagéré de dire que Customizer est l'une des API les plus précieuses de WordPress en raison de sa capacité à changer complètement l'expérience des utilisateurs..
Si vous voulez en savoir plus sur ce sujet, consultez notre série sur le Customizer, écrite par Lee Pham.
Kirki est un excellent outil pour améliorer l'expérience des utilisateurs d'un thème. Il se concentre uniquement sur la personnalisation du thème et étend les commandes par défaut du Customizer avec des bascules, des entrées de plage et des images sous forme de boutons radio.
Une fois que vous aurez compris son fonctionnement, il sera plus facile que jamais de créer un écran de personnalisation de thème..
Un appel à l'action: Kirki est prêt à la traduction et a besoin de votre aide pour traduire ce projet open source dans différentes langues. Je vais m'occuper de la traduction en turc et ce serait formidable si vous pouviez aider à traduire Kirki dans votre langue. Si vous souhaitez contribuer, contactez Aristeides Stathopoulos, auteur de Kirki, pour plus de détails..
Regrouper votre thème avec Kirki est très facile, en fait. Il vous suffit de télécharger la dernière version de GitHub, d’extraire le contenu dans un dossier de votre thème et d’inclure le fichier de plugin principal (à l’aide de la include_once () fonction) dans votre thème functions.php fichier.
Voici un exemple:
Un morceau de gâteau, n'est-ce pas? En dessous, vous pouvez créer une configuration pour éviter les conflits avec d'autres thèmes ou plug-ins qui utilisent également Kirki:
'edit_theme_options', 'option_type' => 'option', 'nom_option' => 'mon_thème',)); ?>
Terminé!
Maintenant que nous avons appris à intégrer et à configurer Kirki dans nos thèmes, il est temps de voir quelques exemples sur la façon de créer notre page de personnalisation de thème..
Commençons par les bases. Voici le code d'une installation de base avec quelques panneaux et sections mais sans aucun champ de contrôle:
Accentsconagua
10, 'titre' => __ ('Mon titre', 'textdomain'), 'description' => __ ('Ma description', 'textdomain'),)); / ** * Ajout de sections * / Kirki :: add_section ('custom_css', array ('title' => __ ('CSS personnalisé'), 'description' => __ ('ajoutez un CSS personnalisé ici'), 'panneau' => ", // généralement pas nécessaire. 'Priority' => 160, 'possibilite' => 'edit_theme_options', 'theme_supports' =>", // rarement nécessaire.)); ?> Voyons maintenant les champs de contrôle fournis par Kirki..
Après avoir créé vos panneaux et sections, vous pouvez remplir les sections avec des "champs de contrôle". Voici le code pour ajouter un champ dans une section:
'text', 'setting' => 'text_demo', 'label' => __ ('Ceci est l'étiquette', 'kirki'), 'description' => __ ('Ceci est la description du contrôle', 'kirki' ), 'help' => __ ('Ceci est un texte d’aide supplémentaire.', 'kirki'), 'section' => 'ma_section', 'default' => __ ('Ceci est du texte par défaut', 'kirki '),' priorité '=> 10,)); ?> Comme je l'ai déjà dit, Kirki s'étend la liste des champs de contrôle par défaut avec les nouveaux. Afin d'écrire un didacticiel plus "complet", j'inclurai les champs de contrôle principaux ainsi que les champs de contrôle supplémentaires de Kirki..
texte vous permet d'ajouter une simple saisie de texte.zone de texte vous permet d'ajouter une zone de texte.éditeur vous permet d'ajouter un éditeur WYSIWYG.radio vous permet d'ajouter des boutons radio.case à cocher vous permet d'ajouter des cases à cocher.Couleur et couleur alpha (supporte la transparence) vous permet de sélectionner une couleur avec un bon sélecteur de couleurs.Contexte vous permet d'ajouter un personnalisateur d'arrière-plan CSS complet.palette vous permet d'ajouter une palette de couleurs.sélectionner vous permet d'ajouter un menu déroulant.select2 vous permet d'ajouter un "meilleur" menu de sélection, différent du menu par défaut select2-multiple vous permet d'ajouter un menu de sélection avec plusieurs choix. (Wild supposition: Cela pourrait être fusionné avec le select2 domaine dans le futur.)pages déroulantes vous permet d'ajouter un menu déroulant listant les pages de la base de données.télécharger vous permet d'ajouter l'uploader natif.image vous permet d'ajouter le sélecteur d'image natif / uploader.image radio vous permet d'ajouter des images faisant office de boutons radio.bouton radio vous permet d'ajouter un ensemble de boutons faisant office de boutons radio.nombre vous permet d'ajouter une entrée de numéro HTML5.curseur vous permet d'ajouter un curseur de plage HTML5.multicheck vous permet d'ajouter une liste avec plusieurs entrées de case à cocher.commutateur vous permet d'ajouter un bouton "commutateur" qui agit comme une case à cocher, mais plus jolie.basculer vous permet d'ajouter un bouton "bascule" qui agit également comme une case à cocher.triable vous permet d'ajouter une liste triable de contrôles de case à cocher.Douane vous permet d'ajouter un champ de contrôle personnalisé, qui est essentiellement tout fragment de code HTML valide.Kirki a quelques réglages assez cool pour vous permettre de faire une Customizer personnalisé pour votre thème. Vous pouvez afficher un logo au-dessus des champs de contrôle, définir un jeu de couleurs différent pour le personnalisateur, etc..
image logo: Spécifie l'URL de l'image du logo.la description: Spécifie un texte de description qui sera affiché en cliquant sur le logo.color_active: Spécifie la couleur "active" pour les éléments de menu, les boutons d’aide, etc..color_light: Spécifie la couleur "secondaire" pour les contrôles désactivés et inactifs.color_select: Spécifie la couleur "sélectionnée" pour, ainsi, les choses sélectionnées.color_accent: Spécifie la couleur "d'accent" utilisée sur les contrôles de curseur et la sélection d'image.color_back: Spécifie la couleur d'arrière-plan du personnaliseur.chemin_url: Spécifie le chemin d’URL de Kirki, utilisé pour charger les fichiers CSS dans son /les atouts/ dossier.stylesheet_id: L'identifiant de la feuille de style à définir comme descripteur dans les processus de mise en file d'attente CSS.Pour définir ces options de style, vous devrez utiliser le kirki / config filtre. Voici un exemple de configuration de Kirki:
Vous devez utiliser les valeurs de votre thème que Kirki stocke, n'est-ce pas? Voici comment:
Aussi simple que cela. Bien sûr, vous pouvez toujours utiliser le noyau get_option () et get_theme_mod () les fonctions.
Des outils comme celui-ci rendent WordPress encore plus convivial et facile à développer, vous ne pensez pas? Comme je l'ai dit dans l'introduction de la série, le pouvoir de WordPress provient de sa communauté, et des outils comme celui-ci sont la clé de la croissance de la communauté. Kirki offre plus que ce que j'ai écrit dans ce tutoriel, et Ari (l'auteur) promet qu'il continuera à développer Kirki car, selon ses mots, aussi longtemps qu'il faudra.
Que penses-tu de Kirki? Tirez vos pensées dans la section Commentaires ci-dessous. Et si vous avez aimé l'article, n'oubliez pas de le partager avec vos amis!
Rendez-vous dans la prochaine partie où nous couvrirons le plugin Theme Check.
