Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

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

by
Length:ShortLanguages:
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 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 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 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
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.