API JavaScript du personnaliseur Panneau, Section et Contrôle

Aujourd'hui, nous allons reprendre notre discussion sur l'API JavaScript dans WordPress Customizer. Dans le dernier tutoriel, nous avons préparé et chargé deux fichiers JavaScript, customizer-control.js et customizer-preview.js, cela nous permettra d'interagir avec l'API JavaScript à partir du backend de Customizer et de l'interface frontale ou de l'interface de prévisualisation. Assurez-vous donc de suivre le dernier tutoriel avant de continuer..

Dans ce tutoriel, nous allons nous concentrer sur l'interface composant le back-end, les panneaux, les paramètres et les contrôles de Customizer. Encore une fois, si ces trois choses sont nouvelles pour vous, je vous recommande fortement de suivre notre série complète précédente: Guide du personnalisateur de thème WordPress.

Interaction de base avec l'API JavaScript de Customizer

En plus de l'API PHP, que certains d'entre vous connaissent sûrement, les panneaux, sections et contrôles sont également accessibles via l'API JavaScript. De même, nous pouvons ensuite les modifier. Voici quelques exemples.

Sélectionnez un contrôle, une section ou un panneau particulier:

// Sélectionnez un contrôle. wp.customize.control ('blogname'); // Sélectionnez une section. wp.customize.section ('title_tagline'); // Sélectionnez un panneau. wp.customize.panel ('nav_menus'); 

Réorganiser leur ordre de vue.

// Modifier une priorité de contrôle wp.customize.control ('blogname') .priority (30); // Modifier une priorité de section wp.customize.section ('title_tagline') .priority (100); // Modification d'une priorité de panneau wp.customize.panel ('nav_menus') .priority (200); 

Déplacez le contrôle "Titre du site" sur, par exemple, le Couleur section.

wp.customize.control ('blogname') .section ('couleurs'); 

Basculer sa visibilité.

// Désactive / masque le contrôle 'Titre du site' wp.customize.control ('blogname') .toggle (); 

Vous pouvez même analyser l’arborescence DOM de contrôle, ce qui serait autrement compliqué à faire en PHP.

wp.customize.control ('blogname') .container.find ('.customize-control-title'); 

Voici une poignée de choses que vous pouvez faire avec les panneaux, sections et contrôles de l'API JavaScript de Customizer. Mettons maintenant ces éléments dans une expérience utilisateur plus significative.

Basculement des sections et des contrôles

À ce stade, nous devrions avoir quatre contrôles au total. Deux commandes, l'entrée "Titre du site" et la case à cocher "Afficher le titre du site", se trouvent dans la section "Identité du site". Les deux autres sont un sélecteur de couleur. Ils résident dans la section "Couleurs" et définissent respectivement la couleur du texte "Titre du site" et sa couleur d'état de survol.

Nos quatre contrôles dans le Customizer

Notre objectif est d’afficher les commandes de couleur uniquement lorsque la case à cocher "Afficher le titre du site" est cochée, car il n’ya aucune raison de les afficher lorsque le titre de site est désactivé..

De plus, cette approche pourrait nous aider à réduire l'encombrement de Customizer en supprimant les commandes, sections et panneaux non pertinents de la barre latérale de Customizer. Si cela ressemble à quelque chose que vous voulez réaliser, commençons.

Désactivation d'un champ d'entrée de contrôle

Pour commencer, ouvrez notre fichier JavaScript, customizer-control.js. Ensuite, ajoutez les lignes de code dans le Customizer prêt un événement:

wp.customize.bind ('ready', function () // Ready? var personnaliser = this; // personnaliser l'alias d'objet. personnaliser ('display_blogname', function (setting) );); 

Ici, nous avons défini un alias pour le ce mot-clé, qui fait référence à l'API JavaScript de Customizer. Ensuite, nous accrochons une fonction anonyme dans le display_blogname paramètre puisque toutes les personnalisations que nous allons effectuer dans le Customizer seront relatives à la valeur de ce paramètre particulier.

Ensuite, nous sélectionnons le contribution champ du paramètre "Titre du site".

wp.customize.bind ('ready', function () // Ready? var personnaliser = this; // WordPress personnaliser un alias d'objet. ') .container.find (' input '); // entrée du titre du site.);); 

Nous pouvons désactiver l’entrée lorsque le display_blogname case à cocher est décoché.

wp.customize.bind ('ready', function () // Ready? var personnaliser = this; // personnaliser l'alias d'objet. personnaliser ('display_blogname', function (valeur) var siteTitleInput = personnaliser.control ('blogname' ) .container.find ('input'); // entrée du titre du site. / ** * Désactiver l'élément d'entrée * / // 1. Lors du chargement. siteTitleInput.prop ('disabled',! value.get ()); // .get () value // 2. Liaison à la modification de valeur value.bind (function (to) siteTitleInput.prop ('disabled',! to);););); 

Comme vous pouvez le voir ci-dessus, nous utilisons le jQuery .soutenir() méthode pour définir le HTML désactivée propriété à l'élément d'entrée. Nous utilisons le .obtenir() méthode pour récupérer la valeur actuelle. Enfin, en utilisant le .lier() méthode, nous écoutons le changement de valeur et définissons la désactivée propriété en conséquence.

Gauche: Activé le champ de saisie "Titre du site". Droite: Champ de saisie "Titre du site" désactivé. Remarquez la case à cocher.

Basculement de la visibilité

Nous passons maintenant au code pour basculer la visibilité des sélecteurs de couleurs qui définissent les couleurs "Titre du site". Comme nous l'avions prévu, nous allons supprimer les sélecteurs de couleurs lorsque la case à cocher est activée. décoché et leur montrer à nouveau quand il est coché.

Pour commencer, nous regroupons les ID de réglage du sélecteur de couleurs dans un tableau.

wp.customize.bind ('ready', function () // Ready? var personnaliser = this; // personnaliser l'alias d'objet. personnaliser ('display_blogname', function (valeur) //… codes précédents… var colorControls = [ 'header_textcolor', 'header_textcolor_hover'];);); 

Ensuite, nous itérons une fonction sur ces ID de contrôle qui basculera leur visibilité à l’aide de jQuery .basculer() méthode.

wp.customize.bind ('ready', function () // Ready? var personnaliser = this; // personnaliser l'alias d'objet. personnaliser ('display_blogname', function (valeur) //… codes précédents… var colorControls = [ 'header_textcolor', 'header_textcolor_hover']; $ .each (colorControls, function (index, id) personnaliser.control (id, function (control) / ** * Fonction basculante * / var toggle = function (à) control .toggle (to);; // 1. Au chargement. toggle (value.get ()); // 2. A la modification de la valeur. value.bind (toggle););););) ; 

La structure du code ci-dessus est similaire à notre code précédent, qui désactive l'élément d'entrée. Ici, nous avons sélectionné chaque contrôle dans le tableau en utilisant le .contrôle() méthode comme nous l'avons déjà montré plus tôt dans ce tutoriel. Ensuite, nous avons une fonction pour basculer chaque contrôle en utilisant le jQuery .basculer() méthode, et l'exécuter lors du lancement de la page du personnaliseur ainsi que lorsque la valeur est modifiée.

La case "Afficher le titre du site" est décochée, l'entrée du titre du site est grisée (désactivée) et les sélecteurs de couleur respectifs dans la section Couleur sont maintenant masqués..

Et après

Dans ce tutoriel, je vous ai montré un exemple simple d'utilisation de l'API JavaScript de Customizer pour améliorer l'expérience utilisateur dans Customizer. Vous pouvez également l'améliorer, par exemple, en supprimant la section "Couleurs" s'il n'y a pas de contrôle à afficher dans cette section, et en ajustant la nuance de couleur du paramètre "Couleur du texte d'en-tête: Survol" à la suite de valeur dans le paramètre "Couleur du texte d'en-tête".

Dans le prochain tutoriel de cette série, nous allons nous mettre au défi avec un exemple un peu plus complexe. Nous allons créer un "pont" qui permettra à la fenêtre Aperçu du personnaliseur d'interagir avec le panneau de configuration dans le back-end. Ainsi, lorsqu'un utilisateur clique, par exemple, sur le titre du site dans la fenêtre d'aperçu, le personnalisateur glisse dans l'entrée correspondante de l'utilisateur..

Restez à l'écoute!