Advertisement
  1. Code
  2. WordPress

APIs JavaScript do Customizer: O Pré-visualizador

Scroll to top
Read Time: 4 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)

Assumamos que construímos um tema com algumas configurações e controles do Customizador que os usuários customizar várias coisas do front-end fo tema, como o título do site, slogan e cor.

Contudo, alguns dos usuários podem não saber que podem customizar essas áreas do tema, especialmente se elas estiverem enterradas em vários painéis e seções. Então, como agilizar o processo de customização de um tema?

WordPress.com adicionou recentemente botões a algumas áreas editáveis, que são notáveis imediatamente após abrir o Customizador. Quando o usuário clica nesses botões, ele mostrará o respectivo controle.

Two Edit buttons in WordPresscom CustomizerTwo Edit buttons in WordPresscom CustomizerTwo Edit buttons in WordPresscom Customizer
O novo botão "Editar" do pré-visualizador do Customizador no WordPress.com.

É um aprimoramento legal que também podemos ter, usando a API JavaScript do Customizador em nosso tema. E não é tão complicado quanto aparenta ser. Então, vejamos como ele funciona.

Pré-requisitos

No tutorial passado, criamos o arquivo customizer-control.js, que afeta as interfaces backend do Customizador Nesse tutorial, usaremos outro arquivo, customizer-preview.js, que será carregado na janela de visualização. Devemos ter esses dois arquivos criados e carregados. Caso contrário, sugerimos que siga o primeiro tutorial dessa série antes de continuar.

Criando um Botão Editar

Primeiro, adicionaremos botões Editar próximo ao Título do Site.

Usando is_customizer_preview(), esse botão será visto apenas na Pré-visualização do Customizador. A cada um dos botões é atribuído .customizer-edit, que nos permitirá selecioná-los e vincular o evento click.

Além do mais, também adicionamos aos botões um atributo data-control contendo o nome ou id da configuração registrada no Customizador. O nome nesse atributo ajudará a determinar a configuração e controle apropriados que nos servirão mais tarde.

An example of using the data-control attributeAn example of using the data-control attributeAn example of using the data-control attribute
Dois botões de editar para customizar o título e sua cor.

Como apresentação não é nossa preocupação principal agora, os dois botões "Editar" na prévisualização não são tão bonitos quanto os do WordPress.com. Podemos adicionar estilos que casem com o design do tema como um todo.

Definindo Eventos Customizados

Agora, definiremos um evento customizado que diz que um dos botões foi clicado. Adicionemos o código a seguir em customizer-preview.js.

O código vincula cada um dos botões a um evento click, usando o método .preview.send() para lançar um evento. O método .preview.send() leva dois parâmetro, o nome do evento customizado e seu argumento. Em nosso caso, definimos um evento chamado preview-edit e passamos um argumento com os dados do atributo data-control do botão.

Observando o Evento Customizado

Podemos observar um evento lançado pelo método .preview.send() através do método .previewer.bind() do Customizador—note o er de previewer. Ele é um método similar ao .on() do jQuery, em que definimos o nome de um evento ao qual observaremos e uma função que será executada quando o evento é ativado. Adicione .previewer.bind() no customizer-control.js, assim:

Agora, transformamos os dados passados em no formato JSON, selecionamos um elemento de controle usando name dos dados, e focamos no elemento de controle, usando o método .focus() do Customizador.

Como vemos abaixo, ao clicar, por exemplo, no botão "Edit Text", ele mostrar a configuração "Site Title" e focará o cursos no campo.

Updating the site titleUpdating the site titleUpdating the site title
O botão de editar em ação.

Além do mais, se espionarmos o código, o método .focus() aceita um parâmetro chamado completeCallback. Esse parâmetro é executado após o método .focus() ser executado. Podemos usar esse parâmetro, por exemplo, para adicionar uma animação.

A experiência como um todo parece mais viva, agora.

The final version of the experienceThe final version of the experienceThe final version of the experience
Campo aprimorado com animação CSS

Resumindo

Mencionamos várias APIs JavaScript do Customizador

  • .preview.send() para lançar um evento customizado
  • .previewer.bind() para vincular o Customizador a um evento customizado
  • .focus() para focar no campo do controle e também o parâmetro completeCallback.

Nesse tutorial, usamos métodos para permitir os usuários do tema editar o título do site, bem rápido, clicando no botão "Edit Text" na pré-visualização.

Ainda falta um botão para vincular o controle de cores. Mas ele será um desafio. Use os mesmos três métodos para criar a função "Edit Color". Em caso de dúvidas, dê uma olhada no código fonte.

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.