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ê:
- Como um item de menu
- Usando um shortcode
- Como um bloco Gutenberg
- 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:
- Crie uma pasta chamada
searchwp-modal-formdentro do seu tema - Crie um arquivo dentro dessa pasta chamada
template.php(ou qualquer nome que termine em.php) - Copie o conteúdo do modelo padrão para esse arquivo
- Personalize o valor do
SearchWP Modal Form Nameno bloco de comentários do cabeçalho - 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.