Share
À ce stade de la série, nous avons tout expliqué: comprendre pourquoi Theme Customizer est bénéfique pour les concepteurs et les développeurs, comment l'implémenter dans notre thème et pour comprendre la relation entre les sections, les paramètres et les contrôles..
Nous avons également examiné comment implémenter nos propres paramètres et contrôles dans l'une des sections prédéfinies de WordPress..
Dans cet article, nous allons examiner ce qui est nécessaire pour introduire notre propre section et une variété de paramètres et de contrôles. Cet article couvrira une méthodologie qui peut être suivie pour implémenter de nouveaux paramètres et contrôles, et comment appliquer cette méthodologie pour introduire une nouvelle section, un nouveau paramètre et un nouveau contrôle..
Nous développerons ce sujet dans la deuxième partie de cet article en introduisant des contrôles supplémentaires. Mais pour le moment, examinons la méthodologie et introduisons un nouveau paramètre dans le Customizer de thème..
Avant de commencer à mettre à jour notre thème, parlons d'abord de ce qui est nécessaire pour introduire une nouvelle section, un nouveau paramètre et un nouveau contrôle. Notez que, à ce stade, nous supposons que nous allons toujours utiliser le postMessage transport pour les mises à jour en direct, nous allons donc assumer la même chose à l'avenir.
Cela dit, disposer d'une méthodologie pour introduire de nouvelles options est toujours beaucoup plus utile que de passer à l'aveuglette. Voyons donc ce qu'il faut faire pour implémenter les sections, les paramètres et les contrôles à un niveau élevé:
Accentsconagua
get_theme_mod Rien de trop compliqué, non? Bien sûr, les actions parlent plus fort que les mots, alors commençons par faire exactement cela.
Afin de suivre la méthodologie que nous avons décrite ci-dessus, nous allons utiliser les mêmes fonctions, modèles et fichiers JavaScript que ceux que nous avons définis dans les articles précédents. Par conséquent, si vous n'êtes pas au courant, c'est maintenant le cas. temps.
Cela dit, commençons.
dans le tcx_register_theme_customizer fonction, nous allons mettre en œuvre une section appelée Option d'affichage, et nous veillerons à ce que cela soit placé tout en bas de la liste des sections du thème Customizer. Ceci est fait en réglant la priorité propriété du add_section.
$ wp_customize-> add_section ('tcx_display_options', array ('title' => 'Options d'affichage', 'priority' => 200)); Avis ci-dessus, nous avons défini deux arguments:
Si vous enregistrez votre travail maintenant et tentez de recharger le personnaliseur, vous ne verrez pas la Option d'affichage section. C'est parce qu'il n'y a pas d'options à afficher pour le moment..
Afin d'afficher la section, nous devons introduire un paramètre permettant à l'utilisateur de modifier. Pour ce faire, nous allons introduire une option qui permettra à l'utilisateur de basculer la visibilité d'un en-tête.
La première chose à faire est de faire appel à add_setting qui identifiera le paramètre et qui définira sa valeur par défaut et la méthode de transport.
Tout cela devrait être relativement facile si vous avez suivi le précédent article. Donc, juste en dessous de l'appel à add_section, ajouter l'appel suivant:
$ wp_customize-> add_setting ('tcx_display_header', array ('default' => 'true', 'transport' => 'postMessage')); Plus précisément, nous avons créé un nouveau paramètre appelé tcx_display_header que nous allons utiliser afin de basculer l'affichage de l'en-tête en utilisant à la fois get_theme_mod et en utilisant JavaScript.
Mais cela ne suffit pas pour donner à l'utilisateur la possibilité de modifier la visibilité de l'en-tête - nous devons maintenant mettre en place un contrôle.
Pour les besoins de ce paramètre particulier, nous allons introduire une case à cocher qui permettra aux utilisateurs de basculer la visibilité du paramètre..
Premièrement, nous devons définir le contrôle. Pour ce faire, ajoutez le code suivant sous l'appel à add_setting que nous avons défini ci-dessus:
$ wp_customize-> add_control ('tcx_display_header', array ('section' => 'tcx_display_options', 'label' => 'Afficher l'en-tête?', 'type' => 'case à cocher')); Dans cet appel, nous lions le contrôle à la tcx_display_header paramétrer pour qu’il sache quelles informations rendre. Dans le tableau, nous donnons l'ID de la section à laquelle ce paramètre et ce contrôle sont liés. Ensuite, nous donnons l'étiquette qui apparaîtra à côté du contrôle et, enfin, nous définissons le type de contrôle. Évidemment, nous définissons une case à cocher.
À ce stade, vous devriez être en mesure de sauvegarder votre travail, d'actualiser le personnalisateur de thème, puis de voir quelque chose comme ceci:
C’est bien - cela signifie que tout a été correctement câblé en ce qui concerne le thème Customizer, mais notez que cliquer sur la case à cocher n’a pas réellement faire n'importe quoi.
Il est maintenant temps de connecter le personnalisateur de thème au thème actuel.
Tout d'abord, nous voulons ouvrir theme-customizer.js. Si vous avez suivi, cela se trouve dans le js répertoire que nous avons défini plus tôt dans la série.
Ensuite, nous devons ajouter le code suivant:
wp.customize ('tcx_display_header', fonction (valeur) valeur.bind (fonction (to) false === à? $ ('#header') .hide (): $ ('#header') .show ( ););); Notez qu’il prend en compte l’ID du paramètre que nous avons créé, puis exécute la logique suivante: Si à est égal à faux, alors nous cacherons l'élément d'en-tête; sinon, nous montrons l'élément header.
À ce stade, actualisez la page et notez que l'en-tête disparaît (ou réapparaît) lorsque vous cochez la case..
Mais lorsque vous enregistrez votre travail, rien ne se passe. En effet, la valeur sérialisée n'est pas en cours de lecture. La dernière chose que nous devons faire est de tirer parti get_theme_mod pour les réglages.
get_theme_mod Enfin, la dernière partie de la méthodologie nécessaire à la mise en œuvre de nos propres paramètres consiste à s’assurer que la valeur stockée via le transport est en cours de lecture lors du chargement de la page..
Pour ce faire, localisez le tcx_customizer_css fonction et ensuite ajouter le code suivant entre les style bloc:
#header display: none;
En bref, ceci lit la valeur du thème pour l'ID de la valeur d'affichage de l'en-tête que nous avons enregistrée. Si elle est définie sur false, alors l'élément d'en-tête est masqué; sinon, le CSS n'est jamais rendu.
À ce stade, vous devez disposer d’une implémentation pleinement opérationnelle de la case à cocher qui bascule dynamiquement l’en-tête lorsque l’utilisateur utilise le personnaliseur, et qui tire parti de la valeur sérialisée lors de l’enregistrement du paramètre et met à jour ce que l’utilisateur voit chaque fois qu’il le souhaite. charger le thème.
Maintenant que nous avons défini une méthodologie pour la mise en œuvre des sections, des paramètres et des contrôles, nous pouvons commencer à travailler avec divers autres contrôles..
Dans le prochain article, nous examinerons l'ensemble des commandes de base restantes, puis quelques-unes des commandes les plus avancées proposées par WordPress dans le thème Customizer..
Comme avec les versions précédentes du thème, vous pouvez télécharger la version 0.4.0 à partir de GitHub afin de réviser le code, de le manipuler et de vous préparer au prochain jeu de contrôles que nous présenterons dans l'article suivant..
