Autosugestão de pesquisa fácil no WordPress - Tutorial
Publicados: 2022-04-10Criar uma barra de pesquisa com autosuggest no WordPress é surpreendentemente fácil, rápido e gratuito. Aqui está o nosso tutorial sobre como fazê-lo.
Por que você deveria dedicar um tempo para adicionar a Pesquisa Automática ao WordPress? Em primeiro lugar, você economizará tempo. Os visitantes do seu blog vão adorar mais porque facilita a vida deles ao fornecer acesso fácil às informações que eles procuram no conforto do seu site. Há uma razão pela qual o Google e outras ferramentas de busca orientadas à informação usam esse tipo de recurso.
Nota: A pesquisa automática no WordPress também pode ser chamada de " pesquisa ajax ao vivo ". Além disso, como o WooCommerce usa o mesmo banco de dados que o WP e os produtos são simplesmente um tipo de postagem personalizado, este tutorial também funcionará para o popular plug-in de comércio eletrônico.
O que você precisará
Você precisará de um gerenciador de trecho de código, a capacidade de copiar e colar e o plug-in Live Search (gratuito no repositório).
Devemos observar o seguinte: qualquer formulário que use <?php get_search_form() ?> , funcionará automaticamente com esta solução e não precisará das próximas duas etapas. Basta pular para esta seção se você escolher essa rota.
No entanto, esse não é o caso de muitos temas, construtores de páginas e outras ferramentas. Elementor e Oxygen não usam esse formulário integrado oferecido pelo WordPress (para que seus usuários possam estilizá-los facilmente em termos de tamanho, fonte e cor). Portanto, para obter uma barra de pesquisa com preenchimento automático no Elementor, Oxygen, na maioria dos outros construtores de páginas e em muitos temas, siga as etapas descritas abaixo.
Mesmo se você adicioná-lo via PHP, como ilustrado acima, sem qualquer CSS, você ficará com um formulário de pesquisa sem estilo. No entanto - se você tiver acesso aos seus arquivos/modelos de tema, esta é uma maneira viável de obter um formulário de pesquisa em seu site. Isso usará a marcação padrão do WordPress, para que você possa ajustar o CSS abaixo.
Preferimos o método a seguir, pois você pode editar o estilo e as classes, adicionar elementos especiais, enviar usuários para endpoints de pesquisa personalizados e muito mais - você está construindo isso do zero.
O PHP
Primeiro, vamos construir este formulário de pesquisa. Você pode adicionar entradas adicionais, classes CSS, espaços reservados e muito mais. Se você mantiver o código exatamente como está, o CSS associado funcionará junto com o HTML. Dependendo de como você está criando um site, você pode simplesmente colar isso na estrutura real do modelo onde deseja que uma barra de pesquisa de preenchimento automático termine OU vá para a rota 2.
O Route 2 é provavelmente o que a maioria dos proprietários de sites usará. Em vez de usar esse HTML e PHP bruto, vamos convertê-lo em um shortcode que o torna muito mais compatível com o WordPress. Dessa forma, você pode colá-lo no Gutenberg, em qualquer construtor de páginas que desejar e muito mais. Há algumas maneiras de fazer isto; detalharemos um método fácil, mas pago, e um método mais difícil, porém mais fácil.
Forma paga (fácil)
Pegue o Scripts Orginizer, um plugin premium do WordPress que facilita o gerenciamento do código em seu site WordPress (revisão). Após a instalação, vá para Organizador de Scripts -> Importar, encontrado no menu de administração da barra lateral.
Baixe este arquivo (uma exportação de tudo mencionado abaixo), importe-o e pule para pegar o código de acesso.
Uma vez na seção CSS customizada, pule para a seção parcial do SCRG, baixe esse JSON, importe, instale o plug-in de pesquisa ao vivo e esteja em funcionamento.
Você também pode seguir as etapas manuais. Para começar, crie uma nova entrada:
Agora, execute o seguinte:
- Dê-lhe um título
- Ativar chave de bloco de código: ativado
- Localização do script: Shortcode
- Copie/cole o código PHP/HTML acima.
- Mantenha todas as outras configurações padrão e clique em publicar
Deve ficar assim quando terminar ️.
Pegue o shortcode que será exibido na entrada do script no canto inferior esquerdo do editor de código ou na página de listagem do snippet de código:
Pegue este shortcode e insira-o em qualquer lugar com Gutenberg, TINYMCE, Elementor Shortcode Widget ou qualquer outro método específico de shortcode.
Elemento de código de acesso Gutenberg 
Widget de código de acesso Elementor
Agora vá para a etapa dois e adicione o CSS ao seu site.
Free Way (um pouco mais difícil)
Instale o plugin gratuito de trechos de código. Faça o download do seguinte snippet de código e importe-o para o seu site:
Esse arquivo também pode ser importado para Advanced Scripts (essencialmente uma versão premium e mais fácil de Code Snippets) e até mesmo para o Scripts Organizer.
Em seguida, adicione a pesquisa usando o seguinte shortcode em seu frontend:
Independentemente de como você adiciona a pesquisa, se você usar o HTML e o PHP subjacentes desta seção, o CSS na próxima seção fornecerá um estilo agradável.
O CSS
Se você mantiver a estrutura e as classes intactas, basta adicionar esse CSS personalizado ao seu site para obter um formulário de pesquisa bem estilizado com o recurso de preenchimento automático.
Nota: este código não é compatível com o método <?php get_search_form() ?> de inserção de uma barra de pesquisa. No entanto, dependendo do seu tema, inserir um formulário de pesquisa dessa maneira significa que ele herdará os estilos do seu tema.
Você pode adicionar este CSS ao seu utilitário de construtores de páginas, via Aparência -> Personalizar -> CSS Adicional ou usando SCORG.
Sugerimos o SCORG. Adicione uma nova parcial CSS, cole o código e publique-o (ou importe este arquivo). Navegue até o Shortcode Snippet criado na etapa anterior, vá para a seção "SCSS Partials Manager" e selecione show , procure o título desse parcial e selecione-o. Atualizar isso. Agora, onde quer que você coloque o shortcode, o CSS também será carregado. Ele só carregará onde o código de acesso estiver, não globalmente , o que é ótimo para o desempenho.
Agora, tudo o que precisamos é o Molho Mágico.
O molho mágico (SearchWP Live Ajax Search)
Este é um plugin incrível feito pela equipe por trás do conjunto de plugins SearchWP. É gratuito e está no repositório do WordPress. Em vez de estruturas de código complexas, podemos instalar isso e obter uma pesquisa ao vivo em menos de um minuto.
Uma vez instalado, clique no formulário de pesquisa que você inseriu com shortcode, código bruto ou um que está usando a inserção PHP nativa do WordPress e você deverá ver o seguinte comportamento:
É isso, você está feito! Desfrute de um formulário de pesquisa em seu site WordPress que preencherá automaticamente as pesquisas do usuário usando a tecnologia AJAX.
Expanda esta pesquisa ao vivo no WordPress
SearchWP Live Ajax Search é um plugin gratuito que permite fazer como o nome sugere: adicionar Live Ajax Search. Funcionará com ou sem a coleção premium do SearchWP e extensões associadas. Se você não estiver usando o SearchWP, ele usará o mecanismo de pesquisa padrão do WP.
A pesquisa padrão do WordPress classifica por relevância (no passado, não - selvagem!) olhando para o título de uma postagem e, em seguida, para o conteúdo. Mas isso ainda é Elementor, e existem opções melhores por aí. Na verdade, escrevemos outro artigo discutindo melhores alternativas, que você pode ler aqui: Better Search Solutions For WordPress
No entanto, como o Live Search é feito pelo Search WP, ele usará automaticamente esse mecanismo se instalado. O Search WP é superior, pois inclui derivação de palavras-chave, correspondências mais precisas, indexação de documentos, suporte para WooCommerce, personalização de algoritmos e muito mais. Sugerimos fortemente que você crie sua pesquisa ao vivo e use os outros recursos do plug-in premium para oferecer resultados de pesquisa ainda melhores.
Se você está procurando uma alternativa ao SearchWP, o Ivory Search é um plugin de baixo custo que oferece recursos semelhantes e um LTD! Este plugin Live Search (WP Search Autocomplete) deve funcionar imediatamente com o Ivory Search. Você também pode usar outros mecanismos de pesquisa; De acordo com os documentos, tudo o que você precisa fazer é:
Adicione o seguinte atributo à
Perguntas frequentes sobre listageminputdo formulário:data-swpengine="supplemental"substituindo 'supplemental' pelo nome do mecanismo de pesquisa desejado.
Ainda mais fácil com oxigênio
Não é nenhum segredo que amamos o Oxygen Builder, então aqui está uma maneira ainda mais fácil de adicionar AJAX Live Search (autocomplete) com essa ferramenta.
Nota: Este tutorial e plug-in não funcionará com o widget de formulário de pesquisa Oxygen, porque, conforme mencionado em uma seção anterior, ele não usa o método PHP padrão de inserção de um formulário de pesquisa, nem inclui o atributo de dados necessário.
Passos fáceis:
- Adicione o bloco de código onde quiser no formulário de pesquisa, cole no PHP encontrado abaixo (ou cole os shortcodes de hidrogênio que farão o bloco de código automaticamente).
- Adicione o CSS encontrado abaixo ao Oxygen Global CSS, altere como quiser (principalmente cores).
- Instale e ative o plugin Live Search, gratuito no repositório aqui.
- Deleite-se com a glória da pesquisa ao vivo.
Como podemos colocar o PHP diretamente em templates e páginas com o Page Builder, podemos simplesmente colar o seguinte PHP em um bloco de código, adicionar o CSS por meio de configurações globais e encerrar a noite (certifique-se de ter adicionado o plugin de pesquisa ao vivo, encontrado aqui).
Você também pode copiar/colar os seguintes Shortcodes de Hidrogênio (se você tiver o Hydrogen Pack (revisado aqui)).
Basta clicar em copiar, instalar o Hydrogen e colar na sua página. CSS será incluído no bloco de código.
Por fim, use o CSS (retirado de cima):
Sugerimos inserir este CSS via CSS Global da Oxygen.
Veja como deve ficar o resultado final:
Se você quiser reutilizar esta parte, você também pode simplesmente transformá-la em uma parte reutilizável. Contanto que você tenha o plugin Live Search instalado, você deve estar pronto para usar uma boa barra de pesquisa AJAX para seus visitantes.
<?php get_search_form() ?>
Ou, apenas use o código acima se você não precisar de personalização avançada (incluindo, mas não se limitando a soluções de pesquisa melhores do que a pesquisa principal do WP). Claro, como podemos usar códigos de acesso neste construtor de páginas, você também pode seguir a metade superior deste tutorial, que o orientará na criação de um código de acesso para uso no front-end do seu site.
Conclusão
Em 2022, é mais importante do que nunca oferecer aos usuários uma ótima experiência e as ferramentas necessárias para acessar o conteúdo que desejam. Este artigo apresentou vários métodos de instalação da pesquisa Ajax ao vivo do WordPress em um site em menos de 15 minutos.
Existem vários métodos descritos aqui para que você possa optar por usá-lo em arquivos de modelo de tema, gerar códigos de acesso compatíveis com construtores de páginas e incorporar ainda mais métodos. O plugin usado para obter a funcionalidade de pesquisa ao vivo é totalmente gratuito e bem projetado.
Alguma pergunta? Sinta-se à vontade para deixá-los na seção de comentários abaixo.