Advertisement
  1. Code
  2. WordPress

As APIs JavaScript do Cusotmizador do WordPress: Iniciando

Scroll to top
Read Time: 5 min
This post is part of a series called The WordPress Customizer JavaScript APIs.
Customizer JavaScript APIs: Panel, Section, and Control

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O Customizador do WordPress é desenvolvido, ativamente, desde o começo. As APIs continuaram evoluindo, incluindo as JavaScript. Contudo, é uma das APIs menos documentadas no Codex do WordPress. Assim, existem poucos locais que mostram como lançar mão da API JavaScript de forma prática.

Usar a API JavaScript no Customizador do WordPress pode permitir-nos servir uma experiência em tempo real mais atrativa ao customizar temas além de mostrar a mudança do Controle na Pré-visualização.

Talvez já seja familiar com o uso da API JavaScript do Customizador para mostrar as mudanças ao vivo, na Pré-visualização. Para tanto, configuramos o valor de postMessage para transport e adicionamos o código JavaScript correspondente:

Contudo, podemos ir mais além, por exemplo, escondendo, mostrando ou movendo Seções, Painéis e Controles, alterando valores de configuração com base em outros e interconectado a pré-visualização com interações do controle. E são esses que veremos nesse tutorial.

O Básico Bem Rápido

Já cobrimos o Customizador do WordPress extensivamente com varios artigos e algumas séries sobre tudo de suas APIs.

Acreditamos que já sabe o conceito do Customizador do WordPress, bem como os componentes como o Painel, Seção, Configuração e Controle. Caso contrário, recomendo que passe algum tempo em nossos tutoriais e cursos em vídeo sobre o assunto, antes de continuar.

As Configurações e Controles

Para começar, examinaremos as "Configurações" e "Controles" do Customizador que adicionamos para esse tutorial. Também veremos o código que os coloca no lugar.

The Settings and ControlsThe Settings and ControlsThe Settings and Controls

Nesse tutorial, focaremos no "Título do Site". E, como podemos ver acima, temos dois controles: o campo "Site Title" nativo do WordPress e nossa caixa de seleção para habilitar ou desabilitar "Site Title". Esses dois controles residem na seção "Site Identity". E no lado direito da imagen está a pré-visualização, onde podemos ver o "Site Title" sendo renderizado.

Além disso, como vemos abaixo, também temos dois controles que residem na seção Cores para alterar a cor de "Site Title" e da cor de seu estado hover.

Header Text Color and Hover ColorHeader Text Color and Hover ColorHeader Text Color and Hover Color

O Código Por Trás

Nosso tema aqui é baseado no Underscores, que possui todos os códigos relacionados ao Customizado localizado no arquivo /inc/customizer.php.

Como vemos acima, fizemos alguma modificações no código, aderindo às necessidades do tutorial.

  • Resuzimos a configuração do WordPress, blogdescription, para 12 para que a caixa de marcação da configuração display_blogname, apareça abaixo do campo "Site Title".
  • Nós criamos um novo controle chamado display_blogname. Configuramos priority para 11 que, em nosso caso, reside entre os campos de "Site Title" e "Tagline".
  • Configuramos a cor padrão de header_text para #f44336 e o tipo de transport para postMessage.
  • Criamos uma nova configuração, header_text_color. E configuramos priority em 11 para aparecer logo abaixo da configuração header_textcolor.

Todas isso é configurado com postMessage ao invés de refresh. A opção postMessage permite que o valor seja transportado assícronamente e mostrado no pré-visualizado em tempo real. Contudo, também temos de criar nosso próprio JavaScript para manipular a mudança.

Carregando JavaScript

Precisamos criar dois arquivos JavaScript: customizer-preview.js, para lidar com o pré-visualizador e o customizer-control.js para lidar com os controles dentro do painel do Customizador.

Dentro de customizer-preview.js está o código a seguir:

É uma função auto-executável do JavaScript vazia. Discutiremos como pré-visualizar as mudanças no próximo tutorial dessa série.

O outro arquivo, customizer-control.js, deverá ter esse código:

Como visto acima, envolveremos o código desse arquivo no evento ready do Customizador. Isso garantirá que tudo do Customizador está carregado, incluindo as configurações, painéis e controles, antes de começarmos com qualquer customização.

Por fim, assim que adicionarmos o código, carregaremos esses arquivos em dois locais diferentes.

O customizer-preview.js será carregado dentro do Pré-visualizador do Customizado através do gancho de Ação customize_preview_init. O customizer-control.js será carregado no backend do Customizador, onde os elementos de configuração e controle são acessíveis através do gancho de Ação customize_controls_enqueue_scripts.

O Que Vem Depois?

O WordPress tem investido bastante no PHP desde os primórdios. Assim, não seria uma surpresa que a maioria dos desenvolvedores que suportam o ecosistema são mais proficientes e familiares com as APIs do PHP que do JavaScript.

Faz pouco tempo que JavaScript foi integrado extensivamente, com o Customizador e a WP-API. Entender as APIs do JavaScript no Customizador do JavaScript pode ser bem desafiador. Como já mencionado, é a parte menos documentada do WordPress. Assim, veremos o assunto, cuidadosamente.

Enquanto isso, se estiver em busca de outros utilitários para ajudá-lo a aumentar seu ferramental para WordPress ou código para estudar e tonrar-se mais versado no WordPress, não esqueça de olhar o que há de disponível na Envato Market.

Aqui, preparamos os elementos base para trabalhar com as APIs JavaScript do WordPress. E pararemos por aqui. Na próxima parte, descobriremos mais coisas da API JavaScript do WordPress e criaremos scripts funcionais que podemos implementar, imediatamente, em nossos temas.

Fique ligado!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.