WP Sticky Sidebar – Barra lateral no WordPress

Com WP Sticky Sidebar, você pode criar uma barra lateral fixa, ou flutuante no seu tema WordPress. O plugin cola a barra lateral do seu site, tornando-a permanentemente visível durante a rolagem.

Plugin WP Sticky Sidebar - barra lateral pegajosa, trabalhará fora da caixa com alguns temas que usam id de elemento segundário, por exemplo: #sidebar para barra lateral. Mas você pode adicionar isso dentro das configurações do plugin.

Por padrão, o plugin usa o ID do elemento #secondary no campo de configuração Sticky Class e deve ser modificado para diferentes temas para que funcione. Não esqueça disso, é um campo obrigatório, mas é fácil de adicionar.

O plugin é localizado e responsivo, ou seja vários idiomas e várias telas. A vantagem deste plugin simples é que aumenta a usabilidade do site WordPress desde sidebar é visível na maioria das vezes.

Opções de Plugin WP Sticky Sidebar

Sticky Class: classe CSS ou id do elemento da barra lateral desejado para ser pegajoso. O padrão é #secundary. Este é um campo obrigatório e deve ser preenchido, com o ID, ou Class do CSS da barra lateral do seu tema.

Container Class: Classe ou ID do elemento Container. Se o script for deixado em branco o plugin tentará adivinhar. Deve ser um elemento que contenha a barra lateral e o conteúdo. Geralmente é #main ou # main-content ou #primary. Principalmente esse parâmetro não é necessário para a maioria dos temas.

Margem superior adicional: uma margem superior adicional em pixels. O padrão é 90.

Margem inferior adicional: uma margem inferior adicional em pixels. O padrão é 0.

Desativar a barra lateral persistente se a largura da tela for menor que o número desejado de pixels. Ele desabilita o script em dispositivos móveis ou qualquer dispositivo cuja tela não seja tão larga quanto o número de pixels inserido.

Atualize a opção de solução de problemas de altura da barra lateral. Tente isto se sua barra lateral perder sua cor de fundo…

Desativar barra lateral pegajosa em: página inicial, página do blog, páginas, postagens, categorias, tags, arquivos

  • Ativar postagens e páginas específicas se anteriormente desativadas em todo o site.
  • Pronto, depois de fazer estas configurações sua barra lateral deve estar funcionando.

Outros dados do plugin WP Stick Sidebar

WP Sticky Sidebar é compatível com o sidebar Automizer, que equaliza a altura da barra lateral com a altura do conteúdo, se configurado corretamente. Você pode usar esses dois plugins em uma combinação. Principalmente, se você tiver muitos widgets, juntamente com o conjunto de mensagens longas e ocultá-los em posts com pouco ou nenhum conteúdo.

Criando uma Barra lateral flutuante apenas com CSS

Se você quiser tentar criar sua barra lateral flutuante, ou pegajosa; como queira chamar; apenas com CSS, siga lendo.

Primeiramente, clique em qualquer lugar na sua barra lateral, para procurar o ID da barra lateral. Clique com o botão direito do mouse e clique em Inspecionar. Eu recomendo usar o navegador Chrome para isso.

Dependendo do seu tema, pode ser um ID ou uma classe. Se a sua ID da barra lateral é #main-sidebar, então você pode usar algum CSS como este:

#main-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}

Se, em vez disso, o seu tema usar uma classe, você usaria algo assim:

.main-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}

Mas o que exatamente isso faz? Vamos passar por isso peça por peça.

Posição -webkit-sticky: isso é necessário para os navegadores de internet do Safari.

Posição: sticky: define a barra lateral para outros navegadores, como o Chrome e o Firefox.

Top é o deslocamento do topo da tela quando a barra lateral entra em seu estado de aderência.

Se você quiser 15 pixels de espaço entre o seu cabeçalho e a barra lateral que você usaria top: 15px;

A posição fixa nunca funcionou no Chrome, mas foi recentemente adicionada e funciona perfeitamente. Posicionamento aderente funciona no Chrome, Firefox e Safari. Não funciona no Internet Explorer ou no Opera. Para funcionar, você teria que fazer a chamada se a compatibilidade do Internet Explorer é importante para o seu site.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Botão Voltar ao topo
Fechar

AdBlock Detectado

Por favor, não bloqueie nossos anúncios. Não temos nada que impeça a leitura dos artigos. Também não vamos coletar seu dados!