3 maneiras de criar um ótimo formulário de pesquisa personalizado para WordPress

O WordPress é o sistema de gerenciamento de conteúdo (CMS) mais popular do mundo. Além de ser uma ferramenta poderosa e super flexível, também é extremamente fácil de usar. Pessoas sem experiência em web design ou codificação podem usar o WordPress para iniciar seu site em poucos minutos.

Os usuários visitarão seu site WordPress para pesquisar o conteúdo em que estão interessados. Uma barra de pesquisa pode ajudá-los a fazer isso. Se o seu site não tiver um, será difícil para as pessoas encontrarem o conteúdo que procuram. Essa frustração resulta em pessoas saindo do seu site e indo para outro lugar.

Isso não vai dar!

Neste artigo, mostraremos como integrar um formulário de pesquisa personalizado do WordPress em seu site.

• O que é um formulário de pesquisa personalizado do WordPress?
• #1 Aplique um plugin
• #2 Modificar código
• #3 Use CSS personalizado para estilizar o formulário de pesquisa e a página de resultados

O que é um formulário de pesquisa personalizado do WordPress?

O WordPress já possui uma função de pesquisa nativa incorporada. No entanto, a ferramenta de pesquisa padrão é bastante limitada e não é muito “inteligente”. Nem sempre encontra o conteúdo que você deseja procurar.

A função de pesquisa padrão do WordPress é suficiente para páginas da Web novas ou de pequena escala que não possuem muito conteúdo.

Mas à medida que seu banco de dados de conteúdo cresce, a instalação de uma ferramenta de pesquisa melhor é importante para ajudar os visitantes a navegar em seu site. Se você administra um site de comércio eletrônico, uma boa ferramenta de pesquisa é ainda mais importante. Ajuda a direcionar clientes em potencial para os produtos certos para eles.

Você também pode querer que sua ferramenta de pesquisa exiba os resultados em uma determinada ordem. Por exemplo, os artigos ou itens mais populares primeiro. A ferramenta de pesquisa padrão não permite que você faça isso. Em vez disso, você terá que editar o algoritmo de pesquisa manualmente.

Por último, mas não menos importante, uma ferramenta de pesquisa personalizada pode ser estilizada para refletir a estética ou a marca do seu site!

O que é a função get_search_form?

get_search_form refere-se a uma função que exibe o formulário de pesquisa em seu site. Você pode encontrá-lo na guia Aparência > Widgets no painel de administração do WordPress.

Ele controla o widget do formulário de pesquisa e qualquer outra página do seu site que precise de uma função de pesquisa. Sem essa função, seu site é tão bom quanto não ter uma ferramenta de pesquisa.

Como personalizar o formulário de pesquisa no WordPress

Existem muitas abordagens diferentes que você pode usar para personalizar o formulário de pesquisa no WordPress. Depende do seu nível de habilidade de codificação e quanto tempo você está disposto a gastar nessa tarefa.

#1 Aplique um plugin

Um plug-in é a maneira mais fácil e rápida de obter um formulário de pesquisa personalizado do WordPress instalado e funcionando em seu site. O Ivory Search, por exemplo, é um plug-in gratuito criado especificamente para aprimorar a função da ferramenta de pesquisa do WordPress. Você pode adicionar e editar novos formulários de pesquisa e realizar diferentes tipos de pesquisas.

Além disso, com códigos de acesso, você pode posicionar a barra de pesquisa em qualquer lugar do site (como no cabeçalho, rodapé, barra de menu etc.).

É uma ferramenta simples que recomendamos se você não tiver muita experiência em codificação. Embora não seja tão versátil quanto codificar uma ferramenta de pesquisa, deve ser suficiente para uso básico.

#2 Modificar código

Há duas maneiras de criar um formulário de pesquisa do zero diretamente nos arquivos principais .php do seu site WordPress: com uma função ou com um modelo.

Com uma função

Você pode substituir a ferramenta de pesquisa padrão do WordPress por uma personalizada usando o gancho add_filter . Em seu arquivo functions.php , adicione o seguinte código à pilha:

 function custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Procurar:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'. esc_attr__( 'Search' ) .'" />
</div>
</form>';
retornar $formulário;
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

O que esse código faz é armazenar seu formulário personalizado na variável $form , que substituirá a ferramenta de pesquisa padrão do WordPress graças ao gancho add_filter .

Você pode personalizar ainda mais o código acima editando rótulos, textos, IDs e outros elementos no valor da variável $form .

Com um modelo

Se você não quiser modificar o arquivo functions.php , uma alternativa é usar um modelo para o formulário de pesquisa. Crie um formulário de pesquisa personalizado do WordPress e adicione-o como searchform.php em seu diretório principal. O WordPress usará automaticamente o formulário de pesquisa personalizado em vez do padrão.

Para fazer isso, abra o IDE de sua escolha e crie um novo arquivo. Nomeie-o como “searchform.php” . Cole o seguinte código no editor:

 <?php
/* Formulário de pesquisa personalizado */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="grupo de entrada">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</form>

Modifique o código acima conforme sua preferência!

#3 Use CSS personalizado para estilizar o formulário de pesquisa e a página de resultados

Agora que você colocou sua função de pesquisa personalizada em funcionamento, a próxima parte é estilizá-la. A aparência padrão é muito chata com as caixas de texto brancas em fontes Sans Serif comuns.

Se você quiser mudar isso, sua melhor aposta é através de algumas linhas de código CSS.

Este modelo de código CSS é compatível com a grande maioria dos temas do WordPress. Basta copiá-lo e colá-lo através do painel de administração do WordPress.

 .Formulário de pesquisa {
font-family:arial;
tamanho da fonte: 16px;
plano de fundo:#ace5e3;
cor:#ffffff;
borda:1px sólido #61c3c0;
preenchimento: 10px;
altura: 90px;
largura: 600px;
}

.Procurar Resultados {
font-family:arial;
tamanho da fonte: 16px;
plano de fundo:#ace5e3;
cor:#000000;
borda:1px sólido #61c3c0;
preenchimento: 10px;
largura: 600px;
}

Modifique as variáveis ​​dentro do código ao seu gosto. Você pode escolher a fonte, tamanho da fonte, cor de fundo, borda e assim por diante. Se houver algum elemento no código que você não deseja alterar, simplesmente exclua essa linha.

Por exemplo, se você não deseja alterar a família de fontes do seu formulário de pesquisa, simplesmente exclua o “font-family:arial;” linha.

Crie seu próprio formulário de pesquisa WordPress personalizado hoje!

A maioria das pessoas pode sobreviver com um simples formulário de pesquisa gerado por um plug-in. Mas se você for um pouco mais adepto da codificação e quiser integrar recursos avançados ao formulário de pesquisa do seu site, os modelos de código acima podem ser úteis.

Um formulário de pesquisa personalizado do WordPress é um recurso bastante simples, mas super eficaz para tornar seu site mais amigável. Uma pesquisa de formulário por função de campo personalizado do WordPress pode ajudá-lo a atrair mais visitantes, convertê-los em clientes regulares e, se você executar um site de comércio eletrônico, em clientes pagos.

Você pode aprender mais sobre como adicionar uma pesquisa inteligente de produtos WooCommerce aqui.

Esperamos que este guia tenha sido útil e que você já tenha seu formulário de pesquisa personalizado funcionando quando ler isto!