web-dev-qa-db-fra.com

Modifier les options de configuration Javascript pour le sélecteur de couleurs Theme Customizer

J'ai commencé à intégrer pleinement l'API de personnalisation de thème Wordpress dans mon thème Wordpress, ce qui est phénoménal. Un problème que j'ai rencontré est qu'inclure le sélecteur de couleur par défaut est génial, mais j'essaie de déterminer comment modifier les options de configuration du sélecteur de couleur Iris utilisé.

Par défaut, le sélecteur de couleur dans le volet Personnalisation du thème comporte une palette de couleurs sous le sélecteur et, à droite, une barre verticale de luminosité. J'aimerais imiter les paramètres que j'utilise au début de mon thème (à l'aide du sélecteur Iris).

Comment puis-je modifier le sélecteur de couleur de personnalisation de thème pour utiliser ces paramètres? Voir ci-dessous les paramètres que j'utilise pour le front-end de mon site pour quelque chose de complètement différent.

   $("#theme-color").wpColorPicker({
        border: false,
        controls: {
            horiz: 's', // horizontal defaults to saturation
            vert: 'l', // vertical defaults to lightness
            strip: 'h' // right strip defaults to hue
        },
        mode: 'hsl',
        palettes: false,
        width: 160,
        change: function(event, ui) {
            var selectedColor = ui.color.toString();

            $.removeCookie('spot_colour');

            // Set our cookie to last for 1 day
            $.cookie('spot_colour', selectedColor, { expires: 1, path: '/' });

            // Apply any selected colours
            applySpotColours();
        }
    });
theme-developmentcustomizationtheme-customizercolor-picker
2
Dwayne Charrington

Le sélecteur de couleur est enregistré en tant que widget jQuery UI. Vous pouvez donc modifier son objet prototype avant que le widget ne soit utilisé dans la page:

add_action('customize_controls_print_footer_scripts', function(){

  ?>
  <script>

    jQuery(document).ready(function($){

      $.wp.wpColorPicker.prototype.options = {

        border: false,
        // other options here...

      };         
    });   

  </script>
  <?php

});

(Vous devriez mettre ça dans votre fichier .js)

2
onetrickpony