Formulário de Pesquisa Modal
O Formulário de Pesquisa Modal não requer SearchWP, mas o utilizará se estiver disponível
A extensão Search Model Form permite exibir um formulário de pesquisa em uma janela modal (popup) acionada por um botão ou ícone em seu site. Isso oferece uma experiência de pesquisa elegante e sem distrações para os usuários.
Projetado para se integrar a qualquer tema e qualquer configuração do SearchWP, o Formulário Modal é a maneira mais fácil de adicionar um formulário de pesquisa com ótima aparência ao seu site.
O Formulário de Pesquisa Modal não requer SearchWP, portanto, está disponível no wordpress.org e funcionará com qualquer site WordPress. Se você tiver o SearchWP instalado e ativado, o Formulário Modal o utilizará automaticamente. Caso contrário, os resultados de pesquisa nativos do WordPress serão fornecidos.
Quando a extensão estiver ativa, você poderá acessar as configurações do Formulário Modal na aba Formulários de Pesquisa > Modelo de Pesquisa.
1. Habilitar Formulário Modal
Um alternador para habilitar ou desabilitar a funcionalidade do formulário modal do SearchWP em seu site.
2. Formulário de Pesquisa
Esta opção permite escolher qual formulário de pesquisa exibir dentro do popup modal. Você pode selecionar um Formulário SearchWP personalizado na lista suspensa para exibir no popup. Se nenhum formulário personalizado for selecionado, o formulário de pesquisa padrão do WordPress será usado.
Observação: Se você escolher um mecanismo personalizado em seu shortcode modal ou item de menu, ele substituirá o mecanismo selecionado nas configurações do Formulário de Pesquisa.
3. Incluir Estilização
O formulário modal carrega um CSS específico para incluir estilização personalizada para o carregamento do popup. Ao escolher a opção apropriada, você pode carregar estilos de posicionamento ou visuais para o popup. Observe que, se você escolher a opção Sem Estilização, nenhum CSS do formulário modal será carregado. Você precisará aplicar sua própria estilização. Esta opção é recomendada apenas para usuários avançados.
4. Modo Tela Cheia
Por padrão, o popup modal é carregado em um contêiner de largura fixa. Quando o modo de tela cheia é habilitado, o formulário modal se expande para ocupar toda a largura e altura da tela.
5. Desabilitar Rolagem de Fundo
Habilitar esta opção desativará a funcionalidade de rolagem no fundo quando o popup modal estiver aberto. Isso ajuda a evitar que os usuários interajam com o conteúdo da página atrás do modal.
O que o diferencia?
A filosofia por trás do Formulário de Pesquisa Modal do SearchWP é facilitar a implementação de formulários de pesquisa modais acessíveis e leves, mas talvez ainda mais importante, proporcionar uma ótima experiência para o desenvolvedor (e para o usuário).
O Formulário de Pesquisa Modal do SearchWP se integra diretamente ao WordPress da maneira como você o utiliza, e o tema padrão do formulário modal se baseia nos estilos definidos pelo seu tema ativo, tornando a sobrecarga o menor possível. Há também um carregador de template completo integrado, permitindo que você personalize completamente seu Formulário de Pesquisa Modal do SearchWP com o mínimo de esforço.
Confira o template padrão como um exemplo de como é fácil personalizar.
Uso
O SearchWP Modal Search Form facilita a implementação de formulários de pesquisa modais em qualquer lugar do seu site WordPress. Para implementar qualquer modal, você precisa de (1) um gatilho e (2) o próprio modal.
Com este plugin, implementar ambas as partes é extremamente fácil! Os seguintes métodos são integrados e estão disponíveis para você:
- Como um Item de Menu
- Usando um Shortcode
- Como um Bloco Gutenberg
- Dentro do(s) seu(s) template(s) programaticamente (código)
Você pode adicionar qualquer número de modais de formulário de pesquisa ao seu site, cada um usando seu próprio template e opções de configuração (por exemplo, engine SearchWP).
Modal de formulário de pesquisa como Item de Menu
Adicionar um formulário de pesquisa à navegação principal do seu site é uma ótima ideia, e o SearchWP Modal Search Form facilita a adição em apenas um momento.
O plugin adiciona um novo grupo disponível para você ao editar seus Menus existentes. Se você criou um template de modal personalizado em seu tema, ele será exibido neste grupo.
Uma vez adicionados, você pode tratar os Itens de Menu do SearchWP Modal Search Form como qualquer outro Item de Menu, incluindo personalizações adicionais que você desejar implementar.
Nas configurações do menu, você tem a opção de exibir um rótulo ou um ícone para acionar o formulário modal.
Modal de formulário de pesquisa com Shortcode
Se preferir, você pode usar um Shortcode para gerar um gatilho de formulário modal que, ao ser clicado, exibirá seu modal de formulário de pesquisa.
[searchwp_modal_search_form]
Você pode aplicar personalizações adicionais que controlam vários atributos do gatilho e do próprio modal, por exemplo:
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Abrir Pesquisa" type="button"]
O que renderiza assim:
Os atributos de Shortcode disponíveis são os seguintes:
engine O nome do engine SearchWP a ser usado (aplica-se apenas se o SearchWP estiver ativo)
template O nome do template modal, por favor, consulte a documentação de templates
text Controla o texto do gatilho
type Define o tipo de gatilho, que pode ser um link <a/> ou um <button/>
Usando esses atributos, você pode personalizar completamente tanto o gatilho quanto o template modal em uso.
Modal de formulário de pesquisa com bloco Gutenberg
O SearchWP Modal Search Form oferece a opção de inserir um formulário de pesquisa modal usando um bloco Gutenberg, se desejar:
Usando o painel Propriedades do Bloco, você pode personalizar vários atributos do bloco, incluindo:
Texto Controla o texto do gatilho
Engine O name do motor SearchWP a ser usado (aplica-se apenas se o SearchWP estiver ativo)
Template O nome do template modal, por favor, veja a documentação de templates
Type Define o tipo de gatilho, que pode ser um link <a/> ou um <button/>
Alterar qualquer uma das Propriedades do Bloco permitirá que você veja como o gatilho ficará em tempo real.
Modal de formulário de pesquisa programático
Você tem a opção de inserir diretamente um Formulário Modal SearchWP em seus templates de tema em qualquer lugar que desejar, usando a seguinte sintaxe:
Há uma série de argumentos que podem ser passados como um array ao chamar searchwp_modal_form_trigger():
Você pode implementar qualquer número de Formulários de Pesquisa Modal SearchWP em seu site, cada um com seus próprios argumentos de configuração (ou compartilhando os mesmos!)
Personalizando e criando templates modais
O Formulário de Pesquisa Modal SearchWP vem com um carregador de templates, permitindo que você personalize (e crie) facilmente os templates disponíveis. Os Templates de Formulário Modal SearchWP abrangem o conteúdo e o estilo do próprio modal, não do gatilho.
Os gatilhos do Formulário de Pesquisa Modal SearchWP herdam estilos do seu tema ativo e podem ser personalizados adicionando qualquer CSS personalizado que você desejar.
Importante: Ao personalizar ou criar templates de Formulário Modal SearchWP, você deve criar uma pasta dentro do seu tema (Filho) intitulada searchwp-modal-form, que conterá todos os seus templates personalizados que não serão sobrescritos quando o plugin for atualizado.
Os templates de Formulário de Pesquisa Modal SearchWP são baseados em arquivos e coletados verificando os seguintes diretórios:
~/wp-content/plugins/searchwp-modal-form/templates/*.php(não edite estes, eles serão sobrescritos em atualizações subsequentes do plugin!)~/wp-content/themes/seu-tema-filho/searchwp-modal-form/*.php(se aplicável)~/wp-content/themes/seu-tema/searchwp-modal-form/*.php
Para que um Template de Formulário Modal SearchWP seja incluído, ele deve ter o seguinte bloco de comentário de cabeçalho:
/**
* SearchWP Modal Form Name: My Custom Template
*/
Isso define o nome do template modal, que é usado ao definir o template a ser usado ao inserir um gatilho de formulário modal. É sugerido que quaisquer templates personalizados que você crie tenham um nome exclusivo, para que sejam facilmente identificáveis.
Você deve usar o template padrão como ponto de partida ao personalizar ou criar templates modais. Ele é totalmente documentado para sua referência.
Hooks
Os seguintes hooks foram disponibilizados para você personalizar o comportamento do Formulário Modal SearchWP:
searchwp_modal_form_template_dir Personalize o nome da pasta usada para armazenar seus templates personalizados (o padrão é searchwp-modal-form)
| <?php | |
| add_filter( 'searchwp_modal_form_template_dir', function( $dir ) { | |
| return 'my-searchwp-modal-forms'; | |
| } ); |
Notas do desenvolvedor
Há um processo de build para todos os bundles JavaScript contidos em um único comando:
npm run watch
Isso executará quatro processos simultâneos que monitoram alterações de arquivos e, subsequentemente, geram o seguinte:
- Versão de produção do pacote SearchWP Modal Search Form
- Versão de desenvolvimento do pacote SearchWP Modal Search Form
- Versão de produção do bloco SearchWP Modal Search Form
- Versão de desenvolvimento do bloco SearchWP Modal Search Form
Você pode executar cada processo individualmente, se preferir:
