Jump to content

Como consigo transformar a barra de pesquisa em ícone na parte superior do site wordpress?

natthyzanella
 Compartilhar

Postagens Recomendadas

natthyzanella

natthyzanella

Postado
Postado

Olá! 

Estou há umas semanas tentando descobrir como transformar a barra de pesquisa (no caso é um plugin) em um ícone na parte superior do site, próximo ao cabeçalho.

Já tentei editar o fuctions.php do tema filho, o header.php do tema pai, o css, tudo que possam imaginar e não funciona.

 

O objetivo é esse que tentei mostrar no print abaixo.

Se alguém puder me auxiliar, seria de grande ajuda. Fiz tudo que precisava no site, mas daqui não consigo sair.

imagem_2024-04-08_170518650.png

  • Curtir 1
Link to comment
Compartilhe em outros sites
  • 2 weeks later...
Rogerio Santos

Rogerio Santos

Postado
Postado

Para transformar a barra de pesquisa em um ícone na parte superior do site WordPress, você pode seguir as etapas abaixo:

Personalize o tema: No painel de controle do WordPress, vá para Aparência > Personalizar.

Acesse as configurações do cabeçalho: Em seguida, vá para Cabeçalho > Menu principal.

Adicione a pesquisa ao menu: Em “Último item no menu”, selecione “Pesquisa” no menu suspenso. Isso adicionará um ícone e uma barra de pesquisa como último elemento do seu menu de navegação.

Por favor, note que essas etapas podem variar dependendo do tema que você está usando. Alguns temas podem não suportar essa funcionalidade diretamente e podem exigir a adição de código personalizado ou o uso de plugins.

Se você estiver usando um plugin de pesquisa, você pode precisar consultar a documentação do plugin para ver como transformar a barra de pesquisa em um ícone.

Espero que isso ajude! Se você tiver mais perguntas ou precisar de mais ajuda, sinta-se à vontade para perguntar.

  • Curtir 1
Link to comment
Compartilhe em outros sites
natthyzanella

natthyzanella

Postado
  • Autor(a)
Postado
Em 20/04/2024 at 00:17, Rogerio Santos disse:

Para transformar a barra de pesquisa em um ícone na parte superior do site WordPress, você pode seguir as etapas abaixo:

Personalize o tema: No painel de controle do WordPress, vá para Aparência > Personalizar.

Acesse as configurações do cabeçalho: Em seguida, vá para Cabeçalho > Menu principal.

Adicione a pesquisa ao menu: Em “Último item no menu”, selecione “Pesquisa” no menu suspenso. Isso adicionará um ícone e uma barra de pesquisa como último elemento do seu menu de navegação.

Por favor, note que essas etapas podem variar dependendo do tema que você está usando. Alguns temas podem não suportar essa funcionalidade diretamente e podem exigir a adição de código personalizado ou o uso de plugins.

Se você estiver usando um plugin de pesquisa, você pode precisar consultar a documentação do plugin para ver como transformar a barra de pesquisa em um ícone.

Espero que isso ajude! Se você tiver mais perguntas ou precisar de mais ajuda, sinta-se à vontade para perguntar.

Olá boa tarde!

Agradeço pela ajuda! Porém, já tentei essas opções já fornecidas e não funcionou, creio que teria que ser pelo código, mas gostaria de um auxílio, pois não sei bem como fazer.

  • Curtir 1
Link to comment
Compartilhe em outros sites
Rogerio Santos

Rogerio Santos

Postado
Postado

Poste seu codigo que tentaremos analisar, não sei se seria al assim que você quer fazer mas fiz um exemplo simples, criei uma div joguei os icones dentro setei ela como absolute no Css e depois alinhei tudo dentro dela 

image.png

ao clicar no botão de pesquisa ele mostra a caixa de pesquisa

image.png
no HTML fiz dessa forma: 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

    <div class="search-container">

        <input type="text" class="search-input" placeholder="Pesquisar...">

        <button class="search-button" onclick="toggleSearch()">

            <i class="fa fa-search"></i>

        </button>

        <div class="social-icons">

            <a href="#"><i class="fa fa-facebook"></i></a>

            <a href="#"><i class="fa fa-twitter"></i></a>

            <a href="#"><i class="fa fa-instagram"></i></a>

        </div>

    </div>



    <script>

        function toggleSearch() {

            const searchInput = document.querySelector('.search-input');

            searchInput.classList.toggle('show');

        }

    </script>

</body>

</html>


e no CSS ficou assim:
  

/* Estilo para a barra de pesquisa */

.search-container {

    position: absolute;

    top: 20px;

    right: 20px;

    display: flex;

    align-items: center;

}



.search-input {

    display: none;

    padding: 8px;

    border: 1px solid #ccc;

    border-radius: 4px;

    margin-right: 10px;

}



.search-button {

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 4px;

    padding: 8px 12px;

    cursor: pointer;

    margin-right: 10px;

}



.search-icon {

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 4px;

    padding: 8px 12px;

    cursor: pointer;

}



.show {

    display: block;

}



/* Estilo para os ícones de redes sociais */

.social-icons {

    display: flex;

    align-items: center;

}



.social-icons a {

    margin-right: 10px;

    text-decoration: none;

    color: #007bff;

    font-size: 20px;

}



/* Efeito de hover nos ícones */

.social-icons a:hover {

    opacity: 0.7;

    transition: 0.3s;

}
  • Curtir 1
  • Ajudou! 1
Link to comment
Compartilhe em outros sites
natthyzanella

natthyzanella

Postado
  • Autor(a)
Postado
Em 22/04/2024 at 21:56, Rogerio Santos disse:

Poste seu codigo que tentaremos analisar, não sei se seria al assim que você quer fazer mas fiz um exemplo simples, criei uma div joguei os icones dentro setei ela como absolute no Css e depois alinhei tudo dentro dela 

image.png

ao clicar no botão de pesquisa ele mostra a caixa de pesquisa

image.png
no HTML fiz dessa forma: 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

    <div class="search-container">

        <input type="text" class="search-input" placeholder="Pesquisar...">

        <button class="search-button" onclick="toggleSearch()">

            <i class="fa fa-search"></i>

        </button>

        <div class="social-icons">

            <a href="#"><i class="fa fa-facebook"></i></a>

            <a href="#"><i class="fa fa-twitter"></i></a>

            <a href="#"><i class="fa fa-instagram"></i></a>

        </div>

    </div>



    <script>

        function toggleSearch() {

            const searchInput = document.querySelector('.search-input');

            searchInput.classList.toggle('show');

        }

    </script>

</body>

</html>


e no CSS ficou assim:
  

/* Estilo para a barra de pesquisa */

.search-container {

    position: absolute;

    top: 20px;

    right: 20px;

    display: flex;

    align-items: center;

}



.search-input {

    display: none;

    padding: 8px;

    border: 1px solid #ccc;

    border-radius: 4px;

    margin-right: 10px;

}



.search-button {

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 4px;

    padding: 8px 12px;

    cursor: pointer;

    margin-right: 10px;

}



.search-icon {

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 4px;

    padding: 8px 12px;

    cursor: pointer;

}



.show {

    display: block;

}



/* Estilo para os ícones de redes sociais */

.social-icons {

    display: flex;

    align-items: center;

}



.social-icons a {

    margin-right: 10px;

    text-decoration: none;

    color: #007bff;

    font-size: 20px;

}



/* Efeito de hover nos ícones */

.social-icons a:hover {

    opacity: 0.7;

    transition: 0.3s;

}

É exatamente isso que quero fazer. Porém já tenho a barra de pesquisa funcional e só quero transformá-la em ícone. Porém como é um plugin não se dessa forma resolveria, mas vou testar aqui.

 

Eu adicionei o código no functions.php do wordpress

function modify_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <button type="submit" id="searchsubmit"><i class="fas fa-search"></i></button>
    </div>
    </form>';

    return $form;
}
add_filter( 'get_search_form', 'modify_search_form' );
 

 

Mas não funcionou, adicionou uma nova pesquisa, que é o que eu não quero..

 

Mas agradeço pela ajuda

 

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...