Integre a caixa de diálogo modal usando o ThickBox integrado no WordPress

Os diálogos modais às vezes precisam necessariamente se integrar a um site WordPress. Usando a caixa de diálogo modal, podemos exibir o conteúdo no topo da página atual.

Quando se trata de pop-up modal, normalmente as pessoas preferem usar a biblioteca Lightbox ou Fancybox. Estas são as bibliotecas populares e funcionam muito bem.

Para incluir essas bibliotecas no WordPress, temos que baixar os arquivos JS e CSS de uma biblioteca e incluí-la no projeto pela forma padrão. Depois disso, conforme a documentação da biblioteca, precisamos quebrar o conteúdo, chamar o método para abrir a janela modal.

O WordPress incluiu o plugin ThickBox jQuery com versão modificada em seu núcleo. E pode ser usado no lugar de bibliotecas externas. Usando esse recurso central, obtemos a interface que é igual aos popups modais no administrador do WordPress, como no botão de mídia.

Você pode experimentar este recurso embutido. Se atender às suas necessidades, economiza tempo de integração da biblioteca externa.

Usando ThickBox com conteúdo embutido, você obterá a saída como mostrado na imagem abaixo.

Caixa de diálogo modal usando ThickBox

WordPress ThickBox funciona bem com o conteúdo embutido. Pode-se usar shortcode também na caixa de diálogo modal. Como exemplo, você pode mostrar o formulário de contato na janela modal usando o código curto do formulário de contato 7.

Dito isso, vamos ver como usar o ThickBox no WordPress.

Por exemplo, estamos exibindo conteúdo embutido fictício com o clique da tag âncora. Portanto, coloque o código abaixo onde quiser usar o ThickBox.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

Para usar o Thichbox, precisamos incluir o primeiro add_ThickBox()método. Esta função carrega a biblioteca do núcleo. Em seguida, no atributo href na tag âncora, temos que passar #TB_inline junto com a largura, altura e id de um contêiner no qual nosso conteúdo embutido é empacotado.

Da mesma forma, se você precisar exibir o formulário de contato na caixa de diálogo modal, então, em vez de um conteúdo fictício, você precisa colocar o shortcode usando a do_shortcode()função do WordPress.

<?php echo do_shortcode('[shortcode_here]'); ?>

É isso! Esperamos que você entenda como adicionar caixa de diálogo modal usando ThickBox no WordPress. Gostaríamos de ouvir sua opinião no comentário abaixo.

Você também pode gostar de ler nossos artigos Redirecionar para agradecer a página após envio do formulário de contato 7 e como salvar o formulário de contato 7 envios para o banco de dados do WordPress