Como faço para implementar o seletor WordPress Iris no meu plugin no front-end?

Question

Como faço para implementar o seletor WordPress Iris no meu plugin no front-end?

#1 resposta do Milo (15 votos)
#2 resposta do csehasib (3 votos)

10

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

Estou tentando implementar a roda do seletor de cores, conforme visto no painel da API de personalização do tema do Wordpress, para selecionar cores. Carregando os scripts e estilos funciona bem quando usando o gancho, "admin_enqueue_scripts" funciona no entanto tentando 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 em meu plugin duplicando o que já vem junto com o Wordpress. Deve haver uma maneira de fazer o seletor de cores Iris funcionar no front-end que não estou vendo.

E para os que se perguntam por que quero fazer isso, estou desenvolvendo um plug-in que adiciona um painel suspenso na lateral da tela que permite fazer alterações de estilo temporário em tempo real no site sem precisar fazer login por meio do painel wp-admin.

wp-enqueue-script hooks theme-customizer color-picker

por Dwayne Charrington 23.01.2013 / 03:40

2 respostas

3

Precisamos wp_enqueue_script o script e wp_enqueue_style o estilo com add_action para o arquivo functions.php. Basta incluir um arquivo jQuery e um arquivo de folha de estilo por este script.

// Register Scripts &amp; 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 definido como caminho de arquivo "/js/cp-active.js" usando o código de foles.

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 usei "color_code" para a variável $ input.

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

Obtenha detalhes aqui

por csehasib 16.03.2015 / 06:00

Tags wp-enqueue-script hooks theme-customizer color-picker

Verificar o nome de usuário correto no formulário de login personalizado Por que o style.css não está sendo enfileirado?

score 15 · Accepted Answer

Isso me deixa louco por um tempo, mas eu tenho que trabalhar adicionando-os com os argumentos completos que são usados no carregador de script de administração, em vez de apenas referenciar o identificador. Quando imprimo o $wp_scripts global no front-end, iris e wp-color-picker não são encontrados em nenhuma parte, embora todas as dependências da UI do jQuery funcionem. De qualquer forma, não tenho certeza se isso está certo, mas o trabalho é feito:

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