Como adicionar um campo de pesquisa ao menu secundário do Divi

No tutorial Divi de hoje, mostraremos como adicionar um campo de pesquisa ao menu secundário. O menu secundário também é conhecido como cabeçalho de sua página e o local onde você tenta encaixar algumas informações práticas sobre seu site ou empresa. Adicionar um campo de pesquisa a ele pode ser uma solicitação que você teve de um cliente ou uma necessidade que você tem de seu próprio site. De qualquer forma, mostraremos como você pode integrar facilmente este campo de pesquisa em sua navegação secundária quando estiver usando o tema Divi.

Resultado

Antes de mergulharmos nas diferentes etapas que você terá que seguir para chegar lá; pode ser interessante mostrar o resultado com antecedência. Seguindo as etapas da postagem e adicionando alterações de aparência CSS, você obterá o seguinte resultado em um menu secundário padrão:

Por que adicionar um campo de pesquisa ao seu menu secundário

Adicionar uma possibilidade de pesquisa ao seu menu secundário é uma das coisas que você pode ter tentado fazer. Mas, ao contrário do menu principal, o cabeçalho não tem uma página separada no WordPress que ajuda a adicionar coisas manualmente, sem ter que adicionar linhas de código PHP ao arquivo header.php do seu site.

No entanto, adicionar uma possibilidade de pesquisa em seu menu secundário pode ser uma coisa interessante. Vamos dar uma olhada em alguns motivos pelos quais você deseja adicionar um.

Ofereça aos seus visitantes uma possibilidade de pesquisa desde o início

Você tem todos os tipos de visitantes em seu site. Alguns deles procuram explorar coisas e demorar, enquanto outros querem encontrar informações específicas imediatamente. Ao adicionar o seu campo de pesquisa ao menu secundário, você terá a garantia de que os visitantes que procuram algo específico terão a capacidade de fazer isso imediatamente. Como um menu secundário está localizado no topo da página, os visitantes que estão com pressa apreciarão o esforço que melhora a experiência do usuário.

Para salvar seu menu principal do campo de pesquisa

Claro, outra coisa que você pode fazer é adicionar o campo de pesquisa ao menu principal. Mas, em alguns casos, você pode não querer fazer isso. Por exemplo; se quiser manter o foco nos itens do menu ou se não quiser misturar os itens do menu com o campo de pesquisa. Outra razão pode ser que você já tem alguns itens de menu que fazem seu menu principal parecer ocupado e não deseja adicionar um campo de pesquisa em cima disso.

Enfatize o campo de pesquisa sem ter um menu principal chamativo

A maioria das pessoas tende a manter o menu principal sóbrio e a fazer o menu secundário se destacar. Principalmente porque desejam mostrar a diferença óbvia entre os dois menus. E secundário, porque o menu secundário geralmente tem algumas coisas que eles querem enfatizar (como os ícones de mídia social). Quando você decidir integrar o campo de pesquisa também em seu menu secundário, ele será automaticamente destacado e estimulará seus visitantes a pesquisar e encontrar exatamente o que estão procurando.

Como adicionar um campo de pesquisa ao menu secundário do Divi

Inscreva-se no nosso canal no Youtube

Adicionar campo de pesquisa ao arquivo PHP de cabeçalho

Agora, para realmente adicionar o campo de pesquisa ao seu cabeçalho, conforme mostrado na imagem abaixo, você terá que adicionar algo ao arquivo header.php do seu site. A linha de código de que você precisará é a seguinte:

<? php get_search_form (); ?>

Vá em frente e copie esta linha de código PHP e vá para o painel do WordPress. No painel do WordPress, vá para Aparência> Editor> header.php.

Agora você pode colocar a linha de código onde quiser que a barra de pesquisa apareça. Como queremos que apareça ao lado dos ícones de mídia social, vamos mostrar onde exatamente colocá-lo no código. Precisamos colocá-lo logo antes do menu secundário, do contêiner e do fechamento do cabeçalho superior.

Estilize seu campo de pesquisa

Por padrão, o campo de pesquisa parece um pouco desatualizado. Provavelmente, você desejará alterar algumas coisas apenas para que tenha a aparência que deseja e para que se encaixe na aparência do restante do seu site. Estas são três coisas que você provavelmente deseja alterar: o rótulo de pesquisa, a entrada de pesquisa e a entrada de botão.

Se você não fizer nenhuma modificação CSS no campo de pesquisa, por padrão ficará assim no menu secundário:

Que obviamente não é o resultado final que queremos alcançar. Felizmente, podemos fazer quantas modificações quisermos no campo. Na próxima parte desta postagem, mostraremos como modificar todos os elementos do campo de pesquisa e também compartilharemos as linhas de código CSS para obter o seguinte resultado:

Remover / modificar rótulo de pesquisa

O primeiro elemento que faz parte do campo de pesquisa é o rótulo de pesquisa. Este é o texto que aparece e explica às pessoas que elas podem pesquisar qualquer coisa no site usando o campo. No entanto, esse rótulo não é necessário. Todo mundo sabe hoje em dia como funciona um campo de busca. Você sempre pode fazer o rótulo de pesquisa desaparecer adicionando 'display: none;' ao CSS desse rótulo. Ou você pode alterar a aparência do rótulo.

A classe de que você precisará para fazer quaisquer modificações no rótulo de pesquisa é “.screen-reader-text”. Como mostrado no exemplo abaixo, você pode desativar sua exibição.

.screen-reader-text {
display: none;
}

Estilize sua entrada de pesquisa

A próxima coisa que você pode querer estilizar é a entrada de pesquisa. Para fazer quaisquer ajustes a esta entrada, coloque todas as linhas de código CSS entre os seguintes colchetes:

 input#s
{

}

Estilize a entrada do seu botão

E, por último, também temos o estilo do botão. Para fazer qualquer modificação nesta parte do campo de pesquisa, coloque as linhas de código CSS entre os seguintes colchetes:

input#searchsubmit
{
}

Código CSS necessário para nosso exemplo

Depois de fazer a modificação do PHP, você pode obter instantaneamente o resultado mostrado acima acessando o Painel do WordPress> Divi> Opções de tema> Geral> E adicionando as seguintes linhas de código CSS ao campo Personalizado:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

Resultado

Agora que já passamos por todas as etapas, vamos dar outra olhada em como o cabeçalho deve ser:

Pensamentos finais

Neste tutorial, mostramos como adicionar um campo de pesquisa ao menu secundário. Além disso, também mostramos como modificar os elementos dentro desse campo de pesquisa e apresentamos um exemplo de linhas de código CSS que você pode simplesmente copiar e colar para seu próprio uso. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por D Line / shutterstock.com