Como adicionar um formulário de pesquisa em um post do WordPress

Deseja adicionar um formulário de pesquisa a um post do WordPress?

Ao adicionar uma barra de pesquisa ao conteúdo do seu post, você pode ajudar os visitantes a encontrar mais conteúdo excelente e mantê-los no seu site por mais tempo.

Neste artigo, mostraremos como adicionar um formulário de pesquisa a um post do WordPress.

Por que adicionar um formulário de pesquisa aos seus posts e páginas?

Se os visitantes gostarem de uma publicação em seu site WordPress, é provável que queiram ler mais. Ao adicionar um formulário de pesquisa a uma postagem, você pode ajudar os visitantes a encontrar mais blogs que estejam interessados em ler.

Dessa forma, você pode aumentar suas visualizações de página e reduzir sua taxa de rejeição.

Quanto mais tempo os visitantes permanecerem no seu site, maior será a chance de eles se inscreverem na sua lista de e-mails, deixarem um comentário, fazerem uma compra, seguirem você nas mídias sociais ou realizarem outras ações positivas.

Neste guia, mostraremos como adicionar o formulário de pesquisa padrão do WordPress às suas postagens. Se, em vez disso, você quiser usar um formulário personalizado, consulte nosso guia passo a passo sobre como criar um formulário de pesquisa personalizado do WordPress.

Dito isso, vamos dar uma olhada em como adicionar facilmente um formulário de pesquisa em um post do WordPress. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar:

Método 1. Adicionar um formulário de pesquisa em um post do WordPress (funciona com qualquer tema)

A maneira mais simples de adicionar um formulário de pesquisa às suas postagens é usar o bloco Search incorporado.

Neste guia, mostraremos como adicionar o bloco a um post, mas você também pode adicioná-lo a qualquer página ou área pronta para widgets do seu site.

Para começar, basta abrir a página em que você deseja adicionar um formulário de pesquisa. No editor de conteúdo do WordPress, clique no ícone +.

Na janela pop-up, digite “Search” (Pesquisar). Quando o bloco certo aparecer, clique para adicioná-lo à página.

Por padrão, o bloco usa “Search” (Pesquisar) tanto para o rótulo quanto para o texto do botão. Esse texto ficará visível para os visitantes, portanto, talvez você queira substituí-lo por algo mais descritivo.

Por exemplo, se estiver adicionando a barra de pesquisa a um blog do WordPress, talvez queira usar “Search recent blog posts” ou algo semelhante.

Você pode até mesmo usar o rótulo e o texto do botão para motivar seus visitantes.

Por exemplo, se você criou uma loja on-line usando um plug-in como o WooCommerce, poderá usar algo como “Find more great deals” (Encontre mais ofertas excelentes) ou “Search for similar offers” (Procure ofertas semelhantes).

Você também pode adicionar um texto de espaço reservado. Esse texto desaparecerá automaticamente quando o visitante começar a digitar.

Para adicionar um espaço reservado, basta clicar em “Espaço reservado opcional…” e começar a digitar.

Por padrão, o WordPress usará seu tema para estilizar a barra de pesquisa.

No entanto, você pode alterar a cor do fundo e do texto do botão usando as configurações de “Cor” no menu à direita. Isso pode ajudar sua barra de pesquisa a se destacar do restante do site.

Quando estiver satisfeito com a aparência do bloco Search, você poderá publicar ou atualizar a postagem. Se você visitar seu site, verá a barra de pesquisa dentro do conteúdo do post.

Você pode adicionar um formulário de pesquisa a mais posts e páginas do WordPress seguindo o mesmo processo acima. Para obter instruções detalhadas sobre como adicionar a barra de pesquisa a uma barra lateral ou seção semelhante, consulte nosso guia sobre como adicionar e usar widgets no WordPress.

Método 2. Adicionar um formulário de pesquisa a todos os posts do WordPress(temas baseados em blocos)

Se estiver usando um tema baseado em blocos, como o ThemeIsle Hestia Pro, você poderá adicionar uma barra de pesquisa ao modelo que o WordPress usa para todas as publicações do blog.

Dessa forma, você pode adicionar de forma rápida e fácil uma barra de pesquisa a cada post de blog em todo o seu site WordPress.

Para abrir o editor de site completo, vá para Temas “ Editor no painel do WordPress.

Por padrão, o editor de site completo mostra o modelo inicial do seu tema.

Para ver todas as opções disponíveis, selecione “Templates” no menu à esquerda.

Isso mostra uma lista de todos os modelos que compõem seu tema do WordPress.

Para personalizar o modelo do blog, clique em ‘Single’.

O WordPress agora mostrará uma visualização do layout do blog.

Para prosseguir e editar esse modelo, clique no pequeno ícone de lápis.

Agora você verá esse modelo no editor de site completo.

Para adicionar uma barra de pesquisa, clique no ícone azul “+”.

Na janela pop-up exibida, digite “Search” para localizar o bloco correto.

Agora você pode arrastar o bloco para o local onde deseja exibir a barra de pesquisa.

Para personalizar o título do bloco ou o texto do espaço reservado, basta digitar a nova mensagem no bloco de pesquisa.

Quando estiver satisfeito com a aparência do bloco, clique em “Salvar” para ativar a barra de pesquisa.

Agora, se você visitar qualquer post de blog em seu site, verá a barra de pesquisa.

Método 3. Adicionar uma barra de pesquisa a todos os posts do WordPress com código (funciona com qualquer tema)

Se você não usar um tema de bloco, mas ainda quiser que a barra de pesquisa apareça em todas as suas postagens, será necessário usar um código.

Para fazer isso, recomendamos o uso do WPCode. Esse plug-in de snippet de código torna seguro e fácil inserir códigos personalizados nos arquivos do tema sem editá-los diretamente. Dessa forma, você pode adicionar vários trechos de código sem danificar seu site.

O que você deseja fazer é instalar o plugin WPCode no WordPress. Para obter mais informações, leia nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Em seguida, vá para Code Snippets “ + Add Snippet. Selecione “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)) e clique no botão “Use snippet” (Usar snippet).

Agora, dê um nome ao seu novo código personalizado. Pode ser algo simples como “Barra de pesquisa nas postagens do blog”.

Depois disso, altere o tipo de código para “PHP Snippet”.

Em seguida, na caixa Code Preview (Visualização de código), copie e cole o seguinte trecho de código:

// Define the button text and placeholder text. You can customize these values as needed.
$button_text = 'Search'; // The text displayed on the search button
$placeholder_text = 'What are you looking for?'; // The placeholder text in the search input field

// Construct the search form HTML using the defined button text and placeholder text.
$search_form = '<form role="search" method="get" action="' . esc_url(home_url('/')) . '" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
                    <label class="wp-block-search__label" for="wp-block-search__input-2">' . esc_html($button_text) . '</label>
                    <div class="wp-block-search__inside-wrapper ">
                        <input class="wp-block-search__input" id="wp-block-search__input-2" placeholder="' . esc_attr($placeholder_text) . '" value="" type="search" name="s" required="">
                        <button aria-label="' . esc_attr($button_text) . '" class="wp-block-search__button wp-element-button" type="submit">' . esc_html($button_text) . '</button>
                    </div>
                </form>';

// Output the search form HTML.
echo $search_form;

Esse código adicionará uma barra de pesquisa básica semelhante ao bloco de pesquisa. Você pode personalizar o botão e o texto do espaço reservado conforme necessário.

Depois disso, role para baixo e verifique se a opção “Auto Insert” (Inserção automática) está selecionada para o Insert Method (Método de inserção).

Para o local, navegue até a guia “Page-Specific” (Específico da página) e escolha o que melhor se adequa aos seus critérios. Para fins de exemplo, escolhemos “Insert After Content” (Inserir após o conteúdo).

Quando terminar, basta tornar o código “Ativo” e clicar em “Salvar snippet”.

Agora você deve ver algo parecido com isto:

Descubra dicas e truques para melhorar a pesquisa no WordPress

O bloco Search usa o recurso de pesquisa incorporado do WordPress. No entanto, ele é bastante limitado e não é muito bom em mostrar resultados precisos. Você pode saber mais sobre como a pesquisa do WordPress funciona em nosso artigo.

Em alguns casos, você pode querer que o recurso de pesquisa do WordPress seja mais avançado. Talvez você queira adicionar uma função de pesquisa por categoria ou tornar pesquisáveis os comentários das postagens do blog.

É aí que entra o SearchWP. Esse plug-in de pesquisa personalizada oferece controle total sobre a pesquisa no site do WordPress para que você possa fornecer resultados mais precisos aos seus visitantes.

O SearchWP também torna todas as partes do seu site pesquisáveis, incluindo arquivos PDF, arquivos ACF, arquivos de texto, campos personalizados do WordPress e muito mais.

Depois de criar um formulário de pesquisa personalizado, você pode adicioná-lo a qualquer parte do seu site usando um bloco ou um shortcode.

Para saber mais, consulte nosso guia sobre como melhorar a pesquisa no WordPress com o SearchWP.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar um formulário de pesquisa em um post do WordPress. Você também pode querer saber como criar um formulário de contato no WordPress ou conferir nossa seleção de especialistas dos melhores serviços de marketing por e-mail para pequenas empresas.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.