Come posso implementare il selettore di Iris di WordPress nel mio plugin sul front-end?

Questa domanda qui sta ponendo la mia stessa domanda, ma non c'erano risposte adeguate né una risposta corretta selezionata, quindi sto chiedendo di nuovo sperando che se faccio in modo più coerente potrei ottenere una risposta.

Sto cercando di implementare la rotella di selezione colore come si vede nel riquadro API di personalizzazione del tema Wordpress per la selezione dei colori. Il caricamento degli script e degli stili funziona correttamente quando si utilizza l'hook, "admin_enqueue_scripts" funziona comunque cercando di caricare questi script sul front-end utilizzando l'hook, "wp_enqueue_scripts" non funziona. Lo stile viene accodato, ma non la sceneggiatura.

Voglio evitare di copiare i file nel mio plug-in duplicando ciò che è già in bundle con Wordpress. Ci deve essere un modo per far funzionare il selettore di colori dell'iride sul front-end che non vedo.

E per coloro che si chiedono perché voglio farlo, sto sviluppando un plug-in che aggiunge un pannello a scomparsa sul lato dello schermo che consente di apportare modifiche di stile temporanee in tempo reale al sito senza dover accedere tramite wp-admin pannello.

Questo mi ha fatto impazzire per un po ', ma l'ho fatto funzionare aggiungendoli con gli argomenti completi che vengono utilizzati nel caricatore degli script di amministrazione anziché fare semplicemente riferimento all'handle. Quando stampo il $wp_scriptsglobale sul front-end irise wp-color-pickernon si trova da nessuna parte, sebbene tutte le dipendenze dell'interfaccia utente jQuery funzionino. Comunque, non sono sicuro che sia giusto, ma fa il lavoro:

function wpa82718_scripts() {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script(
        'iris',
        admin_url( 'js/iris.min.js' ),
        array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
        false,
        1
    );
    wp_enqueue_script(
        'wp-color-picker',
        admin_url( 'js/color-picker.min.js' ),
        array( 'iris' ),
        false,
        1
    );
    $colorpicker_l10n = array(
        'clear' => __( 'Clear' ),
        'defaultString' => __( 'Default' ),
        'pick' => __( 'Select Color' ),
        'current' => __( 'Current Color' ),
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}
add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );

Dobbiamo wp_enqueue_script lo script e wp_enqueue_style lo stile con add_action al file Functions.php. Basta includere un file jQuery e un file di foglio di stile con questo script.

// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', custom_color_picker_scripts);

Ora crea un nuovo file javascript come cp-active.js e mantieni il percorso del file "/js/cp-active.js" definito da avobe usando il codice a soffietto.

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

Aggiungi una casella di testo alla tua pagina delle impostazioni con una classe CSS per il selettore colore, in cui desideri distribuire il testo di input. Ho usato "color_code" per input $ variabile.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

Ottieni dettagli da qui