Busca ao Vivo
O Live Search não requer o SearchWP, mas o utilizará se estiver disponível.
Live Search é um recurso poderoso fornecido pelo SearchWP que exibe resultados de pesquisa em tempo real, alimentados por AJAX, em um contêiner suspenso enquanto os usuários digitam palavras-chave em um formulário de pesquisa. Ele aprimora a experiência do usuário, fornecendo feedback instantâneo, ajudando os visitantes a encontrar rapidamente o conteúdo que procuram.
O Live Search não requer o SearchWP, portanto, está disponível no wordpress.org. Se você tiver o SearchWP instalado e ativado, o Live Search o utilizará automaticamente. Se não tiver, os resultados de pesquisa nativos do WordPress serão fornecidos.
Você pode configurar e personalizar como os resultados da pesquisa ao vivo aparecem navegando para: SearchWP → Formulários de Pesquisa → Live Search no backend do WordPress.
Há uma variedade de opções para controlar o design, layout e comportamento dos resultados da pesquisa ao vivo. Abaixo está uma explicação detalhada das opções de personalização disponíveis:
1. Geral
Ativar Live Search: Uma vez que a extensão Live Search esteja instalada e ativa, a pesquisa ao vivo do SearchWP se integra automaticamente ao formulário de pesquisa padrão do WordPress e aos formulários do SearchWP. Você pode usar esta opção de alternância para ativar ou desativar esta funcionalidade.
2. Escolha um Tema de Layout
Esta seção permite que você selecione como seus resultados de pesquisa ao vivo serão estilizados no painel suspenso abaixo do formulário de pesquisa. Cada tema de layout oferece um nível diferente de detalhe e apresentação visual.
Temas de Layout Disponíveis:
- Mínimo Uma lista limpa e simples que exibe apenas os títulos das postagens. Ideal para sites que preferem uma experiência de pesquisa rápida e baseada em texto.
- Médio Exibe o título e uma breve descrição para cada resultado de pesquisa. Esta opção oferece mais contexto aos usuários sem sobrecarregá-los.
- Rico Um layout visualmente atraente que inclui uma miniatura para exibir a imagem em destaque da postagem, juntamente com o título e a descrição de cada resultado. Perfeito para sites com muito conteúdo, como blogs ou lojas de comércio eletrônico.
- Personalizado Este layout permite flexibilidade total. Você pode projetar um formato de resultado personalizado combinando diferentes elementos usando a seção Estilização Personalizada descrita abaixo.
3. Estilização Personalizada
A seção Estilização Personalizada permite que você ajuste componentes individuais de cada resultado de pesquisa ao vivo.
Descrição: Uma opção de alternância que permite mostrar ou ocultar a descrição abaixo do título do resultado. Ative esta opção se desejar fornecer mais informações sobre cada resultado aos usuários.
Dica: Você pode ativar a opção Destacar Termos nas configurações do SearchWP para gerar uma descrição personalizada contendo o termo de pesquisa para cada resultado.
Imagem: Controle o tamanho da imagem exibida nos resultados. As opções disponíveis incluem: pequena, média ou grande.
Título: Personalize a cor do texto do título e o tamanho da fonte para corresponder ao design do seu site e melhorar a legibilidade.
Preço: Esta opção fica visível apenas quando um plugin de eCommerce como WooCommerce ou Easy Digital Downloads está ativo. Você pode ajustar a cor e o tamanho da fonte do preço do produto exibido nos resultados.
Adicionar ao Carrinho: Também disponível apenas com um plugin de eCommerce ativo, esta configuração adiciona um botão “Adicionar ao Carrinho” a cada resultado de produto. Você pode personalizar a estilização, como cor de fundo, cor da fonte e tamanho da fonte do botão. Esta opção é perfeita para lojas que desejam otimizar o processo de compra diretamente do dropdown de pesquisa ao vivo.
4. Resultados
Incluir Estilos: A opção Incluir Estilos controla se os ativos de CSS e layout padrão do SearchWP para o dropdown de Pesquisa ao Vivo são carregados em suas páginas. Esses arquivos de ativos são responsáveis por aplicar estilos padrão aos resultados da pesquisa e posicionar corretamente o contêiner do dropdown abaixo ou acima do formulário de pesquisa. Alterar esta opção é recomendado apenas para usuários avançados que se sentem confortáveis em aplicar estilos e códigos personalizados.
Posicionamento: Escolha se os resultados devem aparecer acima ou abaixo do formulário de pesquisa. O comportamento padrão é mostrar o dropdown abaixo do campo de entrada.
Largura Automática: Ative este alternador se desejar que o dropdown de resultados corresponda à largura do formulário de pesquisa. Desativá-lo permite que o contêiner siga sua própria estilização ou largura padrão.
Máximo de Resultados: Esta opção define o número máximo de resultados exibidos no dropdown ao vivo. O valor padrão é 7. Você pode usar um número específico (por exemplo, 5 ou 10) para limitar o número de resultados visíveis ou definir como -1 para exibir todos os resultados correspondentes.
Mensagem de Sem Resultados: Personalize a mensagem exibida quando nenhuma correspondência for encontrada. O texto padrão é “Nenhum resultado encontrado.”. No entanto, você também pode usar um prompt amigável como “Procuramos em todos os lugares, mas não encontramos. Tente pesquisar outra coisa”. para melhorar a experiência do usuário.
5. Configurações Diversas
Comprimento Mínimo de Caracteres: Defina o número mínimo de caracteres que um usuário deve digitar antes que os resultados da pesquisa ao vivo sejam exibidos.
Observação: Por padrão, o SearchWP indexa palavras-chave com um comprimento mínimo de 3 caracteres. Se você deseja permitir pesquisas com 1 ou 2 caracteres, deve ativar a opção “Remover Comprimento Mínimo” nas configurações principais do SearchWP. Após ativá-la, certifique-se de reconstruir o índice nas configurações do motor para que os novos tokens (palavras mais curtas) possam ser incluídos nos resultados da pesquisa.
Dicas Adicionais
- Para mais controle visual com estilos avançados, você pode adicionar CSS personalizado em sua Planilha de Estilos do Tema ou em Aparência → Personalizar → CSS Adicional.
- A Pesquisa ao Vivo é compatível com Formulários de Pesquisa. Você pode usar um formulário de dropdown de categoria ou opções no Formulário de Pesquisa Avançada para filtrar os resultados da pesquisa ao vivo.
- Se você quiser personalizar o layout dos resultados da pesquisa em tempo real ou exibir informações adicionais, você pode criar um modelo de pesquisa em tempo real personalizado em seu tema. Para instruções detalhadas, consulte este documento.
Uso
Após o upload e ativação do Live Search, qualquer formulário gerado usando get_search_form() será automaticamente aprimorado com a pesquisa em tempo real usando a configuração padrão. O mecanismo de pesquisa padrão do SearchWP será usado (ou a pesquisa nativa do WordPress se o SearchWP não estiver disponível) e o tema padrão será aplicado. Você pode personalizar tudo em grande medida, no entanto.
Se você não estiver usando get_search_form(), você pode simplesmente adicionar um atributo data para habilitar a pesquisa em tempo real, assim:
Se você quiser impedir que o SearchWP habilite automaticamente a pesquisa em tempo real em formulários gerados com get_search_form(), use o filtro searchwp_live_search_hijack_get_search_form.
Para exibir resultados em tempo real apenas em formulários selecionados, você pode desabilitar a pesquisa em tempo real nas configurações e, em seguida, usar o seguinte script JS para ativar a pesquisa em tempo real em formulários específicos:
| <script> | |
| jQuery(document).ready( function(){ | |
| jQuery("form input[type='search']").searchwp_live_search(); | |
| }); | |
| </script> |
No código acima, você pode substituir o seletor form input[type='search'] pelo elemento seletor de entrada específico para o seu formulário.
Personalizando o mecanismo de pesquisa e a configuração usada por formulário de pesquisa
Você pode personalizar o mecanismo de pesquisa usado definindo o atributo data-swpengine em seu campo de entrada para corresponder ao nome do mecanismo de pesquisa que você deseja usar. Isso se aplica apenas quando o SearchWP está instalado e ativado, e tem precedência sobre o engine definido na configuração aplicável.
Você pode personalizar a configuração usada por formulário de pesquisa definindo o atributo data-swpconfig em sua entrada para corresponder a uma chave de array do array de configurações. Para personalizar isso, use o filtro searchwp_live_search_configs.
Personalizando os resultados
Os resultados do Live Search são alimentados por um sistema de modelos. Você notará que há um arquivo que acompanha o plugin: ~/wp-content/plugins/searchwp-live-ajax-search/templates/live-search-results.php. Este arquivo é usado para exibir os resultados da pesquisa. É recomendado que, se você desejar personalizar os resultados da pesquisa, siga estas etapas:
- Crie uma pasta dentro do diretório do seu tema chamada
searchwp-live-ajax-search - Copie
live-search-results.phpdo diretório~/wp-content/plugins/searchwp-live-ajax-search/templates/para essa pasta - Personalize a cópia do seu tema de
live-search-results.phpcomo faria com qualquer modelo de tema - Opcionalmente, crie arquivos adicionais para cada mecanismo de pesquisa, por exemplo,
live-search-results-supplemental.phppara um mecanismo de pesquisa chamadosupplemental
Posicionamento
O Live Search gera alguns estilos básicos para posicionar corretamente o wrapper de resultados. Ele também gera um tema padrão e minimalista. Você pode remover a estilização visual padrão, mantendo o posicionamento, desativando o CSS do tema padrão:
Nota importante
OBSERVAÇÃO: O tema padrão também implementa a animação de spinner. Se você estiver removendo o tema padrão, precisará adicionar a animação keyframe abaixo ao CSS do seu tema.
Se você também quiser remover o CSS de posicionamento, pode fazer isso usando o filtro searchwp_live_search_base_styles.
Você pode reposicionar o contêiner de resultados de duas maneiras:
- Anexe um atributo de dados à sua entrada de formulário contendo o seletor do elemento pai
data-swpparentel=".masthead .my-search-results-parent" - Adicione uma propriedade
parent_elà configuração (vejasearchwp_live_search_configs)
Filtros
Os seguintes filtros estão disponíveis para uso na Pesquisa Instantânea:
searchwp_live_search_hijack_get_search_form Define se a Pesquisa Instantânea aprimorará automaticamente os formulários de pesquisa gerados por get_search_form(). O padrão é true, para desativar:
| <?php | |
| add_filter( 'searchwp_live_search_hijack_get_search_form', '__return_false' ); |
searchwp_live_search_get_search_form_engine Define o mecanismo de pesquisa a ser usado ao habilitar automaticamente a pesquisa instantânea em formulários gerados por get_search_form(). O padrão é 'default'.
Observação: aplicável apenas com SearchWP instalado e ativado
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_engine() { | |
| return 'my_supplemental_engine'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_engine', 'my_searchwp_live_search_get_search_form_engine' ); |
searchwp_live_search_get_search_form_config Define a configuração a ser usada ao habilitar automaticamente a pesquisa instantânea em formulários gerados por get_search_form(). O padrão é 'default'.
Observação: aplicável apenas com SearchWP instalado e ativado
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_config)() { | |
| return 'my_config'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_config', 'my_searchwp_live_search_get_search_form_config' ); |
searchwp_live_search_configs Adicione suas próprias configurações, que controlam as configurações do mecanismo de pesquisa a ser usado, o atraso da pesquisa, o número mínimo de caracteres, o posicionamento do painel de resultados e as opções do spinner. As configurações são armazenadas como um array associativo, portanto, você pode opcionalmente substituir os valores na chave default, ou adicionar os seus e usá-los ao definir o atributo data-swpconfig em sua entrada de pesquisa.
Esta é a configuração padrão:
Observação: o padrão de caractere mínimo é 3 (que é o mesmo que o próprio SearchWP), mas as configurações para a Pesquisa Instantânea são parâmetros separados e não são atualizadas quando parâmetros semelhantes do SearchWP foram personalizados.
| <?php | |
| $configs = array( | |
| 'default' => array( // 'default' config | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 500, // wait 500ms before triggering a search | |
| 'min_chars' => 3, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ) | |
| ); |
Você pode alterar os valores desses padrões ou adicionar suas próprias configurações separadas e ter várias configurações disponíveis para você:
| <?php | |
| function my_searchwp_live_search_configs( $configs ) { | |
| // override some defaults | |
| $configs['default'] = array( | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 400, // wait 500ms before triggering a search | |
| 'min_chars' => 5, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| // add an additional config called 'my_config' | |
| $configs['my_config'] = array( | |
| 'engine' => 'supplemental', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 300, // wait 500ms before triggering a search | |
| 'min_chars' => 2, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'results' => array( | |
| 'position' => 'top', // where to position the results (bottom|top) | |
| 'width' => 'css', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 0 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| return $configs; | |
| } | |
| add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' ); |
searchwp_live_search_base_styles Define se o CSS de posicionamento padrão do painel de resultados é aplicado. OBSERVAÇÃO: isso é separado da aparência visual dos resultados da pesquisa e controla apenas o posicionamento. O padrão é true, para desativar:
| <?php | |
| add_filter( 'searchwp_live_search_base_styles', '__return_false' ); |
searchwp_live_search_posts_per_page Controle quantos resultados são retornados. O padrão é 7, para alterar:
| <?php | |
| function my_searchwp_live_search_posts_per_page() { | |
| return 20; // return 20 results | |
| } | |
| add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' ); |
