Como implementar o seletor de íris do WordPress no meu plug-in no front-end?

Esta pergunta aqui está fazendo a mesma pergunta que eu sou, mas não houve respostas adequadas nem uma resposta correta selecionada, por isso estou perguntando novamente, esperando que se pergunte de uma maneira mais coerente que eu possa obter uma resposta.

Eu estou tentando implementar a roda do seletor de cores, como visto no painel da API de personalização de temas do Wordpress, para selecionar cores. Carregar os scripts e estilos funciona bem ao usar o gancho, "admin_enqueue_scripts" funciona, mas, ao tentar carregar esses scripts no front-end usando o gancho, "wp_enqueue_scripts" não funciona. O estilo é enfileirado, mas não o script.

Eu quero evitar copiar arquivos no meu plugin duplicando o que já vem com o Wordpress. Deve haver uma maneira de fazer com que o seletor de cores da íris funcione no front-end que não estou vendo.

E para aqueles que se perguntam por que eu quero fazer isso, estou desenvolvendo um plug-in que adiciona um painel suspenso ao lado da tela que permite que você faça alterações de estilo temporárias em tempo real no site sem precisar fazer login através do wp-admin painel.

Isso me deixou louco por um tempo, mas consegui trabalhar adicionando-os com os argumentos completos que são usados ​​no carregador de scripts de administrador, em vez de apenas fazer referência ao identificador. Quando imprimo o $wp_scriptsglobal no front-end irise wp-color-pickernão consigo encontrar nenhum lugar, apesar de todas as dependências da UI do jQuery funcionarem. De qualquer forma, não tenho certeza se isso está certo, mas ele faz o trabalho:

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 );

Precisamos wp_enqueue_script o script e wp_enqueue_style o estilo com add_action no arquivo functions.php. Basta incluir um arquivo jQuery e um arquivo de folha de estilo por este 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);

Agora crie um novo arquivo javascript como cp-active.js e mantenha-o avobe definido o caminho do arquivo “/js/cp-active.js” usando o código de fole.

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
});

Adicione uma caixa de texto à sua página de configurações com uma classe CSS para o seletor de cores, onde você deseja exibir o texto de entrada. Eu uso "color_code" para entrada $ variável.

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

Obtenha detalhes daqui