Jump to content

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


Ir para a Solução Solucionado por natthyzanella,

Postagens Recomendadas

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...

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

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

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

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

1 hora atr√°s, Rogerio Santos disse:

Por nada, teria que ver seu código para tentar ajudar mais 

N√£o sei se enviando o o link do site ajuda em algo.

Te mandei no pv

Ele já está online, tinha que enviar pra produção o quanto antes.

Link to comment
Compartilhe em outros sites

  • Solu√ß√£o

Consegui resolver de outra forma. Removi os elementos das classes que cercava a caixa de pesquisa e movi ele para a parte superior do site. Tudo com CSS.

Agradeço pelo retorno e ajuda

  • Curtir 1
Link to comment
Compartilhe em outros sites

Ola, a solução que cheguei seria essa mesmo, deixei os itens da ul e do button e input apenas dentro da DIV right

<div class="right">

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

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

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

                        </button>

                        <ul class="social-networks">

                            <li><a href="https://www.facebook.com/BibliotecasSP/" target="_blank" rel="nofollow"><i

                                        class="fab fa-facebook"></i></a></li>

                            <li><a href="https://www.instagram.com/smbibliotecas/?hl=pt-br" target="_blank"

                                    rel="nofollow"><i class="fab fa-instagram"></i></a></li>

                            <li><a href="https://www.youtube.com/user/bibliotecasSP" target="_blank" rel="nofollow"><i

                                        class="fab fa-youtube"></i></a></li>

                            <li><a href="https://twitter.com/BibliotecasSP" target="_blank" rel="nofollow"><i

                                        class="fab fa-twitter-square"></i></a></li>

                        </ul>

                        <script>

                            function toggleSearch() {

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

                                searchInput.classList.toggle('show');

                            }

                        </script>

                    </div>



e ai criei uma CSS 

 

 

.right {

            width: 40%;

            display: inline;

            align-items: left;

        } 

e depois alinhei nas respectivas tags do CSS

que bom que conseguiu resolver, desculpe a demora.

  • Ajudou! 1
Link to comment
Compartilhe em outros sites

3 minutos atr√°s, Rogerio Santos disse:

Ola, a solução que cheguei seria essa mesmo, deixei os itens da ul e do button e input apenas dentro da DIV right

<div class="right">

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

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

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

                        </button>

                        <ul class="social-networks">

                            <li><a href="https://www.facebook.com/BibliotecasSP/" target="_blank" rel="nofollow"><i

                                        class="fab fa-facebook"></i></a></li>

                            <li><a href="https://www.instagram.com/smbibliotecas/?hl=pt-br" target="_blank"

                                    rel="nofollow"><i class="fab fa-instagram"></i></a></li>

                            <li><a href="https://www.youtube.com/user/bibliotecasSP" target="_blank" rel="nofollow"><i

                                        class="fab fa-youtube"></i></a></li>

                            <li><a href="https://twitter.com/BibliotecasSP" target="_blank" rel="nofollow"><i

                                        class="fab fa-twitter-square"></i></a></li>

                        </ul>

                        <script>

                            function toggleSearch() {

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

                                searchInput.classList.toggle('show');

                            }

                        </script>

                    </div>



e ai criei uma CSS 

 

 

.right {

            width: 40%;

            display: inline;

            align-items: left;

        } 

e depois alinhei nas respectivas tags do CSS

que bom que conseguiu resolver, desculpe a demora.

√Č, eu imaginei mesmo.

Mas de qualquer forma eu agradeço pela ajuda

  • Curtir 1
  • Amei 1
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


×
×
  • Create New...