18 dez

WordPress 3.5: Novo color picker

Categoria: - Comentários (3)

Olá pessoal!

Depois de algum tempo afastada do blog, cá estou, para dar continuidade ao projeto wpmidia.lab. E pra retomar, vamos falar sobre a nova versão do WordPress, mais precisamente sobre algumas novidades.

Como todos nós sabemos, o WordPress 3.5 foi lançado em 11 de dezembro passado e veio com um ar mais clean, muito mais leve e com algumas novidades bacanas pra quem trabalha com o sistema.

Uma das novidades é o novo Color Picker! Trata-se do Iris, um script totalmente desenvolvido pela Automattic, que foi inicialmente desenvolvido para o sistema do WordPress.com e agora foi incluído no sistema do WordPress.org também, como pode ser visto no post original aqui. Ele usa gradientes CSS3 e por isso já está pronto para telas de alta definição.

WordPress-theme-customizer-color-picker

Este novo Color Picker poderá ser utilizado na área de customização de temas, mas também é facilmente utilizável em plugins ou outros temas. Quer aprender como utilizá-lo? Eu vou te ensinar!

1) Primeiro nós temos que carregar o script wp-color-picker e seus estilos

Como sempre, nós vamos precisar utilizar nosso amigo functions.php para incluir nosso código ou se você estiver criando um plugin, utilize a sua estrutura.

No meu exemplo, tenho um plugin que tem um arquivo de scripts chamado meus-scripts.js onde eu declaro o wp-color-picker como dependência. Nós agora podemos usar o método jQuery, wpColorPicker dentro desse arquivo.

2) Adicionando um campo input na sua página administrativa

Um pequeno exemplo prático de como adicionar uma página ao painel administrativo do WordPress:

Note que na função custom_menu_page() eu incluo o campo input do color picker.

Você também pode definir uma cor padrão para o campo:

3) “Chamando” o método wpColorPicker no seu arquivo js

Você se lembra do arquivo meus-scripts.js que falei acima? Então abra-o e coloque o seguinte código javascript:

Ahhh! Uma observação importante! Só vai funcionar em navegadores modernos e somente o IE8 e mais recentes vão conseguir executar este script. Navegadores mais antigos irão falhar :-(

4) Um pouco mais avançado

O wpColorPicker possui poucas opções configuráveis.

Se quiser algo ainda mais avançado, o Iris está disponível no GitHub da Automattic: https://github.com/automattic/Iris

Esta foi apenas uma das muitas novidades da nova versão do WordPress. Em breve estarei escrevendo mais sobre essas novidades e ensinando como utilizá-las (quando for o caso).

Espero que tenham gostado do post. Se ele foi útil, não esqueça de curtir e compartilhar!

Até a próxima pessoal! :-)

Comentários ( 3 )

  • Thiago

    Que coisa feia, chupinhando conteúdo dessa forma. Lamentável.
    Podia pelo menos colocar a referência.

    http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

    • wpmidia

      Olá Thiago! Se você usa óculos, creio que precisa trocar as lentes. Caso contrário, acho que precisa consultar um oftalmologista.

      O post não foi uma “chupinhada” de conteúdo não! Foi apenas uma tradução do original, cujo link para o post original está no meio do texto, como qualquer um pode ver aqui …..

      A Automattic foi extremamente mencionada no meu post, com link para o site deles e inclusive para o projeto do Iris!

      Como qualquer um pode ver aqui …. só você que não viu e preferiu criticar o trabalho dos outros……

      Lamentável isso.

  • Olá Mirian, muito legal seu blog, peguei várias dicas aqui, eu proponho você fazer uma área restrita no seu site e cobrar por dicas avançadas onde os inscritos poderiam propor aulas fazer perguntas e trocar idéias sobre nossa paixão por WP eu pagaria na boa, pense nisso, que 2013 seja um ano cheio de inovação e felicidade

Envie seu comentário

Resize-me!