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

As APIs JavaScript do Cusotmizador do WordPress: Iniciando

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