WordPress : Customizer – lier les contrôles créés par jQuery

Publié par Jean-Michel le

J’ai essayé plusieurs plugins publiés par Weston Ruter pour les contrôles créés par jQuery pour le WP Customizer. Ils fonctionnent mais sont différents de ceux créés via PHP. Par exemple, les champs créés avec PHP ( customizer.php) répondent normalement au code dans customize-controls.jsou dans customize-previews.js:

api( 'tzkmx_test_control', function( value ){
    value.bind( function( to ) {
        var answer = to;
    });
});

Les contrôles créés avec jQuery ne répondent pas à la liaison ! Est-ce que quelqu’un sait comment les lier ?

Solution n°1 trouvée

Voici la solution de 5ervant que j’ai trouvée :

     parent.wp.customize.control( 'special_page', function( control ) {
             control.setting.bind( function( to ) {
                                var answer = to;
     });});

Merci!

Solution n°2 trouvée

Merci Tom,

Exemple:

  1. Téléchargez simplement le plugin WPSE 286375 : Un contrôle dynamique des pages déroulantes à partir d’ici :

  2. Extrayez les deux fichiers suivants dans le dossier du plugin wp : (wp-contents/plugins)

    wpse-286375-controls.js and
    wpse-286375.php
    
  3. Activer le plugin WPSE 286375

  4. Accédez au tableau de bord wp/Personnaliser/Paramètres de la page d’accueil

    il y a 2 contrôles – la page d’accueil et la page des publications avec les identifiants de contrôle « page_on_front » et « page_for_posts »

    et

    troisième contrôle – Page en vedette (elle provient du plugin activé) avec l’ID de contrôle
    « special_page »

    Il est créé avec jQuery dans wpse-286375-controls.js via :

    component.addControl = function() {
    api.control.add( new api.Control( 'special_page', _.extend(
      {},
      component.defaultParams,
      {       type: 'dropdown-pages',
              section: 'static_front_page',
      }) ) );};
    
  5. Copiez le code suivant de votre projet de travail dans votre fichier customize-controls.js et déboguez-le avec chrome/firefox :

    wp.customize('page_on_front', function( value ) {
              // Listen to value changes.
                       value.bind( function( to ) {
                                var answer = to;
                 });});
    

    Essayez de changer quelque chose dans le contrôle de la page d’accueil et le tour est joué, la liaison fonctionne et dans la réponse var, nous pouvons voir l’ID de la page d’accueil.

  6. Modifiez maintenant l’ID de la page en vedette uniquement :

       wp.customize('special_page', function( value ) {
    // Listen to value changes.
         value.bind( function( to ) {
                  var answer = to;
       });});
    

Essayez de changer quelque chose dans le contrôle de la page en vedette -> Pas de liaison et rien ne se passe !

Catégories : Wordpress

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *