SearchWP Modal Search Form

Descrição

Use o SearchWP Modal Search Form para integrar facilmente um formulário de pesquisa modal acessível e leve ao seu site WordPress! O SearchWP Modal Search Form não requer o SearchWP, mas usará o SearchWP se ele estiver instalado e ativado! 👍

Além das informações disponíveis neste README, há a documentação completa também.

O que torna ele diferente de outros modais?

A filosofia do SearchWP Modal Search Form é facilitar a implementação de formulários de pesquisa modal acessíveis e leves, mas, talvez ainda mais importante, fazer com que a experiência do desenvolvedor (e do usuário) seja fantástica.

O SearchWP Modal Search Form se integra diretamente ao WordPress na forma como você o utiliza, e o tema padrão do formulário modal se baseia nos estilos implementados pelo seu tema ativo, tornando a sobrecarga a menor possível. Há também um carregador de modelos completo integrado, permitindo que você personalize totalmente o SearchWP Modal Search Form com o mínimo de problemas.

Confira o modelo padrão para ver como é fácil personalizar 🤓

Adicionando formulários modais ao seu site

O SearchWP Modal Search Form facilita a implementação de formulários de pesquisa modal em qualquer lugar do seu site WordPress. Os seguintes métodos estão integrados e disponíveis para você:

1. Como um item de menu
2. Usando um shortcode
3. Como um bloco Gutenberg
4. Dentro do(s) seu(s) modelo(s) programaticamente

Personalização de modelo

O SearchWP Modal Search Form integra um carregador de modelos adequado para exibir formulários de pesquisa em qualquer número de modelos, permitindo que você personalize totalmente a aparência do modal por modelo.

A maneira mais direta de criar um modelo personalizado é a seguinte:

1. Crie uma pasta chamada searchwp-modal-form dentro do seu tema
2. Crie um arquivo dentro dessa pasta chamada template.php (ou qualquer nome que termine em .php)
3. Copie o conteúdo do modelo padrão para esse arquivo
4. Personalize o valor do SearchWP Modal Form Name no bloco de comentários do cabeçalho
5. Faça quaisquer outras personalizações que desejar na marcação/estilo, prestando atenção à documentação

Há eventos (jQuery) que são acionados quando os modais são abertos e fechados. O jQuery não é uma dependência, mas se o jQuery for carregado, os eventos serão acionados.

// Add a callback when a modal is opened:
jQuery('body').on('searchwpModalOnShow', function(e) {
    // Focus an input in the template.
    e.el.find('input').focus();
});

// Add a callback when a modal is closed:
jQuery('body').on('searchwpModalOnClose', function(e) {
    alert('Modal closed!');
});

Acesse a documentação completa do modelo para obter informações mais detalhadas.