Sempre que se trata de desenvolver soluções para clientes, haverá momentos em que você provavelmente terá a tarefa de exibir informações nas caixas de diálogo modais do WordPress.
Existem muitas soluções disponíveis para fazer isso e quanto mais familiarizado você estiver com JavaScript, várias bibliotecas e as bibliotecas que elas têm disponíveis, mais difícil (ou talvez até mais fácil) é escolher qual usar.
Mas o WordPress tem uma infraestrutura integrada que torna trivial incorporar funcionalidades ao WordPress. Então, em três posts futuros, vou abordar o seguinte:
- Como incorporar diálogos modais do WordPress usando bibliotecas integradas,
- Preenchendo os diálogos modais com dados,
- Preenchendo a caixa de diálogo modal com dados dinâmicos via Ajax.
Devido à natureza da série, as postagens não serão consecutivas, mas todas usarão uma tag exclusiva que você pode usar para marcar e se referir como uma série quando as postagens forem concluídas.
Com isso dito, vamos falar sobre como incorporar facilmente os diálogos modais do WordPress com bibliotecas integradas.
Diálogos Modais do WordPress, Parte 1
Para começar, suponho que você tenha a base básica de uma página de administração.
Em páginas de plug-in
Ou seja, você tem tudo o que precisa para obter uma configuração de plug-in, ativada e, em seguida, uma página exibida por meio de um menu ou submenu.
Se não, confira este post para ver como começar.
Depois de fazer isso, você precisará da infraestrutura básica para uma página de plug-in. Esta página pode ser usada simplesmente para exibir informações ou pode ser usada tanto para exibir informações quanto para dar ao usuário a capacidade de salvar opções.
Para este tutorial, não estou particularmente interessado em dar ao usuário a capacidade de salvar opções. Em vez disso, precisamos criar uma âncora que exibirá uma caixa de diálogo modal sempre que for clicada.
E os dados que ele conterá serão abordados em um tutorial posterior.
Uma página de plug-in de exemplo
Neste ponto, estou assumindo que você tem uma página de plugin. Uma estrutura básica para isso pode ser assim :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
?>
<div id="acme-thickbox-demo" class="wrap">
<!-- TODO -->
</div><!-- #acme-thickbox-demo -->A partir daí, duas coisas são necessárias:
- incorporando a biblioteca Thickbox
- adicionando uma âncora e um contêiner que exibirá uma caixa de diálogo modal
Para incorporar a biblioteca Thickbox em sua página de plugin, basta adicionar esta tag. Se você estiver seguindo algum padrão de codificação, sua página provavelmente terá um docblock na parte superior da página. É aqui que normalmente adiciono o código.
A função add_thickbox é fornecida pelo WordPress que faz o seguinte:
Enfileira o ThickBox js e css padrão.
Um pouco vago, certo? Tecnicamente, a descrição mais longa é:
ThickBox é um widget de diálogo de interface do usuário de página da Web escrito em JavaScript sobre a biblioteca jQuery. Sua função é mostrar uma única imagem, várias imagens, conteúdo inline, conteúdo iframe ou conteúdo servido por meio de AJAX em um modal híbrido.
E se você estiver interessado na biblioteca Thickbox por conta própria, você pode vê-la nesta página.
Enfim, de volta à página. Agora que estou adicionando-o à minha página de plug-in usando a função da API do WordPress, minha página se parece com isso :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<!-- TODO -->
</div><!-- #acme-thickbox-demo -->Em seguida, a criação da âncora e do elemento para exibição de dados andam de mãos dadas, porque a âncora precisa do ID do elemento que servirá como caixa de diálogo modal.
A âncora precisa das seguintes informações:
- o ID do elemento que exibirá o modal,
- as dimensões da referida caixa de diálogo modal
Para este exemplo, vou configurar uma caixa de diálogo que será exibida em 800×600 pixels e terá o ID de acme-modal-dialog.
Nota: Lembre-se de que é uma boa ideia prefixar seus elementos com algo relacionado ao nome do seu plugin, para que não ocorram conflitos.
Então, vou criar uma âncora que se parece com isso :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="#">Display The Dialog</a>
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->E então eu vou criar um elemento como este :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
<div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->E o código acima é como a versão final da página do plugin ficará assim também. Ao clicar na âncora, uma caixa de diálogo vazia deve aparecer com as dimensões especificadas (ou seja, 800×600 pixels).
Claro, ele estará vazio, pois não exibirá nenhum dado.
Exibindo dados
Na próxima postagem da série, mostrarei como exibir dados no contexto da caixa de diálogo.
É fácil, mas é um bom ponto de partida se você deseja começar a incorporar dados dinâmicos por meio da API REST ou Ajax. Mas vou cobrir isso antes do final deste.