Integração do Formulário de Pesquisa Modal e Prioridade do Arquivo de Termo
A Extensão de Formulário de Pesquisa Modal do SearchWP permite que você integre rápida e facilmente um formulário de pesquisa modal em seu site.
A Extensão de Prioridade de Arquivo de Termo do SearchWP permite incluir links de arquivo de termo de taxonomia nos resultados da pesquisa, quando aplicável.
Por padrão, a Prioridade de Arquivo de Termo não é compatível com o Motor Padrão do SearchWP. Isso ocorre porque o Motor Padrão foi projetado para interagir diretamente com a funcionalidade de pesquisa nativa do WordPress ao exibir os resultados da pesquisa. O WordPress não espera arquivos de termo de taxonomia nos resultados da pesquisa.
Devido a essa limitação, um Motor Suplementar do SearchWP deve ser usado ao configurar a Prioridade de Arquivo de Termo.
Além disso, um Modelo Personalizado de Formulário de Pesquisa Modal também deve ser usado. O modelo padrão de Formulário de Pesquisa Modal está configurado para utilizar o Motor Padrão, mas isso não funcionará devido ao motivo descrito acima.
Configuração
Começaremos instalando e ativando o SearchWP, o Formulário de Pesquisa Modal do SearchWP e a Prioridade de Arquivo de Termo do SearchWP.
O próximo passo é criar e configurar um Motor Suplementar.
Modelo de resultados do Motor Suplementar
Em seguida, seguiremos a documentação sobre a configuração de resultados do Motor Suplementar para finalizar a exibição de nossos resultados de pesquisa.
A documentação para a Prioridade de Arquivo de Termo possui um modelo de resultados suplementar funcional que podemos (e usaremos!) aqui: https://searchwp.com/extensions/term-archive-priority/#gist105037258
Esse modelo de resultados pode ser salvo como um arquivo chamado template-my-searchwp-supplemental.php em seu diretório de tema. Fazer isso o tornará disponível como um Modelo de Página.
Conforme a documentação do Motor Suplementar de resultados, criaremos uma nova Página em nosso site usando o Modelo de Página que acabamos de criar.
Observe que o Template que estamos usando é o que acabamos de criar. Observe também o URL dos resultados, que usaremos nas próximas etapas.
Criando um modelo de Formulário Modal funcional
Com nosso modelo de resultados do Motor Suplementar em vigor e vinculado, o próximo passo é garantir que nosso Formulário Modal esteja configurado para acionar nosso Motor Suplementar e, portanto, Integrar com a Prioridade de Arquivo de Termo.
De forma semelhante à configuração do modelo de resultados do Motor Suplementar, vamos criar um modelo de Formulário Modal baseado no modelo padrão de Formulário Modal conforme a documentação.
Esta etapa é crítica porque atualizará o formulário modal existente que estamos usando para, em vez disso, redirecionar as pesquisas para o modelo de resultados do Motor Suplementar que acabamos de criar.
Usando o modelo padrão existente como ponto de partida, editaremos a marcação do formulário de pesquisa para enviar o formulário modal para nossa página de resultados do Motor Suplementar em vez de acionar uma pesquisa nativa do WordPress.
Nós também precisamos atualizar o name do nosso campo de busca para corresponder ao que o template de resultados do Supplemental Engine espera, neste caso o nomeamos searchwp.
Aqui está o template completo do Modal Form. Preste atenção especial a:
- Linha 11 que aponta para o nosso template de resultados do Supplemental Engine
- Linha 14 que estabelece o
nameda nossa entrada
| <?php | |
| /** | |
| * SearchWP Modal Form Name: Term Archive | |
| */ | |
| // @link https://searchwp.com/documentation/knowledge-base/integrating-modal-search-form-and-term-archive-priority/ | |
| ?> | |
| <div class="searchwp-modal-form-default"> | |
| <div class="searchwp-modal-form__overlay" tabindex="-1" data-searchwp-modal-form-close> | |
| <div class="searchwp-modal-form__container" role="dialog" aria-modal="true"> | |
| <main class="searchwp-modal-form__content"> | |
| <form role="search" method="get" class="search-form" action="/search-results/"> | |
| <label> | |
| <span class="screen-reader-text">Search for:</span> | |
| <input name="searchwp" type="search" class="search-field" placeholder="Search..." value=""> | |
| </label> | |
| <input type="submit" class="search-submit screen-reader-text" value="Search"> | |
| </form> | |
| </main> | |
| <footer class="searchwp-modal-form__footer"> | |
| <button class="searchwp-modal-form__close button" aria-label="Close" data-searchwp-modal-form-close></button> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| <style type="text/css"> | |
| .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| background: rgba(45, 45, 45 ,0.6); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999990; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__container { | |
| width: 100%; | |
| max-width: 500px; | |
| max-height: 100vh; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content { | |
| background-color: #fff; | |
| padding: 2em; | |
| border-radius: 2px; | |
| overflow-y: auto; | |
| box-sizing: border-box; | |
| position: relative; | |
| z-index: 9999998; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form label { | |
| flex: 1; | |
| padding-right: 0.75em; /* This may cause issues depending on your theme styles. */ | |
| /* Some common resets */ | |
| float: none; | |
| margin: 0; | |
| width: auto; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form label input { | |
| display: block; | |
| width: 100%; | |
| margin-left: 0.75em; | |
| /* Some common resets */ | |
| float: none; | |
| margin: 0; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__footer { | |
| padding-top: 1em; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__close { | |
| line-height: 1; | |
| display: block; | |
| margin: 0 auto; | |
| background: transparent; | |
| border: 0; | |
| padding: 0.4em 0.5em; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__close:before { | |
| content: "\00d7"; | |
| font-size: 2em; | |
| } | |
| @keyframes searchwpModalFadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes searchwpModalFadeOut { | |
| from { opacity: 1; } | |
| to { opacity: 0; } | |
| } | |
| @keyframes searchwpModalSlideIn { | |
| from { transform: translateY(15%); } | |
| to { transform: translateY(0); } | |
| } | |
| @keyframes searchwpModalSlideOut { | |
| from { transform: translateY(0); } | |
| to { transform: translateY(-10%); } | |
| } | |
| .searchwp-modal-form { | |
| display: none; | |
| } | |
| .searchwp-modal-form.is-open { | |
| display: block; | |
| } | |
| .searchwp-modal-form[aria-hidden="false"] .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| animation: searchwpModalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="false"] .searchwp-modal-form-default .searchwp-modal-form__container { | |
| animation: searchwpModalSlideIn .3s cubic-bezier(0, 0, .2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="true"] .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| animation: searchwpModalFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="true"] .searchwp-modal-form-default .searchwp-modal-form__container { | |
| animation: searchwpModalSlideOut .3s cubic-bezier(0, 0, .2, 1); | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__container, | |
| .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| will-change: transform; | |
| } | |
| </style> |
O restante do template corresponde ao template padrão e pode ser personalizado como desejar.
Configurando o gatilho do Modal Form
Nesta configuração, usaremos um Item de Menu para acionar nosso Formulário de Busca Modal, certificando-nos de usar o Supplemental Engine que acabamos de criar:
Agora temos nosso gatilho Modal no Menu do nosso site:
Com nosso template Modal Form redirecionando para nossa Página de Resultados Suplementar, que por sua vez foi personalizada para integrar os resultados do Term Archive Priority, agora temos um fluxo de trabalho que permite que um Formulário Modal se integre ao Term Archive Priority! ?
