Como fazer um cabeçalho pegajoso no WordPress

Na última década, houve uma ênfase cada vez maior na navegação do site. Isso coincidiu com o uso generalizado de smartphones que têm opções de navegação limitadas em comparação com a interface de desktop tradicional. A diferença no design do site é mais do que evidente se você olhar para uma comparação entre um site de 2011. e um que foi feito agora.

Um dos principais métodos que foram usados ​​na reconfiguração dos layouts do site foram os elementos pegajosos. Apropriadamente nomeados, esses elementos aderem à página em suas bordas quando você a move, ou seja, eles mantêm sua posição original (pense em painéis congelados no Excel, e você terá uma boa idéia de como funciona).

Superior, inferior, esquerda e direita

Elementos fixos geralmente são reservados para menus, cabeçalhos e/ou barras de status; isso traz grande flexibilidade para o visitante, porque ele pode alternar instantaneamente de uma página para outra sem ter que voltar atrás. Além disso, todos eles estão posicionados nas bordas superior e inferior da página para começar, o que funciona bem com toda a premissa. Seria extremamente difícil construir uma página em torno de um elemento fixo posicionado no centro de uma página.

Raramente eles também podem ser encontrados nas bordas esquerda e direita, com as mesmas funções, apenas com um layout diferente. Nesses casos, eles ficarão ocultos até que você passe o cursor sobre eles ou toque neles na tela.

Economizadores de espaço

O interessante sobre os elementos fixos é que eles economizam espaço na página e no site como um todo – eles podem ser usados ​​para substituir páginas inteiras. Isso porque eles deixam o corpo principal do site intacto e tornam as bordas ferramentas multifuncionais que assumem muito das funções da página. Basta pensar no layout médio do seu site por um momento.

A parte superior é reservada para os menus que envolvem páginas classificadas por categorias designadas e uma barra de pesquisa. Ambos estão escondidos atrás de uma barra durante a rolagem e expandem quando necessário. Se não fosse esse o caso, apenas a árvore de menus ocuparia toda a seção superior da sua página e não “seguiria” ao rolar para baixo, então seu visitante seria obrigado a mover-se constantemente para cima e para baixo apenas para navegar pelas páginas .

Por outro lado, um elemento de fundo adesivo pode substituir uma página de suporte inteira com bastante facilidade – basta adicionar o e-mail e/ou número junto com um botão de bate-papo e pronto. Você está fornecendo aos seus visitantes uma maneira constantemente presente de entrar em contato com você. Mais uma vez, a aplicação prática é fantástica – um cliente está navegando pelas páginas do seu produto, tem uma pergunta e pode descobrir instantaneamente o que precisa clicando no botão de chat.

Criando elementos pegajosos

Quando estamos falando de WordPress, sempre há várias maneiras de fazer qualquer coisa que você possa imaginar, e o mesmo é verdade aqui. Você pode criar elementos fixos manualmente no editor padrão ou usar um plug-in que substitua a necessidade de codificação por uma interface amigável para iniciantes. O contraste entre os resultados finais é mínimo, mas a forma como você chega lá faz toda a diferença. Para o nosso exemplo, usaremos cabeçalhos fixos, pois eles são, de longe, o elemento mais comum feito para ficar.

Criando manualmente um cabeçalho fixo

Criar um cabeçalho fixo manualmente no WordPress requer o uso de código CSS. Sem ficar muito técnico, o código CSS é algo que podemos adicionar a praticamente qualquer elemento em uma página para alterar suas propriedades. Ao codificar manualmente, este é o nosso principal método de personalização. O uso de CSS primeiro requer que o cabeçalho esteja presente em uma página, portanto, certifique-se de que haja algo para personalizar em primeiro lugar. O WordPress simplifica esse processo porque até o editor padrão oferece a opção de adicioná-lo com um clique.

Depois de ter um cabeçalho para trabalhar, você precisará acessar o console. Basta ir à seção de aparência encontrada no lado esquerdo do seu painel, escolher “personalizar” e clicar em “CSS adicional”. Com o console agora aberto, você precisa inserir o código que torna seu cabeçalho fixo:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

O código acima é apenas um exemplo de como ele deve ser geralmente, não um comando definitivo be-all-end-all. Tenha em mente que a primeira linha é sempre específica para cada site – substitua #website-navigation pela classe CSS ou ID do seu cabeçalho de navegação antes de voltar ao editor de página.

Depois de verificar a funcionalidade na janela de visualização da página/post, basta publicar e você terá um cabeçalho fixo. Devemos salientar que você provavelmente desejará expandir o código CSS para abranger mais do que apenas o atributo "sticky" para um cabeçalho como este - é recomendável adicionar coisas que enfatizarão visualmente o cabeçalho, como fontes de cores, tamanho, recuo, etc. Por ser um elemento permanente em uma página, ele pode ser facilmente esquecido, então você deve tentar destacá-lo.

Criando um cabeçalho fixo com um plugin

Há uma enorme sobreposição entre aqueles que precisam de um site para seus negócios ou blogs e aqueles que simplesmente não têm o conhecimento para construir algo que pareça e pareça profissional. Felizmente com o WordPress, existem muitos plugins que facilitam a vida de todos; praticamente não há necessidade de possuir nada mais do que conhecimento básico de software para atingir seus objetivos. O WP Sticky é um ótimo exemplo de plug-in que substitui toda a codificação que abordamos acima por uma interface amigável que qualquer um pode acessar rapidamente. Ao mesmo tempo, oferece a mesma quantidade de funcionalidades que você teria ao criar um cabeçalho fixo manualmente. Vamos decompô-lo.

Criando um elemento

Assim como você precisa ter um cabeçalho para começar quando estiver usando CSS, você precisa criar um elemento ao qual você adiciona o atributo sticky.

Existem duas maneiras distintas de destacar o elemento - você pode inserir a designação no campo obrigatório ou escolher o elemento por meio de uma janela de visualização clicando nele (isso funciona se você estiver tendo problemas para descobrir as designações) . Ao escolher seu elemento na janela de visualização, você verá as designações em mudança na parte superior da tela.

Descobrimos que depois de trabalhar com o plug-in por algum tempo, você ficará tão confortável com ele que quase nunca usará o seletor visual. As designações tornar-se-ão familiares, o que leva a introduzi-las de forma simples e manual, poupando-lhe tempo. Até que você esteja familiarizado com essa extensão, o selecionador visual será seu melhor amigo. Em última análise, qualquer um dos métodos levará você ao mesmo lugar – um cabeçalho fixo no frontend.

Faça com que pareça bom

Nem todos os elementos pegajosos são criados iguais, e o seu também não deve ser um exemplo comum. A seção de configurações visuais fornecerá uma infinidade de opções de personalização com as quais você pode trabalhar para tornar seu cabeçalho único em todos os sentidos.

A primeira coisa que você precisa levar em conta é o posicionamento do seu elemento. Como estamos fazendo um cabeçalho, esta será uma decisão fácil – vamos colocá-lo no topo da página. O posicionamento é a chave para um bom cabeçalho, então se você não quiser que ele fique bem no topo da página, você pode movê-lo alguns pixels para baixo para um melhor ajuste. Além disso, se o seu site usa uma barra de ferramentas de administração para usuários registrados, você pode fazer com que o plug-in verifique automaticamente e ajuste o cabeçalho de acordo.

Tocamos um pouco na necessidade de um site ser totalmente responsivo, já que existem muitas maneiras que os visitantes em potencial têm para navegar na web. Para tornar seu site totalmente adaptável, você pode escolher em quais telas o cabeçalho ficará fixo.

Normalmente, telas menores se beneficiam mais dos cabeçalhos fixos, enquanto as maiores usadas em desktops tradicionais que têm mais opções de navegação funcionam bem sem eles. Os tamanhos são divididos em quatro grupos que cobrem todos os principais tamanhos de tela.

O Z-index é uma configuração opcional que pode confundir muitos à primeira vista. Por causa disso e do fato de ser um recurso opcional, muitos provavelmente o ignorarão e o ignorarão. Se tudo funcionar, você provavelmente nunca vai olhar para trás; no entanto, se houver problemas com a exibição, o índice Z pode ser uma solução de correção rápida. Essencialmente, pense em uma página como uma coleção de pilhas em que as pilhas no topo têm números mais altos do que as na parte inferior. Portanto, se algo estiver obscurecendo seu cabeçalho fixo, tente elevar o Z-index (99999 é sugerido como um valor que funciona)

Com seu cabeçalho adesivo “no topo das pilhas”, é hora de ser ainda mais criativo ao adicionar efeitos enquanto rola para baixo. Quando ambas as opções estiverem desabilitadas, o cabeçalho apenas manterá sua posição no topo, como um recorte da página original. Você pode adicionar mais reflexos com efeitos como fade-in ou deslizar para baixo. Considere o design visual geral do seu site antes de optar por esses tipos de efeitos; no entanto – muitas vezes, menos é mais.

Os efeitos visuais não se limitam apenas aos que estão ligados ao movimento. Você também pode personalizar o próprio cabeçalho (além dos movimentos que você fez ao criar o cabeçalho). A opacidade é útil se você não quiser que o cabeçalho oculte qualquer outro conteúdo da página. Defini-lo para cerca de 50% tornará o cabeçalho e o conteúdo abaixo relativamente visíveis.

Um recurso ainda mais útil do que a opacidade é ajustar o intervalo de rolagem. Caso você tenha páginas muito longas como os blogs costumam ter, há um certo ponto em navegar para baixo onde ter um cabeçalho fixo não faz mais sentido. Esses são os momentos em que é uma boa ideia fazer com que o cabeçalho se solte depois que o visitante tiver rolado para baixo o suficiente.

Por fim, há uma opção para alterar a cor de fundo do cabeçalho quando estiver grudento, fazendo com que ele se destaque ainda mais, mas revertendo seus valores originais quando o cabeçalho não estiver mais grudento.

A última parte da edição visual nos traz de volta ao círculo completo para editar manualmente o cabeçalho fixo por meio de CSS.

Mesmo que você realmente não precise ter nenhum conhecimento prévio de codificação para usar o WP Sticky com sucesso, ele pode elevar seu trabalho se você o usar. O recurso é opcional, portanto, depende inteiramente de você se deseja usá-lo e até que ponto.

Opções avançadas

A seção de opções avançadas é basicamente sobre exclusão, ou seja, em quais casos um cabeçalho fixo deixará de ser fixo e voltará à “programação original”.

A configuração manual do tamanho da tela em que o cabeçalho não é fixo é um avanço nos quatro tamanhos padrão apresentados na seção de configurações visuais. Aqui, você será tão específico quanto quiser, portanto, se houver uma tela selvagem no futuro que não se encaixe em nenhum dos tamanhos predeterminados, você poderá criar regras que funcionem para ela.

Tornar um cabeçalho não grudento não se trata apenas do tamanho da tela, mas também do conteúdo do seu site, mais especificamente da categorização. Você pode fazer com que seu cabeçalho não fique em páginas designadas, postagens e tipos de postagem, categorias específicas ou conteúdo com determinadas tags. Todas essas condições podem ser misturadas e combinadas para fazer o compêndio perfeito quando o cabeçalho adesivo é usado e quando não é.

Da mesma forma que você escolheu o elemento adesivo (no nosso caso, cabeçalho) no início, você também pode escolher um elemento de flexão mais baixo na página em que deseja que seu cabeçalho seja pressionado. Isso essencialmente fará com que seu cabeçalho se mova para a borda desse elemento sem preenchimento ou qualquer tipo de espaço entre eles.

Para acabar com tudo, quando você está farto e não quer mais seu elemento pegajoso, sempre há a opção final de excluí-lo completamente. Esteja avisado que esta é uma ação permanente, e toda a personalização que você fez no elemento (neste caso, cabeçalho) será perdida.

Resumo

É difícil dizer qual maneira de fazer as coisas é melhor. Você definitivamente tem mais opções à sua disposição usando CSS, mas essa é uma solução para muito poucas pessoas em geral. Por outro lado, um plugin como o WP Sticky combina facilidade de uso com funcionalidade ainda robusta que o torna uma escolha perfeita para iniciantes ou para aqueles que ainda não têm certeza sobre a codificação do zero. Provavelmente, a melhor maneira de fazer um cabeçalho de trabalho pegajoso é começar com o último e trabalhar até o primeiro.

Autor: Matej Milohnoja

Costumava escrever sobre jogos e jogos em geral, mas desde então passou a testar e escrever sobre software de desenvolvimento web. Ainda joga muitos jogos, apenas por diversão.