Supposons que nous ayons créé un thème avec un certain nombre de paramètres et de contrôles du personnaliseur, qui permettent aux utilisateurs de ce thème de personnaliser un certain nombre d'éléments du front-end du thème, tels que le titre du site Web, le slogan et la couleur..

Cependant, certains de nos utilisateurs peuvent ne pas savoir immédiatement qu'ils sont capables de personnaliser ces parties particulières du thème, en particulier si elles sont enfouies sous plusieurs panneaux et sections. Alors, comment pouvons-nous le rendre plus rapide pour personnaliser le thème?

WordPress.com a récemment ajouté des boutons Modifier sur certaines zones modifiables, qui sont immédiatement visibles au lancement du Customizer. Lorsque l'utilisateur clique sur ces boutons, il leur montrera le contrôle correspondant.

Le nouveau bouton "Modifier" de la fenêtre de prévisualisation du personnalisateur sur WordPress.com, 

C’est une belle amélioration de l’UX que nous pouvons également réaliser avec l’API JavaScript de Customizer sur notre thème. Et vous constaterez que cela n’est pas aussi compliqué que vous l’auriez imaginé. Voyons donc comment cela fonctionne..

Conditions préalables

Dans le dernier tutoriel, nous n’écrivions que du code dans le customizer-control.js fichier, qui affecte les interfaces dorsales du Customizer. Dans ce tutoriel, nous allons également utiliser l'autre fichier, customizer-preview.js, qui est chargé dans la fenêtre d'aperçu. Vous devriez avoir ces deux fichiers créés et chargés. Sinon, je vous suggère de suivre le premier tutoriel de cette série avant de continuer..

Création d'un bouton d'édition

Tout d’abord, nous ajoutons quelques modifier boutons à côté du titre du site.

 "rel =" home ">     

En utilisant is_customize_preview (), ce bouton n'apparaît que dans la fenêtre Aperçu du personnaliseur. Chacun de ces boutons est associé à un classe prénom, .personnalisation-éditer, ce qui nous permettra de sélectionner ces boutons et de les lier avec un Cliquez sur Événement plus tard.

En outre, nous avons également ajouté ces boutons avec un contrôle des données attribut contenant le nom ou l’identifiant des paramètres enregistrés dans le Customizer. Le nom dans cet attribut nous aidera à déterminer le réglage et le contrôle appropriés à transmettre à l'utilisateur ultérieurement..

Deux boutons d'édition pour personnaliser le titre et la couleur du titre.

Étant donné que la présentation n’est pas notre principale préoccupation pour le moment, nos deux boutons "Modifier" dans la fenêtre Aperçu ne sont pas aussi beaux que ceux de WordPress.com. Vous pouvez ajouter les styles de manière à correspondre à la conception de votre thème dans son ensemble..

Définir un événement personnalisé

Ensuite, nous définissons un événement personnalisé; un événement qui indique qu'un de ces boutons est cliqué. Ajoutez le code suivant dans le customizer-preview.js fichier.

var personnaliser = wp.customize; $ (document.body) .on ('click', '.customizer-edit', function () personnaliser.preview.send ('preview-edit', $ (this) .data ('control')); )

Le code lie chacun de ces boutons avec le bouton Cliquez sur Événement, en utilisant le  .preview.send () méthode pour lancer un événement. le .preview.send () La méthode prend deux paramètres, à savoir le nom de l'événement personnalisé et l'argument. Dans notre cas, nous avons défini un nouvel événement appelé prévisualisation-édition, et passer un argument avec les données extraites de la contrôle des données attribut du bouton.

Écoute de l'événement personnalisé

Nous pouvons écouter un casting d'événement personnalisé à partir du .preview.send () méthode via une autre méthode de personnalisation appelée .previewer.bind ()-remarquez le prévisualisateur avec heu. Cette méthode est similaire à jQuery .sur() Méthode dans laquelle nous définissons le nom de l'événement à écouter et une fonction qui s'exécutera lorsque l'événement sera déclenché. Ajouter .previewer.bind () dans le customizer-control.js, comme suit.

var personnaliser = wp.customize; personnaliser.previewer.bind ('preview-edit', function (data) );

Ensuite, nous transformons les données transmises en un format de conformité JSON, sélectionnons un élément de contrôle basé sur le prénom récupéré à partir des données et concentrez-vous sur l'élément de contrôle à l'aide du Customizer .concentrer() méthode.

var personnaliser = wp.customize; personnaliser.previewer.bind ('prévisualiser-modifier', fonction (données) var données = JSON.parse (données); var control = personnaliser.control (data.name); control.focus (););

Maintenant, comme vous pouvez le voir ci-dessous, lorsque nous cliquons sur, par exemple, le bouton "Modifier le texte", le réglage "Titre du site" s'affiche et le curseur est mis en évidence dans l'entrée..

Le bouton Edit en action.

En outre, si nous examinons le code source, le .concentrer() méthode accepte un paramètre appelé completeCallback. Ce paramètre est exécuté consécutivement après le .concentrer() la fonction est exécutée. Nous pouvons utiliser ce paramètre, par exemple, pour ajouter un effet d'animation.

personnaliser.previewer.bind ('preview-edit', fonction (données) var données = JSON.parse (données); var control = personnaliser.control (données.nom); control.focus (completeCallback: function ()  setTimeout (function () control.container.addClass ('shake animated');, 300);););

L'expérience globale se sent maintenant plus vivante.

Elément d'entrée amélioré avec animation CSS

Emballer

Nous avons mentionné plusieurs API JavaScript de Customizer:

• .preview.send () méthode pour lancer un événement personnalisé.
• .previewer.bind () méthode pour lier le personnalisateur avec un événement personnalisé.
• .concentrer() méthode pour se concentrer sur un élément d'entrée d'un contrôle ainsi que sur completeCallback paramètre.

Dans ce tutoriel, nous utilisons ces méthodes pour permettre à nos utilisateurs de thème de modifier rapidement le texte du titre du site en cliquant sur le bouton "Modifier le texte" dans la fenêtre d'aperçu..

Il nous reste encore un bouton pour afficher les commandes de couleur. Mais je vais le laisser ici comme un défi; utilisez les trois mêmes méthodes pour créer la fonction "Modifier les couleurs". En cas de doute, n'hésitez pas à jeter un œil au code source.