Novo WP_Customize API – como funciona sob o capô?

Percebi que, se você fizer alterações através do novo recurso “Personalizar”, quando você navega em uma página diferente no documento de visualização do iframe, suas alterações ainda se aplicam, mesmo que não sejam salvas.

Parece que o WP está armazenando as mudanças temporárias em algum lugar, e as aplica no site se o site for visto no modo “Personalizar”.

Mas como o site sabe que está no modo de personalização? Porque eu não vejo nenhum argumento de consulta anexado aos links ou algo assim.

Solutions Collecting From Web of "Novo WP_Customize API – como funciona sob o capô?"

Existem alguns bits aqui que se aplicam, mas a falta disso é esse código em customize-preview.js :

 this.body.on( 'click.preview', 'a', function( event ) { event.preventDefault(); self.send( 'scroll', 0 ); self.send( 'url', $(this).prop('href') ); }); 

O evento.preventDefault impede que os links realmente funcionem. O seguinte código, em seguida, envia uma mensagem de volta para cima, dizendo para a) rolar de volta para o topo da página e b) alterar a URL.

O motivo da mensagem aqui é porque não há apenas um iframe, há dois. A página que você clicou é realmente carregada dentro de outro iframe com as configurações do personalizador adicionado a ele (por meio de um POST fato), então um efeito de desvanecimento é usado para desaparecer o antigo e desaparecer no novo sem problemas. Isso impede que a canvas fique branca e feia e pisque quando muda para a nova página.

Também elimina a necessidade de fazer filtragem e tal no código do tema e potencialmente modificar o aspecto da página. O tema é exibido como está, sem mudanças significativas no conteúdo do mesmo.

Existe um código semelhante para evitar que a apresentação de formulários funcione de forma alguma (simplesmente não faz nada) e assim por diante.

O filtro para interceptar e manipular os valores do customizer está na class-wp-customize-setting.php . A function preview() adiciona os filtros necessários para lidar com os valores recebidos, a function _preview_filter() é esse filtro. Ele simplesmente leva as get_option() ou get_theme_mod() , avisos quando eles devem ser opções modificadas e retorna os valores modificados.

Você notará que quando você clica em um link na janela de visualização do customizador, a solicitação que é gerada é um pedido POST , em vez de um GET normal. O customizer parece replace qualquer clique de clique e fazer o POST vez disso, com os seguintes dados de formulário:

 wp_customize: on theme: themename customized: {json-encoded-options-here} customize_messenger_channel: preview-1 

O campo personalizado é o que contém as opções que você modificou, de modo que é onde os dados estão sendo transmitidos para o seu tema. O código do personalizador intercepta (por meio de um filtro, não tenho certeza qual exatamente) as opções do seu tema quando solicitado e os substitui pelos valores no parâmetro personalizado .