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

APIs JavaScript do Customizer: O Pré-visualizador

by
Difficulty:IntermediateLength: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)

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 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 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 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 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
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.