Advertisement
  1. Code
  2. WordPress

APIs JavaScript do Customizador: Painel, Seção e Controle

Scroll to top
Read Time: 5 min
This post is part of a series called The WordPress Customizer JavaScript APIs.
The WordPress Customizer JavaScript APIs: Getting Started
Customizer JavaScript APIs: The Previewer

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

Hoje, resumiremos nossa discussão sobre a API JavaScript no Customizador do WordPress. No último tutorial, preparamos e carregamos dois arquivos JavaScript, customizer-control.js e customizer-preview.js, que nos permitirão interagir com a API JavaScript do back-end do Customizador e o front-end da interface do Pré-visualizador. Então, veja-o antes de continuar com esse tutorial.

Nesse tutorial, focaremos na interface composta pelo back-end do Customizador, Painéis, Configurações e Controles. De novo, se essas três coisas são novas para você, recomendo que veja a série completa: Um Guia para o Customizador de Temas do WordPress.

Interação Básica com a API JavaScript do Customizador

Fora pela API PHP, a qual muitos de vocês são familiares, Painéis, Seções e Controles também são acessíveis pela API do JavaScript. E também podemos modificá-las. Eis alguns exemplos.

Selecionemos um controle, seção ou painel em específico:

Reorganizemos a ordem de visualização.

Mova o controle "Site Title" para, por exemplo, a seção color.

Habilite sua visibilidade.

Podemos até analisar a árvore DOM, que seria algo complicado de fazer no PHP.

Há várias coisas legais que podemos fazer com os Painéis, Seções e Controles com a API JavaScript do Customizador. Usemo-na para melhorar a experiência do usuário.

Habilitando Seções e Controles

Até agora, devemos ter quatro controles no total. Dois controles, o campo "Site Title" e o caixa de seleção "Display Site Title" estão na seção "Site Identity". Os outros dois são seletores de cores. Eles estão na seção "Colors" e configuram as cores do texto e da sobreposição do mouse para "Site Title".

Input Checkbox and Color picker in the Customizer paneInput Checkbox and Color picker in the Customizer paneInput Checkbox and Color picker in the Customizer pane
Nossos quatro controles no Customizador

Nosso plano aqui é mostrar os controles de cor apenas quando a caixa de seleção "Display Site Title" está marcada, uma vez que não faz sentido esses controles se o título não for mostrado.

Além disso, essa abordagem pode ajudar-nos a desobstruir o Customizador ao remover controles, seções e painéis irrelevantes da barra lateral. Se isso é algo que se quer alcançar, saiba que vamos já começar.

Desabilitando o Campo de Controle

Para começar, abra o arquivo customizer-control.js. Adicione essas linhas de código ao evento ready do Customizador:

Aqui, configuramos um apelido para this, que se refere à API JavaScript do Customizador. Então, atrelamos uma função anônima na configuração display_blogname, já que todas as customizações que faremos no Customizador dependerão do valor dela.

Agora, selecionamos o input da configuração "Site Title".

Podemos desabilitá-lo quando a caixa de seleção display_blogname estiver desmarcada.

Como vemos acima, usamos o método .prop() do jQuery para configurar a propriedade disabled o campo. E usamos .get() para obter o valor atual. Por fim, usamos .bind() para observar a mudança do valor e configurar a propriedade disabled de acordo.

Disabled and Enabled input field in customizerDisabled and Enabled input field in customizerDisabled and Enabled input field in customizer
Esquerda: Campo "Site Title" habilitado. Direita: Campo "Site Title" desabilitado. Note a caixa de marcação.

Habilitando Visibilidade

Agora, prosseguiremos com o código que habilita a visibilidade dos seletores de cor de "Site Title". Como planejado, removeremos os seletores quando a caixa de seleção estiver desmarcada e os mostraremos quando marcada.

Para começarmos, agruparemos os IDs dos seletores de cor em um vetor.

E então, iteraremos um função sobre esses IDs e alteraremos a visibilidade deles usando o método .toggle() do jQuery.

A estrutura de código acima é parecida com a anterior, que desabilita o campo. Aqui, selecionamos cada controel do vetor usando o método .control(), como já mostrado nesse tutorial. Depois, temos uma função para modificar o controle usando o método .toggle() do jQuery e executá-lo durante a instanciação da página do Customizador e quando o valor mudar.

Site Title input field is disabled and two color pickers are hiddenSite Title input field is disabled and two color pickers are hiddenSite Title input field is disabled and two color pickers are hidden
Com o campo de marcação "Display Site Title" desmarcado, o campo "Site Title" está acinzentado e os respectivos seletores de cor na seção de Cores estão escondidos.

O Que Vem Depois

Nesse tutorial, mostramos um exemplo simples de como utilizar a API JavaScript do Customizador para aprimorar sua experiência do usuário. E ainda há mais para aprimorá-lo, como remover a seção "colors" caso não haja controles dentro e ajustar a sombra da cor da configuração "Header Text Color: Hover", seguindo o valor da configuração "Header Text Color".

No próximo tutorial, iremos além, com um exemplo um pouco mais complexo. Construiremos uma "ponte" que permitirá o Pré-Visualizador do Customizador interagir com o painel de Controle no back-end. Para quando o usuário clicar, por exemplo, em "Site Title" na Pré-Visualização, o Customização mostrará o respectivo campo para o usuário.

Fique de olho!

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.