Share
WordPress Customizer a été activement développé depuis sa création. Les API évoluent continuellement, y compris l'API JavaScript. Cependant, il s’agit de l’une des API les moins documentées du codex WordPress. Par conséquent, seuls quelques enregistrements détaillés montrent comment tirer parti de l'API JavaScript. pratiquement.
L'utilisation de l'API JavaScript dans WordPress Customizer peut en réalité nous permettre de proposer une expérience plus attrayante en temps réel tout en personnalisant le thème, au-delà du transfert du changement de la fenêtre de contrôle à la fenêtre d'aperçu..
Vous connaissez peut-être comment l'API JavaScript de Customizer est utilisée pour modifier en temps réel la fenêtre d'aperçu. Pour ce faire, nous définissons le paramètre transport mode à postMessage et ajoutez le code JavaScript correspondant, comme suit.
Accentsconagua
wp.customize ('blogname', fonction (valeur) valeur.bind (fonction (à) $ ('.site-title a') .text (à);));Toutefois, nous pouvons également étendre davantage l'API pour, par exemple, masquer, afficher ou déplacer une section, un panneau, un contrôle, modifier la valeur d'un paramètre en fonction d'une autre valeur et relier les interactions Aperçu et Contrôle. Et ce sont ce que nous allons examiner dans ce tutoriel.
Nous avons couvert le WordPress Customizer de manière assez détaillée avec une poignée d'articles et quelques séries couvrant les tenants et les aboutissants des API Customizer..
Je suppose que vous avez saisi le concept de base de WordPress Customizer, ainsi que des composants tels que Panneau, Section, Paramétrage et Contrôle. Sinon, je vous recommande vivement de consacrer un peu de temps à nos tutoriels et cours vidéo sur le sujet avant d'aller plus loin..
Pour commencer, nous examinerons les "Paramètres" et les "Contrôles" dans le Customizer que nous avons ajouté aux fins de ce tutoriel. Nous allons également examiner le code qui les met à leur place.
Dans ce tutoriel, nous allons nous concentrer sur le site "Titre du site". Et comme vous pouvez le voir ci-dessus, nous avons deux contrôles: le champ de saisie natif de WordPress "Titre du site" et notre case à cocher personnalisée pour activer ou désactiver le "Titre du site". Ces deux contrôles résident dans la section "Identité du site". Et sur le côté droit de l'image est l'aperçu, où vous pouvez voir le "Titre du site" rendu.
De plus, comme vous pouvez le voir ci-dessous, nous avons également deux contrôles qui se trouvent dans la section Couleurs pour changer la couleur "Titre du site" et sa couleur. flotter couleur de l'état.
Notre thème est basé sur Underscores, dans lequel tout le code associé au Customizer est placé dans le /inc/customizer.php fichier.
function tuts_customize_register ($ wp_customize) $ wp_customize-> get_setting ('blogname') -> transport = 'postMessage'; $ wp_customize-> get_setting ('blogdescription') -> transport = 'postMessage'; $ wp_customize-> get_control ('blogdescription') -> priorité = '12'; $ wp_customize-> get_setting ('header_textcolor') -> default = '# f44336'; $ wp_customize-> get_setting ('header_textcolor') -> transport = 'postMessage'; // Case à cocher pour afficher le nom de répertoire $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage',)); $ wp_customize-> add_control ('display_blogname', array ('label' => __ ('Afficher le titre du site', 'tuts'), 'section' => 'title_tagline', 'type' => 'case à cocher', 'priorité '=> 11,)); // Ajoute le réglage et le contrôle de la couleur du texte principal. $ wp_customize-> add_setting ('header_textcolor_hover', array ('default' => '# C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage',)); $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, 'header_textcolor_hover', array ('label' => __ (Couleur du texte d'en-tête: survol, ',' tuts '),' section '=' '' 'couleurs', 'priorité', ' => '11'))); add_action ('personnaliser_register', 'tuts_customize_register'); Et comme vous pouvez le voir ci-dessus, nous avons apporté quelques modifications au code, conformément à nos besoins dans ce tutoriel..
description de blog, à 12 afin que la case à cocher Réglage, display_blogname, apparaît sous le champ de saisie "Titre du site".display_blogname. Nous avons mis le priorité à 11 qui, dans notre cas, réside entre le champ de saisie "Titre du site" et "Tagline".en-tête couleur par défaut à # f44336 et le transport taper à postMessage.header_text_color. De même, nous avons également donné la priorité à 11 de sorte qu'il apparaît juste en dessous de la header_textcolor Réglage.Tous ces paramètres sont définis avec postMessage au lieu de rafraîchir. le postMessage Cette option permet à la valeur d'être transportée de manière asynchrone et affichée dans la fenêtre Aperçu en temps réel. Cependant, nous devrons également écrire notre propre JavaScript pour gérer le changement..
Nous devons créer deux fichiers JavaScript: un fichier, customizer-preview.js, pour traiter l'aperçu et l'autre fichier, customizer-control.js, gérer les contrôles à l'intérieur du panneau de personnalisation.
js ├── customizer-preview.js // 1. Fichier gérant l'aperçu ├── customizer-control.js // 2. Fichier gérant les commandes ├── navigation.js skip-link-focus- fix.js
Dans customizer-preview.js est le code suivant.
(function ($) // Codes ici.) (jQuery);
Il s'agit actuellement d'une fonction JavaScript fermée vide. Nous discuterons plus précisément de la façon dont nous prévisualisons les modifications dans la fenêtre Aperçu dans le prochain tutoriel de cette série..
Dans l'autre fichier, customizer-control.js, nous ajoutons le code suivant:
(function ($) wp.customize.bind ('ready', function () var personnaliser = this; // codes ici);) (jQuery);Comme vous pouvez le voir ci-dessus, nous allons envelopper le code dans ce fichier lors du Customizer prêt un événement. Cela garantira que tout ce qui se trouve dans le Customizer est entièrement prêt, y compris les paramètres, les panneaux et les contrôles, avant de commencer à exécuter des fonctions personnalisées..
Enfin, une fois le code ajouté, nous chargerons ces deux fichiers JavaScript dans deux emplacements différents..
// 1. fonction customizer-preview.js tuts_customize_preview_js () wp_enqueue_script ('tuts_customizer_preview', get_template_directory_uri (). '/Js/customizer-preview.js', tableau ('custom-preview'), null (true); add_action ('custom_preview_init', 'tuts_customize_preview_js'); // 2. fonction customizer-control.js tuts_customize_control_js () wp_enqueue_script ('tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', tableau ('custom-controls', ', vrai ); add_action ('custom_controls_enqueue_scripts', 'tuts_customize_control_js');le customizer-preview.js Le fichier sera chargé dans la fenêtre de prévisualisation du personnalisateur via personnaliser_preview_init Crochet d'action. le customizer-control.js Le fichier sera chargé dans le back-end du Customizer, où les éléments Setting et Control sont accessibles via le custom_controls_enqueue_scripts Crochet d'action.
WordPress a été fortement investi dans PHP depuis sa création. Ainsi, il ne sera pas surprenant que la majorité des développeurs prenant en charge l'écosystème maîtrisent mieux les API PHP et les maîtrisent mieux que les API JavaScript..
Ce n'est que récemment que JavaScript a été largement intégré via Customizer et WP-API. Saisir les API JavaScript dans WordPress Customizer peut être un défi de taille. Comme mentionné, c'est le côté de WordPress qui est actuellement le moins documenté. Par conséquent, nous allons passer à travers ce sujet à fond.
En attendant, si vous recherchez d'autres utilitaires pour vous aider à développer votre ensemble croissant d'outils pour WordPress ou pour que le code soit étudié et approfondi dans WordPress, n'oubliez pas de voir ce que nous avons disponible dans Envato. Marché.
Nous avons préparé ici tous les éléments essentiels pour travailler avec les API JavaScript de WordPress. Et nous finirons ici. Dans la prochaine partie de la série, nous découvrirons plus en détail ce qui se cache sous les API JavaScript de WordPress et commencerons à écrire des scripts fonctionnels que vous pourrez immédiatement implémenter dans votre thème..
Restez à l'écoute!
