Como adicionar uma barra de pesquisa a um site WordPress

Como adicionar uma barra de pesquisa no banner do site wordpress

Os proprietários de sites muitas vezes têm dificuldade para adicionar uma barra de pesquisa aos seus sites WordPress. Alguns deles adotam métodos complexos para adicionar uma barra de pesquisa aos seus sites WP, enquanto outros permanecem totalmente ignorantes sobre qual método adotar.

O que é crucial neste caso é encontrar uma maneira de adicionar uma barra de pesquisa ao seu site WordPress de maneira fácil e fácil. Se você está cansado de tentar maneiras ineficientes de injetar uma barra de pesquisa em seu site WordPress, você encontrou a peça certa.

Não importa se você construiu um site WP recentemente ou se tem um site WP antigo, você achará esta postagem informativa e instrutiva.

Barra de pesquisa - uma maneira rápida e eficiente de obter informações:

Um site contém muitas informações por meio da página inicial, páginas de produtos, páginas de blog e página de preços. Considere-se apenas um visitante do site. Quando você visita um site, muitas vezes você tende a obter dados de diferentes páginas da web.

Nesse caso, como você encontrará esses dados? Você vai encontrá-los visitando essas páginas individualmente? Certamente, você não gostaria de fazer isso.

Não que você não encontre as informações necessárias dessa forma. Mas também é demorado e doentio. É aqui que entra em ação a adição de uma barra de pesquisa ao seu site WordPress. 

De acordo com uma pesquisa de Diário do mecanismo de pesquisa, Mais do que 40% os visitantes dizem que uma caixa de pesquisa é o recurso mais importante de um site

Por que adicionar uma barra de pesquisa ao seu site?

Suponha que você não tenha uma barra de pesquisa em seu site. Nesse caso, quando os visitantes visitarem o seu site, eles terão dificuldade para encontrar as informações necessárias. Como resultado, eles sairão do seu site e todo o seu propósito de colocá-los no site será em vão.

Deixe-me apresentar alguns dos principais benefícios você pode aumentar adicionando uma barra de pesquisa ao seu site abaixo-

  • Facilita o esforço de seus clientes para encontrar informações
  • Simplifica a experiência do usuário
  • Aumenta o envolvimento 
  • Reduz a taxa de rejeição
  • Exibe os itens ou informações necessárias com algumas palavras-chave

Você pode Adicione a barra de pesquisa no menu do site com o widget de pesquisa padrão do WordPress: 

É possível adicionar uma barra de pesquisa de menu com o widget de pesquisa padrão do WordPress? Não, você não pode. Porque o WordPress permite adicionar uma barra de pesquisa apenas em áreas prontas para widgets. 

Se quiser adicionar uma barra de pesquisa ao menu, você deve aproveitar outros plug-ins ou widgets em diferentes áreas do seu site, incluindo o cabeçalho e rodapé

É por isso que eu mostraria três métodos diferentes para adicionar uma barra de pesquisa ao seu site WordPress neste tutorial. 

Agora, vamos dar uma olhada em como você pode adicionar uma barra de pesquisa ao seu site por meio do widget padrão do WordPress.

Adicionar barra de pesquisa com widget de pesquisa padrão do WordPress:

A maneira mais fácil e conveniente de injetar uma barra de pesquisa em seu site WordPress é por meio do painel do WordPress. Como fazer isso? Vamos dar uma olhada-

Navegue até os widgets no painel:

No início, vá até o painel do seu painel de administração e encontre Aparência. Navegue e clique em Widgets em uma lista de itens em Aparência.   

Painel > Aparência > Widgets

Navegue até os widgets do painel

Adicione o widget de pesquisa dos widgets disponíveis:

Isso o levará a uma nova página que aparece com diferentes seções de página. Agora, clique no botão “Adicionar bloco” (aparece com um sinal +) para visualizar todos os widgets existentes. 

Role para baixo para encontrar o widget de pesquisa ou você pode escrever “Pesquisar” no campo de pesquisa para encontrar o widget de pesquisa.

Clique na seção onde deseja que a barra de pesquisa apareça e, em seguida, clique no widget de pesquisa. Alternativamente, você também pode arrastar e soltar o widget de pesquisa na seção desejada.

Adicione o widget de pesquisa

Faça os ajustes necessários:

A barra de pesquisa aparecerá agora na seção selecionada. Você pode fazer as alterações necessárias em diferentes elementos, como alinhamento da barra de pesquisa, posição do botão, cor do texto e assim por diante. 

Você também pode adicionar um rótulo personalizado à barra de pesquisa de acordo com suas necessidades. Por fim, clique no botão Atualizar.

Personalize a barra de pesquisa

Visualize a barra de pesquisa em sua página:

Agora, se você visitar qualquer uma de suas páginas ou postagens publicadas, poderá notar a barra de pesquisa ou caixa de pesquisa aparecendo na barra lateral principal.

Veja a barra de pesquisa no front-end

Adicionar barra de pesquisa com o widget de pesquisa ElementsKit:    

Agora, vou guiá-lo por outro maneira fácil de adicionar a barra de pesquisa do WordPress ao seu site. E isso é através do widget Header Search do ElementsKit. É super simples adicionar uma caixa de pesquisa através do ElementsKit

Na verdade, ElementsKit é um complemento Elementor. Nesse sentido, adicionar uma barra de pesquisa com ElementsKit também pode ser chamada de barra de pesquisa Elementor, certo?

Sem mais delongas, vamos conferir como adicionar uma barra de pesquisa com o widget de pesquisa ElementsKit

Navegue para qualquer uma de suas postagens ou páginas existentes no painel:

Em primeiro lugar, vá ao painel e encontre postagens ou páginas. Aqui, mostrarei como o widget ElementsKit funciona com uma postagem chamada “Hello World!” 

Vá para “Postagens” e selecione “Todas as postagens” para permitir que todas as suas postagens apareçam. A partir daí, você pode escolher a postagem onde deseja adicionar uma barra de pesquisa. Caso você não tenha nenhuma postagem ou página existente, você deverá adicionar uma nova postagem ou página.

Painel > Postagens > Todas as postagens > Sua postagem

Vá para qualquer uma das páginas existentes

Mude para a janela Elementor:

Agora, clique em “Editar com Elementor” localizado na parte superior central. Isso o levará para a janela Elementor.

Mudar para a janela do elemento

Arraste e solte o widget de pesquisa de cabeçalho: 

Na janela Elementor, você terá acesso a vários widgets. Digite o widget “Pesquisa de cabeçalho” no campo de pesquisa para encontrar o widget. Alternativamente, você pode rolar para baixo e encontrar o widget também. 

Depois de localizar o widget, arraste e solte-o na área designada para que a barra de pesquisa apareça. Não se esqueça de adicionar a seção acima do texto da sua postagem, pois é uma barra de pesquisa de cabeçalho.

Arraste e solte o widget de pesquisa de cabeçalho

Defina os parâmetros da barra de pesquisa:

Assim que a barra de pesquisa aparecer na página, é hora de definir os parâmetros da barra conforme sua preferência. Na guia Conteúdo, você terá uma seção Pesquisa de cabeçalho onde você coloca um texto de espaço reservado, seleciona um ícone de pesquisa e ajusta o tamanho da fonte. 

Defina os parâmetros da barra de pesquisa na aba de conteúdo

Na guia Estilo, você terá 2 seções: Pesquisa de cabeçalho e Contêiner de pesquisa. Na seção Pesquisa de cabeçalho, você pode ajustar parâmetros como cor de fundo, tipo de borda, sombra da caixa de pesquisa, margem, etc.

Defina os parâmetros da barra de pesquisa na guia de estilo da seção de pesquisa de cabeçalho

Na seção Search Container, você pode selecionar o tipo de plano de fundo e definir o texto do espaço reservado e a cor da borda.

Defina os parâmetros da barra de pesquisa na guia de estilo da seção do contêiner de pesquisa

Finalmente, você está pronto para ir!

Depois de finalizar suas configurações, você estará pronto para verificar e visualizar a barra de pesquisa no front end de sua postagem. Se não estiver satisfeito com a aparência da caixa de pesquisa, você pode modificá-la novamente no painel de administração. 

Veja a barra de pesquisa do cabeçalho em sua postagem

É muito fácil adicionar pesquisa a sites WordPress com ElementsKit, não é? Além disso, você obterá muitos benefícios adicionando uma barra de pesquisa ao seu site WordPress que listei acima. Então, por que não dar uma chance ao ElementsKit?

ElementsKit é um complemento completo para o construtor de páginas Elementor, incluindo módulos poderosos, widgets, megamenue cabeçalho e rodapé.

Adicionar caixa de pesquisa com código CSS:

Há mais uma maneira que você pode usar para adicionar uma barra de pesquisa ao seu site: usando código CSS. Embora você precise de um pouco de conhecimento técnico para fazer isso, não é ciência de foguetes. Vou mostrar o processo aqui e depois disso será super fácil. 

Vá para o Editor de Tema:

Em primeiro lugar, clique em “Aparência”No painel e navegue até“Editor de Tema”. 

Navegue até o editor de tema

Abra o arquivo header.php ou sidebar.php:

Com isso, você irá para o arquivo style.css por padrão. A partir daí, abra o cabeçalho.php ou barra lateral.php arquivo dependendo da posição onde você deseja que a barra de pesquisa apareça.

Abra o arquivo header.php ou o arquivo sidebar.php

Adicionar função da barra de pesquisa:

Agora, adicione esta função <?php get_search_form(); ?> no código do arquivo header.php ou sidebar.php. Eu adicionei a função no código do arquivo header.php. 

Adicione uma função de barra de pesquisa

Visualize a barra de pesquisa em seu site:

Por fim, abra qualquer uma das páginas publicadas e você notará a barra de pesquisa aparecendo no topo. Se você adicionasse a função no arquivo sidebar.php, a barra de pesquisa apareceria na barra lateral. 

A barra de pesquisa aparece na página

Concluindo:

É isso! Eu te acompanhei 3 técnicas super fáceis para adicionar uma barra de pesquisa ao seu site WordPress. Dependendo de suas necessidades, você pode optar por qualquer um deles. No entanto, se você adicionar a barra de pesquisa do WordPress ao widget de pesquisa de cabeçalho do ElementsKit, você obterá um benefício extra.

O que é isso? Opções de personalização sem fundo!!! Portanto, se você adora personalização, use o widget de pesquisa de cabeçalho do ElementsKit. Com isso, você pode dar à sua barra de pesquisa uma aparência fascinante. 

GIF promocional do ElementsKit

Comentários

Deixe um comentário

Seu endereço de e-mail não será publicado. Campos obrigatórios marcados com *