Pode parecer pouco convencional, mas uma das maneiras mais eficazes que encontramos para aumentar o engajamento nos posts do WordPress é adicionar um formulário de pesquisa a eles.
No início, também estávamos céticos – afinal, uma barra de pesquisa não é normalmente relegada ao cabeçalho ou à barra lateral? Mas se você fizer com que ela pareça natural e não atrapalhe a experiência de leitura, poderá ajudar os usuários a descobrir novos conteúdos depois de ler um artigo de que gostaram.
Neste artigo, compartilharemos nossos métodos para adicionar um formulário de pesquisa aos posts do WordPress.
Por que adicionar um formulário de pesquisa aos seus posts do WordPress?
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.
Também recomendamos adicionar isso na parte inferior de sua postagem para evitar interromper a experiência de leitura.
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, poderá usar algo como “Find more great deals” (Encontre mais ofertas excelentes) ou “Search for similar offers” (Pesquise ofertas semelhantes) para o formulário de pesquisa de produtos.
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.
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 nossas escolhas de especialistas dos melhores plug-ins de lógica condicional para WordPress.
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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Hasse Dahlriksson
But what happends after update of theme?
WPBeginner Support
If you created a site-specific plugin then the changes will remain
Administrador
Holly
Thank you, but I’m seeing only {wpbsearch] on the page I want the search form to be. I’m not sure if I’m placing the add_shortcode(‘wpbsearch’, ‘get_search_form’); code in the correct place in the theme functions.php file. I placed the following code in a perceived function location: between /** and * is_it woocommerce_page- Returns true if on a page which uses WooCommerce…) in the actual page I want to search, as I want it to be a page-only search, (and is this the correct code to do that?)
The Page Code:
function wpbsearchform( $form ) {
$form = ‘
‘ .
_(‘Search Timeline For:’) . ‘
‘;
return $form;
}
add_shortcode(‘wpbsearch’, ‘wpbsearchform’);
Sonji
thank you so much for this. It was so easy. I have been searching for how to do this for months but was looking in the wrong places.
Ryan
I want to add a general google search bar -not custom search just a general google search box so users will not have to leave the page to conduct a google search.
Yao Daniel
Hi there!
You guys are really the best (y)
Great post once again.
I’ve been able to add the search form with visual composer as well. So, maybe someone will give it a try
Finaly, I’m trying to add a search form in a slideshow like this site:
I’ll be more than glad if someone here do have a trick for this.
Thanks again and stay blessed
Carissa
Just what I was looking for, thank you! What would an example be of CSS if we wanted to change the colors and text of the search bar? (i.e. what would we add to CSS to change the colors/text/etc.)?
Luke MEL
Wow! That was the easiest add a search box reply – ever!!!!!
Robin
Awesome! Had to use this on my webpage:
It was super easy to implement and looks awesome
Jarod Thornton
This was stupid easy to implement. I wrote it as a plugin so I can use on MultiSite Thank you for the write-up.
sakthidasan
Hello,
Is it possible to make this search form to search only a particular category?
Example. I have 5 Categories – Cat 1, Cat 2, Cat 3, Cat 4 and Cat 5.
I want the search from only on page 4 and the search form should search only from Cat 3?
Thanks
Sakthi
daniela
Hi,
really love your tutorials!
Is it possible to define the search for comments within each post I put the shortcode? So that it’s not a global search, but a search of the comments just of the post I’m searching at via the shortcode. Would be amazing for helping me out, don’t find anything.
Thanks!!
WPBeginner Support
You can do that with SearchWP plugin.
Administrador
João Leitão
amazing, 1, 2, 3 steps… and I got what I needed. simple & quick. thanks.
sandeep kumar dan
Hi, I have just used this script on my theme. Thanks for the help. And its working. But i have one problem, I want to edit the title of that search form how to do. Please help me out.
Thanks
Sandeep Kumar Dan
Carol Dunlop
Awesome tip! Thanks for posting, it is just what I was looking for. I wanted something simple so that people can search through exercise videos and this fit the bill.
Greg Maldewin
Great article! I created a short code and then tweaked the CSS to position and size it the way I wanted.
add_shortcode(‘prodSearch’, function($atts) {
global $woocommerce;
echo ”;
get_product_search_form();
echo ”;
});
Nick Lewis
Greg… what was your custom form code for your woocommerce search form you mention here?
I am trying to get two search boxes into a top navigation one for standard wordpress site search the other for woocommerce products..
Justin Young
Hi Greg!
Thank you for this tip!.. Do you know how to change the search box text and css for this shortcode??
Any help would be greatly appreciated..
-Justin
Arc
Just used it in my WP site. Was able to add search box anywhere I like.
Thank you! This one’s simpler and easy to use compared to the plugins out there.
Brian
Great fix for what I need. However, is there any way to make the search box shorter?
Thanks,
Brian
Editorial Staff
Yes, you can do that by editing the CSS file.
Administrador
Jerome Van Gils
I also want to max the search box shorter. What exactly should I edit in the CSS file?
David Schmeikal
Great little tutorial. I tried to embed this shortcode within a column shortcode, but it just appears at the top of the page, instead of within the column. Is there something I need to add?
Editorial Staff
Probably has a conflict with the columns shortcode styling and the search shortcode formatting.
Administrador
Ionut Alexandru
i read your site everytime when you put something new. I want to know if is posible to put search form for my site..like google search..Now i used search default from wordpress but i dont like very good the results and i want to know if is posible to put “google search” just for my content. i hope you understand, i try to write correct english but i’m not so good. i wait your answer if is posible. i appreciate your site and your work.
Editorial Staff
Yes it is possible.
https://www.wpbeginner.com/wp-tutorials/how-to-add-google-search-in-a-wordpress-site/
Administrador
Keith Davis
Thanks for the tut.
Always learn something when I come over.
Appreciate you taking the time.
Abel Suing
Thanks a lot! very informative! nice!
Geoffrey
Hi,
Thank you for the tip .
Don’t forget to use different IDs to avoid duplication of FOR and ID’s values.
Here you use exactly the same as default WordPress’ search form.
Thank you,
Regards,
G.
Editorial Staff
Good tip. Yeah, we just copied the code from the core for the sake of demonstration.
Administrador
Eugenio
Useful technique, thanks for sharing
Gretchen Louise
Thank you so much! Really appreciate the way you guys answer our questions.
And this code worked like a charm!