Options de personnalisateur WordPress Fast avec Kirki

Une chose à laquelle les utilisateurs de WordPress se sont habitués, sont faciles, aucune option de personnalisation de thème requise. L'idée est: télécharger un thème, l'activer dans le panneau Thèmes, accéder au panneau Personnaliser et commencer à peaufiner les couleurs, la disposition, les polices, etc. du thème, avec juste un clic de souris.

WordPress offre aux développeurs de thèmes l'API Customizer. Il s'agit d'un ensemble de méthodes propre et orienté objet qui facilitent la création d'une interface de personnalisation cohérente. Sur le panneau Personnaliser, les utilisateurs peuvent facilement apporter des modifications et les prévoir en direct sans avoir à jouer avec le code PHP ou CSS.

Développer des options de thème à l'aide de l'API Customizer, tout en étant un processus simple et logique, implique d'écrire une certaine quantité de code répétitif. Pour réduire certaines des étapes nécessaires pour créer des options de fonctionnement et de personnalisation sûre, Aristteides Stathopoulos a développé un plugin gratuit et open-source, Kirki.

Dans cet article, je vais montrer comment intégrer Kirki dans votre thème WordPress et comment l'utiliser pour créer quelques options de personnalisation.

Les plats clés

• Kirki améliore l'API WordPress Customizer en fournissant une syntaxe plus simple et des fonctionnalités avancées, permettant aux développeurs d'écrire plus avec moins de code.
• La boîte à outils est en constante évolution, et les utilisateurs sont encouragés à contribuer à son développement sur github.
• Kirki peut être facilement intégré dans des thèmes WordPress en tant que plugin ou comme bibliothèque dans le thème, offrant une flexibilité dans la façon dont il est utilisé.
• Kirki fournit une variété de contrôles tels que des cueilleurs de couleurs, des images radio et des textares, qui peuvent être utilisés pour créer des options de thème personnalisables faciles à gérer pour les utilisateurs finaux.
• La boîte à outils prend en charge les aperçus en temps réel avec AJAX, améliorant l'expérience utilisateur en permettant des commentaires immédiats sur les modifications sans rechargement de page.

Qu'est-ce que Kirki?

Écoutons ce qu'est Kirki du développeur derrière:

Kirki n'est pas un cadre. Il s'agit d'une boîte à outils permettant aux développeurs WordPress d'utiliser le personnalisateur et de profiter de ses fonctionnalités avancées et de sa flexibilité en abstraction du code et en facilitant la création de belles expériences d'utilisateurs.

.

Kirki Documentation

Je voudrais ramener à la maison deux points sur cette boîte à outils.

• Kirki ne remplace pas l'API WordPress Customizer. Il crée un «wrapper pour les méthodes WordPress par défaut, simplifiant la syntaxe et vous permettant d'écrire plus avec moins de code». Vous pouvez toujours utiliser des méthodes de personnalisation native aux côtés de l'API Kirki. Encore mieux, il vous est chaleureusement conseillé de vous familiariser avec l'API de personnalisation avant d'approcher Kirki. Si vous cherchez une introduction utile à l'objet Customizer, rendez-vous pour démarrer avec l'API de personnalisation du thème WordPress par Narayan Prusty.
• Kirki est dans un état d'évolution et d'amélioration constante, un peu comme le personnalisateur WordPress lui-même. Par conséquent, tous les rapports de bogues, ou demandes de nouvelles fonctionnalités, ont leur place dans le repo GitHub, où vous pouvez télécharger la version de développement du plugin et contribuer à son développement.

Il est temps de voir Kirki en action. Si vous souhaitez suivre, préparez un thème WordPress ou prenez le thème de démonstration superminimal qui contient tout le code discuté dans ce post.

Comment inclure Kirki dans votre thème

Kirki est emballé sous forme de plugin WordPress. En tant que tel, vous pouvez le télécharger à partir du référentiel des plugins wordpress.org, ou directement à partir du backend de votre installation WordPress, décompressez-le et activez-le.

Si vous préférez inclure Kirki dans votre thème en tant que bibliothèque, suivez les étapes décrites ci-dessous.

• Copiez le répertoire Kirki dans le dossier de votre thème.
  
  Dans le thème de démonstration de cet article, les fichiers Kirki sont situés à l'intérieur d'un répertoire appelé Inc.

• Faire votre thème «Talk» avec Kirki en ajoutant cette ligne à Functions.php (assurez-vous d'ajuster le chemin du dossier du dossier Kirki pour correspondre à la structure de fichiers de votre thème).

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

• Ajoutez une fonction pour inclure les options de configuration Kirki et accrochez-la au filtre Kirki / Config. C'est à vous de décider ce que vous voulez ajouter à cette fonction. Pour ce post, gardons-le au minimum en ajoutant le code dont Kirki a besoin afin d'être «informé» de son nouvel emplacement, c'est-à-dire le dossier du thème plutôt que le dossier du plugin.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

C'est à l'intérieur de cette fonction de configuration que vous pouvez contrôler l'apparence du personnalisateur WordPress pour correspondre à votre thème. Plus important encore, c'est ici que vous ajoutez le code nécessaire pour fabriquer toutes les chaînes utilisées par le plugin traduisibles à partir de votre thème. Jetez un coup d'œil à l'intérieur du thème de démonstration superminimal ou de la page de documentation Kirki pour des conseils sur la façon de l'accomplir.

Commençons par ajouter des options

Kirki est maintenant prêt à nous aider à créer certaines options de personnalisation. Vous pouvez utiliser des fonctions.php ou créer un fichier dédié pour la tâche, c'est à vous.

Les options de personnalisation vivent des sections à l'intérieur, qui sont éventuellement situées à l'intérieur des panneaux. Dans le projet de démonstration de cet article, je regroupe toutes les sections dans un panneau dédié à l'aide de méthodes de personnalisation native, comme ainsi.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Ensuite, ajoutez des sections pour les couleurs du texte du site, la disposition du site et les options de texte de pied de page respectivement en plaçant ce code juste en dessous de la méthode de personnalisation ADD_PANEL précédente.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

Maintenant, vous êtes prêt à ajouter la première option alimentée par Kirki.

Option de couleur de texte

Tout votre code lié aux options doit être placé à l'intérieur d'une fonction. Cette fonction est ensuite filtrée à travers le filtre Kirki / Fields.

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

Donnons à vos utilisateurs de thème WordPress un moyen facile de modifier la couleur du texte. Cela se fait rapidement avec Kirki. Ajoutez l'extrait de code suivant à l'intérieur de la fonction superminimal_demo_fields (), juste au-dessus des champs de retour $; déclaration.

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Kirki propose une syntaxe condensée pour ajouter à la fois un paramètre et un contrôle connexe en une seule fois.

décomposons le tableau $ champs []

• Le type fait référence au contrôle spécifique où les utilisateurs saisissent la valeur de leur option choisie, dans ce cas le contrôle des couleurs.
• Le réglage fait référence à l'ID du paramètre de personnalisation qui gère la prévision en direct, l'enregistrement et la désinfection des objets de personnalisation.
• L'étiquette et la description sont là pour communiquer avec les utilisateurs. L'étiquette affiche un titre pour l'option et la description offre une indication de ce que fait l'option.
La section
• se réfère à l'ID de la section qui héberge ce contrôle de couleur spécifique.
• La priorité fait référence à la position de ce contrôle de couleur spécifique par rapport à d'autres contrôles à l'intérieur de la même section.
• La valeur par défaut est définie sur la valeur de couleur CSS par défaut.
• Enfin, la sortie est la façon impressionnante de Kirki d'appliquer la valeur du paramètre. NEEZ-LE JUSTE LE SÉLECTEUR ET LA PROPRIÉTÉ CSS, et Kirki gère toutes les opérations nécessaires.

En suivant l'exemple ci-dessus, vous pouvez également aller de l'avant et ajouter une option de couleur pour les liens.

Ensuite, donnons aux utilisateurs de votre thème la possibilité de personnaliser la disposition du site.

Option de mise en page du site

Kirki propose un tas de commandes de personnalisation sophistiquées. Mon préféré est le contrôle de l'image radio.

Voici comment vous pouvez l'ajouter à votre thème pour offrir aux utilisateurs la possibilité de modifier la disposition de leur site.

<span>function superminimal_demo_fields( $fields ) {
</span>      <span>//Add code here
</span>      
      <span>return $fields;
</span>    <span>}
</span>    <span>add_filter( 'kirki/fields', 'superminimal_demo_fields' );</span>

Placez le code ci-dessus juste après les champs $ précédents [] l'extrait de tableau. Remarquez comment aucun paramètre de sortie n'a été ajouté au code. Il en est ainsi parce que la valeur de chaque entrée d'image radio n'est pas une valeur de propriété CSS.

La façon dont vous pouvez extraire la valeur du paramètre superminimal_layout est par la méthode Native Customizer get_theme_mod. Vous utilisez ensuite cette valeur en tant que valeur d'un attribut de classe d'un élément HTML approprié dans le fichier de modèle. Enfin, il s'agit simplement d'écrire le CSS approprié pour réaliser la disposition souhaitée pour les classes .Fullwidth, .sidebar-left et .sidebar-droite dans votre feuille de style.

Consultez les détails de la façon d'implémenter l'option de mise en page dans le thème de démonstration superminimal.

Option de texte de pied de page

Combien de fois avez-vous rencontré des utilisateurs de thème WordPress vous demandant de les aider à remplacer les développeurs dans la zone de pied de page de leur thème? L'ajout d'une option pour permettre aux utilisateurs de gérer facilement le texte du pied de page à partir du personnalisateur prend quelques minutes avec Kirki. Voici le code.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Le code ci-dessus publie une TextArea où les utilisateurs peuvent rédiger des avis de droit d'auteur, des crédits, etc.

Pour extraire et afficher le texte entré dans TextArea, utilisez la méthode de personnalisation native get_theme_mod dans Footer.php comme suit.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

Ensuite, vérifions ce que plus Kirki peut faire pour améliorer l'expérience utilisateur avec le personnalisateur WordPress.

comment ajouter des options conditionnelles

En tant que concepteur de thème, vous n'aimez pas submerger les utilisateurs avec une pléthore d'options confuses. Certains choix n'ont pas besoin d'être faits avant que les utilisateurs ne choisissent une option spécifique. Le personnalisateur propose le paramètre pratique actif_callback pour les panneaux, les sections et les commandes. Vous pouvez définir ce paramètre sur une condition spécifique qui doit être remplie avant qu'un panneau, une section ou un contrôle ne s'affiche dans le personnalisateur.

Qu'est-ce que Kirki a à offrir à cet égard?

L'API Kirki utilise le paramètre requis pour masquer ou afficher un contrôle dans le personnalisateur sur la base de la valeur d'un autre contrôle.

Par exemple, disons que vous souhaitez afficher la TextArea pour permettre aux utilisateurs de modifier le texte du pied de page uniquement s'ils cochent une case à cocher. Pour ce faire, ajoutez le code suivant au contrôle superminimal_footer_text.

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

L'ajout de l'extrait ci-dessus au code du contrôle TextArea garantit que la valeur du contrôle superminimal_reveal_footer_text doit être égale à 1 avant que le contrôle de TextArea ne s'affiche dans le personnalisateur. Ajoutons le contrôle superminimal_reveal_footer_text à la fonction superminimal_demo_fields ().

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Le contrôle Superminimal_reveal_Footer_Text est une case à cocher qui par défaut est définie sur 0, c'est-à-dire qu'elle n'est pas contrôlée. Cela empêche la textarea d'être affiché.

uniquement après la vérification de la case à cocher, c'est-à-dire qu'en changeant sa valeur de 0 à 1, la TextArea apparaît dans le personnalisateur.

Améliorer l'aperçu en direct

Le personnalisateur est livré avec une puissante API JavaScript pour ajouter une capacité Ajax à la zone d'aperçu. Cette amélioration permet aux utilisateurs de vérifier leurs modifications en temps réel sans attendre que la page d'aperçu de la personnalisation entière de se rafraîchir.

Nous pouvons atteindre le même résultat avec Kirki simplement en ajoutant quelques paramètres pratiques au tableau $ champs [].

Par exemple, pour ajouter un aperçu en direct ajaxifié au paramètre superminimal_body_color, ajoutez l'extrait suivant au tableau $ Fields [] approprié.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Permettez-moi d'expliquer ce que fait le code ci-dessus.

• Tout d'abord, le code ci-dessus modifie la méthode de transport de Refresh (la valeur par défaut) à PostMessage. Cela signale au personnalisateur qu'il doit utiliser JavaScript pour l'aperçu en direct.
• Ensuite, les valeurs des paramètres JS_VARS indiquent que les éléments du corps et de P doivent être modifiés à l'aide de la propriété CSS Color.

Kirki propose deux valeurs prédéfinies pour le paramètre de fonction. Utilisez la valeur CSS si le paramètre que vous ajoutez stocke des règles CSS comme la couleur arrière, la couleur, la taille de la police, etc. Utilisez la valeur HTML si le paramètre stocke une chaîne de balisage HTML à insérer dans la page.

À titre d'exemple de la façon dont vous pouvez utiliser la valeur HTML, ajoutons la fonctionnalité Ajax Live Aperçu au paramètre qui gère les modifications du texte du pied de page. Ajoutez cet extrait à la fin du tableau $ champs [] qui contient le paramètre superminimal_footer_text.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

C'est tout, allez et essayez d'écrire quelque chose dans la TextArea à l'intérieur de la section superminimal_footer_text. Vous remarquerez bientôt le texte de pied de page correspondant dans le changement d'écran d'aperçu en conséquence sans recharger la page complète. Cool!

Ajax Live Aperçu avec le contrôle de l'image radio

Il peut y avoir des cas où ni CSS ni HTML ne sont un bon ajustement pour le paramètre de fonction qui permet l'aperçu AJAX Live. Un exemple est le paramètre pour modifier la disposition du site. L'utilisation de CSS comme valeur pour le paramètre de fonction n'a pas beaucoup de sens car le paramètre en question ne stocke aucune valeur de propriété CSS. De même, l'utilisation de HTML ne le coupe pas tout à fait. En fait, cela ne fera que cracher FullWidth , la barre latérale-left , ou la barre latérale sur la page d'aperçu, en fonction de la radio-image radio Le bouton de contrôle est sélectionné. Mais cela ne peut pas être ce que vous aimeriez accomplir.

La bonne nouvelle est que vous pouvez brancher un nom de fonction JavaScript personnalisé comme valeur du paramètre de fonction et cela fonctionne!

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

Vous devrez mettre en place le fichier JavaScript où votre fonction personnalisée vit et l'accrocher au crochet d'action personnalisé_preview_init.

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Enfin, écrivez la fonction JavaScript qui gère l'aperçu en direct à l'aide de l'API JavaScript de personnalisation native.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

La grande chose à propos de Kirki est que vous pouvez l'utiliser avec, plutôt qu'à la place de l'API de personnalisation WordPress. Par conséquent, lorsque la situation l'exige, vous pouvez facilement basculer entre les deux API en un rien de temps.

Ressources

faim pour plus? Voici quelques excellentes ressources.

• Kirki Toolkit Documentation.
• Construire des thèmes WordPress utilisant le personnalisateur de Kirki, par Aristteides Stathopoulos.
• Options de thème - L'API Customizer, à partir du manuel de thème wordpress.org.

Conclusion

J'ai montré comment intégrer la boîte à outils Kirki dans un thème WordPress.

Kirki est activement développé et soutenu. Son API et ses contrôles personnalisés optimisent déjà considérablement le temps nécessaire pour développer des options de thème de personnalisation. Cela devient particulièrement important si vous cherchez à faire répertorier votre thème dans le référentiel thèmes wordpress.org. En fait, les thèmes qui fournissent des options de personnalisation sont nécessaires pour le faire via les pages d'options de personnalisation plutôt que de personnalité.

pour plonger dans les détails du code discuté dans cet article, n'hésitez pas à télécharger le thème de démo superminimal de GitHub.

J'attends avec impatience vos commentaires!

Des questions fréquemment posées sur le développement des options de personnalisation WordPress rapides avec Kirki

Qu'est-ce que Kirki et comment profite-t-il à WordPress Development?

Kirki est une boîte à outils conçue pour simplifier le processus de développement de thèmes pour WordPress. Il fournit une gamme de fonctionnalités qui facilitent la création, la personnalisation et la gestion des thèmes WordPress. Il s'agit notamment d'un personnalisateur qui vous permet de prévisualiser les changements en temps réel, une variété de contrôles pour différents types de contenu et une structure modulaire qui vous permet d'inclure uniquement les fonctionnalités dont vous avez besoin. En utilisant Kirki, les développeurs peuvent gagner du temps et des efforts et créer des thèmes plus puissants et flexibles.

Comment puis-je installer et configurer Kirki pour WordPress?

L'installation de Kirki est simple. Vous pouvez le télécharger à partir du répertoire du plugin WordPress et l'installer comme n'importe quel autre plugin. Une fois installé, vous pouvez accéder aux fonctionnalités de Kirki via le personnalisateur WordPress. Pour configurer Kirki, vous devez ajouter une configuration pour votre thème. Cela implique d'ajouter quelques lignes de code au fichier functions.php de votre thème. La configuration spécifie les options et les paramètres de votre thème.

Quels types de contrôles Kirki fournissent-ils?

Kirki fournit une large gamme de contrôles pour différents types de contenu. Il s'agit notamment de contrôles de base comme le texte, la case à cocher et les boutons radio, ainsi que des contrôles plus avancés comme le sélecteur de couleurs, le téléchargeur d'image et le sélecteur de typographie. Chaque contrôle est livré avec son propre ensemble d'options et de paramètres, vous permettant de personnaliser le contrôle en fonction de vos besoins.

Comment utiliser la fonction d'aperçu en temps réel dans Kirki?

La fonction d'aperçu en temps réel de Kirki vous permet de voir des modifications comme vous les faites. Pour utiliser cette fonctionnalité, vous devez ajouter une option de «transport» à votre configuration de contrôle. L'option «Transport» spécifie comment les modifications du contrôle sont reflétées dans l'aperçu. En définissant cette option sur «PostMessage», vous pouvez activer l'aperçu en temps réel pour le contrôle.

Puis-je utiliser Kirki avec n'importe quel thème WordPress?

Oui, Kirki est conçu pour fonctionner avec n'importe quel Thème WordPress. Cependant, pour tirer pleinement parti des fonctionnalités de Kirki, votre thème doit prendre en charge le personnalisateur WordPress. La plupart des thèmes WordPress modernes prennent en charge le personnalisateur, donc cela ne devrait pas être un problème pour la plupart des utilisateurs.

Comment ajouter un nouveau panneau à l'aide de Kirki?

L'ajout d'un nouveau panneau à l'aide de Kirki implique l'ajout d'un Quelques lignes de code dans le fichier fonctions.php de votre thème. Le code spécifie l'ID, le titre, la description et la priorité du panneau. Une fois ajouté, le panneau apparaîtra dans le personnalisateur WordPress, et vous pouvez y ajouter des sections et des commandes.

Quelle est la structure modulaire de Kirki et comment cela me profite?

La modulaire La structure de Kirki signifie qu'elle est divisée en modules distincts, chacun fournissant un ensemble spécifique de fonctionnalités. Cela vous permet d'inclure uniquement les modules dont vous avez besoin, en réduisant la taille et la complexité de votre thème. Il facilite également la gestion et la mise à jour de votre thème, car vous pouvez mettre à jour ou remplacer les modules individuels sans affecter le reste du thème.

Comment personnaliser la typographie de mon thème en utilisant Kirki?

Kirki fournit un contrôle de typographie qui vous permet de personnaliser la typographie dans votre thème. Ce contrôle offre des options pour régler la famille des polices, la variante, la taille, la hauteur de la ligne, l'espacement des lettres et la couleur. Vous pouvez également ajouter des polices Google au contrôle, vous donnant accès à une large gamme de polices.

Puis-je utiliser Kirki pour créer un thème enfant?

Oui, vous pouvez utiliser Kirki pour créer un thème d'enfant. Un thème enfant est un thème qui hérite de la fonctionnalité et du style d'un autre thème, connu sous le nom de thème parent. En créant un thème enfant, vous pouvez modifier le thème parent sans affecter le code d'origine. Kirki fournit une gamme de fonctionnalités qui facilitent la création et la personnalisation des thèmes enfants.

Comment mettre à jour Kirki?

La mise à jour de Kirki est aussi simple que la mise à jour de tout autre plugin WordPress. Vous pouvez le mettre à jour via le tableau de bord WordPress, ou en téléchargeant la dernière version à partir du répertoire de plugin WordPress et en l'installant manuellement. Il est important de garder Kirki à jour pour assurer la compatibilité avec la dernière version de WordPress et pour bénéficier de nouvelles fonctionnalités et améliorations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!