web-dev-qa-db-fra.com

WP Customizer définir une valeur via javascript (pour créer des préréglages)

J'essaie de trouver un moyen d'envoyer une valeur entre 2 champs de réglage à l'intérieur du personnalisateur WordPress.

Mon autre objectif est de créer un bouton de préréglage. Je clique sur un bouton à l'intérieur du personnaliseur, qui applique les valeurs pré-créées à tous les autres champs.

Pour faciliter les choses, voici un exemple de base:

J'ai deux champs d'option à l'intérieur du personnaliseur. Lorsque je change la valeur de field 1, je souhaite que field 2 se mette automatiquement à jour avec cette même valeur.

theme-customizer.js

// Field 1
    wp.customize( 'field1', function( value ) {
        value.bind( function( newval ) {
                //no need to make any css changes with this field.
        } );
    } );    

// Field 2
    wp.customize( 'field2', function( value ) {
        value.bind( function( newval ) {
            $('.site-container').css('border-style', newval +'px' );
        } );
    } );

Est-il possible que je puisse mettre à jour la valeur de field2 lorsque l'on clique sur field1?

Par exemple:

// Field 1
    wp.customize( 'field1', function( value ) {
        value.bind( function( newval ) {
                wp.customize.value( 'field2 )(newval);//Setting the new value.
        } );
    } );

Cela fonctionne sur l'aperçu en direct, mais la nouvelle valeur de field2 n'est pas enregistrée lorsque je clique sur Enregistrer. Il semble que la valeur ne soit pas transmise à PHP lorsque vous utilisez:

wp.customize.value( 'field2 )(newval);
javascripttheme-customizer
3
Kevin M

La solution consiste simplement à mettre en file d'attente l'extrait de synchronisation de valeur JS afin qu'il soit ajouté dans le volet de personnalisation (customize.php) à la place de la fenêtre d'aperçu de personnalisation (sur l'interface frontale). En d'autres termes, mettez en file d'attente votre JS à customize_controls_enqueue_scripts au lieu de wp_enqueue_scripts. Voici un extrait:

wp.customize( 'field1', 'field2', function( field1, field2 ) {
    field1.bind( function( value ) {
        field2.set( value );
    } );
} );

Et voici un exemple encore plus succinct qui fait la même chose:

wp.customize( 'field1', 'field2', function( field1, field2 ) {
    field2.link( field1 );
} );

Néanmoins, si vous avez la même valeur stockée dans plusieurs paramètres, pourquoi ne pas simplement réutiliser le même paramètre à plusieurs endroits?

2
Weston Ruter