Como Adicionar uma Sobreposição de Pesquisa em Tela Cheia no WordPress

Recentemente, um de nossos leitores perguntou se poderíamos escrever um tutorial sobre como adicionar uma sobreposição de pesquisa em tela cheia no WordPress. Você provavelmente já viu isso em sites populares como o Wired. Quando um usuário clica no ícone de pesquisa, a caixa de pesquisa abre e cobre toda a tela, o que pode melhorar a experiência do usuário em dispositivos móveis. Neste artigo, mostraremos como adicionar uma sobreposição de pesquisa em tela cheia no WordPress.

A pesquisa em tela cheia está se tornando lentamente uma tendência porque melhora drasticamente a experiência de pesquisa para usuários móveis. Como as telas de dispositivos móveis são muito pequenas, ao oferecer uma sobreposição em tela cheia, você facilita para os usuários digitarem e pesquisarem em seu site.

Quando recebemos essa solicitação de tutorial pela primeira vez, sabíamos que exigiria algum código. Nosso objetivo no WPBeginner é tornar as coisas o mais simples possível.

Assim que terminamos de escrever o tutorial, percebemos que o processo era muito complicado e que deveria ser encapsulado em um plugin simples.

Para facilitar, criamos um tutorial em vídeo sobre como adicionar uma sobreposição de pesquisa em tela cheia que você pode assistir abaixo.

No entanto, se você quiser apenas seguir instruções em texto, pode seguir nosso tutorial passo a passo sobre como adicionar uma sobreposição de pesquisa em tela cheia no WordPress.

Adicionando Sobreposição de Pesquisa em Tela Cheia no WordPress

A primeira coisa que você precisa fazer é instalar e ativar o plugin WordPress Full Screen Search Overlay. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

O plugin WordPress Full Screen Overlay Search funciona imediatamente, e não há configurações para você configurar.

Você pode simplesmente visitar seu site e clicar na caixa de pesquisa para ver o plugin em ação.

Por favor, note que o plugin funciona com o recurso de pesquisa padrão do WordPress. Ele também funciona muito bem com o SearchWP, que é um plugin premium que melhora muito a pesquisa padrão do WordPress.

Infelizmente, este plugin não funciona com o Google Custom Search.

Personalizando o Full Screen Search Overlay

O plugin WordPress Full Screen Search Overlay vem com sua própria folha de estilos. Para alterar a aparência da sobreposição de pesquisa, você terá que editar o arquivo CSS do plugin ou usar !important no CSS.

Primeiro, você precisará se conectar ao seu site usando um cliente FTP. Se você é novo no uso de FTP, confira nosso guia sobre como enviar arquivos para o WordPress usando FTP.

Uma vez conectado, você precisa localizar a pasta CSS do plugin. Você a encontrará no seguinte caminho:

seusite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Você encontrará um arquivo full-screen-search.css dentro da pasta css. Você precisa baixar este arquivo para o seu computador.

Abra o arquivo que você acabou de baixar em um editor de texto simples como o Bloco de Notas. Você pode fazer quaisquer alterações neste arquivo. Por exemplo, queríamos alterar a cor de fundo e da fonte para combinar com o nosso site de demonstração.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

Neste código, alteramos apenas a cor de fundo na linha 62 e adicionamos a cor da fonte na linha 150. Se você entende de CSS, sinta-se à vontade para alterar outras regras de estilo também.

Assim que terminar, você pode enviar este arquivo de volta para a pasta CSS do plugin usando FTP. Agora você pode ver suas alterações visitando seu site.

Nota Importante:

Se você estiver usando isso em seu próprio tema, é melhor usar tags !important para que as atualizações do plugin não substituam nenhuma alteração.

Para desenvolvedores e consultores, você também pode simplesmente renomear o plugin e incluí-lo como parte do seu tema ou serviços.

Criamos este plugin apenas porque todas as outras maneiras de escrever este tutorial teriam sido muito complicadas para usuários iniciantes.

Esperamos que este artigo tenha ajudado você a adicionar uma sobreposição de pesquisa em tela cheia ao seu site WordPress. Você também pode querer ver nosso guia sobre como adicionar um efeito de alternância de pesquisa no WordPress

Se você gostou deste artigo, então por favor inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.