Como adicionar barra de pesquisa a um site WordPress

A barra de pesquisa é um elemento essencial de um site do qual ninguém discordaria. Isso ocorre porque um site contém muitas informações através da página inicial, páginas de produtos, páginas de blog, página de preços, etc. É por isso que é crucial que você adicione a barra de pesquisa ao seu site WordPress.

Se você precisar de algumas informações existentes em páginas diferentes, como você vai encontrá-las? Você vai encontrá-los visitando essas páginas individualmente? Certamente, você não gostaria de fazê-lo. Não que você não encontre as informações necessárias dessa maneira. Mas é demorado e doentio também. É aqui que a adição de uma barra de pesquisa ao seu site entrará em ação.

Por que adicionar uma barra de pesquisa em seu site?

Suponha que você não tenha uma barra de pesquisa em seu site. Nesse caso, quando os visitantes visitarem seu site, eles terão dificuldade para encontrar as informações necessárias. Como resultado, eles deixarão 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 que você pode adicionar ao adicionar uma barra de pesquisa em seu site abaixo-

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

Adicionando uma barra de pesquisa no menu com o widget de pesquisa padrão do WordPress:

Você pode adicionar a barra de pesquisa no menu com o widget de pesquisa padrão do WordPress? Não, você não pode. Porque o WordPress permite adicionar barra de pesquisa apenas em áreas prontas para widgets.

Se você deseja adicionar uma barra de pesquisa no menu, você precisa aproveitar outros plugins ou widgets em diferentes áreas do seu site, incluindo cabeçalho e rodapé.

É por isso que eu o guiaria por 3 métodos diferentes de adicionar uma barra de pesquisa em seu site WordPress neste tutorial.

Agora, vamos dar uma olhada na maneira como você pode adicionar a 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 é através do painel do WordPress. Como fazer isso? Vamos conferir-

Navegue até os Widgets do Dashboard:

No início, vá para 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

Adicione o widget de pesquisa dos widgets disponíveis:

Isso levará você a uma nova página que aparece com diferentes seções de página. Agora, clique no botão “Adicionar bloco” (Aparece com o 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 em que deseja que a barra de pesquisa apareça e, em seguida, clique no widget de pesquisa. Como alternativa, você também pode arrastar e soltar o widget de pesquisa na seção desejada.

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 seus requisitos. Por fim, clique no botão Atualizar.

Veja 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 a caixa de pesquisa aparecendo na barra lateral principal.

Adicionar barra de pesquisa com widget de pesquisa ElementsKit:

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

Sem mais delongas, vamos conferir-

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

Primeiro de tudo, vá para o painel e encontre posts ou páginas. Aqui, mostrarei como o widget ElementsKit funciona com um post chamado “Hello World!”

Vá para "Postagens" e selecione "Todas as postagens" para 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 nenhum post ou página existente, você deve adicionar um novo post ou página.

Painel > Postagens > Todas as postagens > Sua postagem

Mude para a janela Elementor:

Agora, clique em “Editar com Elementor” localizado no meio superior. Isso o levará para a janela Elementor.

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 rastrear o widget, arraste-o e solte-o na área designada para exibir a barra de pesquisa. Não se esqueça de adicionar a seção acima do texto da sua postagem, pois é uma barra 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.

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 os parâmetros como cor de fundo, tipo de borda, sombra da caixa de pesquisa, margem etc. da barra de pesquisa.

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.

Finalmente, você está pronto para ir!

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

Adicionar caixa de pesquisa com código CSS:

Há mais uma maneira que você pode usar para adicionar uma barra de pesquisa em seu site e isso é usar o 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 será super fácil depois disso.

Acesse o Editor de Temas:

Primeiro, clique em “Aparência” no painel e navegue até o “Editor de temas”.

Abra o arquivo header.php ou sidebar.php:

Com isso, você passará para o arquivo style.css por padrão. A partir daí, abra o arquivo header.php ou sidebar.php dependendo da posição em que você deseja que a barra de pesquisa apareça.

Adicionar função de 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.

Veja a barra de pesquisa em seu site:

Por fim, abra qualquer uma de suas páginas publicadas e você verá a barra de pesquisa aparecendo na parte superior. Se você adicionou a função no arquivo sidebar.php, a barra de pesquisa aparecerá na barra lateral.

Encerramento:

É isso!!! Eu guiei você por 3 técnicas super fáceis de 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 com o widget de pesquisa de cabeçalho do ElementsKit, obterá um benefício extra.

O que é isso? Opções de personalização sem fundo !!! Portanto, se você gosta de 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.