Um dos problemas de layout mais comuns que vemos é quando a barra lateral cai abaixo do conteúdo em vez de aparecer ao lado dele. Isso instantaneamente faz com que um site pareça quebrado e pode confundir os visitantes.
Isso geralmente acontece após uma edição de tema, instalação de plugin ou pequena alteração de código — até mesmo uma tag de fechamento ausente pode desorganizar o layout. Vimos isso muitas vezes enquanto ajudávamos usuários a solucionar problemas de seus temas.
A boa notícia é que é fácil corrigir assim que você souber onde procurar. Você não precisa ser um desenvolvedor para rastrear o problema.
Neste guia, mostraremos as causas mais prováveis e o guiaremos por etapas simples para recolocar sua barra lateral no lugar.
O que Causa o Erro da Barra Lateral do WordPress Abaixo do Conteúdo?
A causa mais comum da barra lateral aparecendo abaixo do conteúdo é um erro de HTML ou CSS quebrando o layout.
Cada <div> em HTML precisa ser devidamente fechado. Se o template responsável por exibir a página tiver uma tag <div> não fechada, isso quebrará o layout.
Da mesma forma, uma tag </div> de fechamento indesejada ou extra também pode afetar o layout e fazer com que a barra lateral desça.
Além do HTML, o CSS também afeta o design geral de cada elemento em seu site WordPress. Ele é usado para definir a largura, o alinhamento e o flutuar de elementos em seu layout.
Simplificando, se a largura da sua área de conteúdo for maior que o espaço disponível, isso forçará a barra lateral a descer.
Primeiro, você precisará descobrir qual código específico está causando esse erro na barra lateral do WordPress.
Dito isso, vamos dar uma olhada em como solucionar e corrigir facilmente o erro da barra lateral abaixo do conteúdo no WordPress. Você pode usar estes links rápidos para pular para uma solução de solução de problemas específica:
- Desfazer Alterações Recentes no Seu Tema do WordPress
- Limpar o Cache do WordPress
- Descartar Plugins do WordPress
- Corrigir Tags Quebradas Quebrando o Layout
- Encontrar o CSS Movendo a Barra Lateral Para Abaixo do Conteúdo
- O Que Fazer Se Você Ainda Vir a Barra Lateral Abaixo do Conteúdo
- Aprenda Mais Maneiras de Resolver Erros Comuns do WordPress
1. Desfazer Alterações Recentes no Seu Tema do WordPress
Geralmente, o problema da barra lateral é causado por alterações nos arquivos do seu tema do WordPress.
Se você fez recentemente alguma alteração no seu tema do WordPress ou tema filho, examinar essas alterações será uma maneira rápida de corrigir esse erro.
Você também pode entrar em contato diretamente com o desenvolvedor do seu tema para obter suporte. Para mais informações, confira nosso tutorial sobre como pedir suporte ao WordPress corretamente e obtê-lo.
Se você não conseguir descobrir quais alterações precisará reverter, continue lendo e mostraremos outras maneiras de solucionar problemas.
2. Limpar o Cache do WordPress
Quando você faz alterações que não aparecem imediatamente, isso geralmente se deve a problemas de cache.
É comum que plugins de cache mostrem uma versão mais antiga da mesma página. Limpar o cache do WordPress e o cache do navegador ajudarão você a ver as alterações aplicadas ao seu site.
3. Descarte Plugins do WordPress
A aparência e o estilo do seu site WordPress são controlados pelo tema que você está usando. No entanto, às vezes plugins do WordPress também podem adicionar seu próprio HTML e CSS ao seu site.
Por exemplo, adicionar um formulário de contato em uma página ou um popup lightbox carregará CSS e HTML adicionais.
Para garantir que o problema não seja causado por um plugin do WordPress, você pode desativar temporariamente todos os plugins do WordPress em seu site.
Para fazer isso, basta ir para Plugins » Plugins Instalados no seu painel de administração do WordPress e marcar a caixa ao lado de ‘Plugin’ na parte superior da lista. Em seguida, abra o menu suspenso, selecione ‘Desativar’ e clique em ‘Aplicar’.
Se o problema desaparecer, isso significa que um plugin estava causando o problema. Simplesmente ative todos os seus plugins do WordPress um por um, verificando seu site após cada plugin para descobrir qual deles está causando o problema.
Depois disso, você pode entrar em contato com o suporte do plugin para encontrar uma solução e relatar o problema.
Para obter orientações detalhadas, você pode conferir nossos tutoriais sobre como desativar facilmente plugins do WordPress e como desativar plugins quando você não consegue acessar a área de administração do WordPress.
4. Corrigir Tags <div> Quebradas Que Quebram o Layout
Como mencionamos anteriormente, tags <div> quebradas são uma das causas comuns da barra lateral se movendo para baixo do conteúdo.
Se o problema for causado em uma área específica do seu site, você pode verificar o template responsável por exibir esse código.
Por exemplo, se esse problema ocorrer apenas em posts individuais, você pode querer verificar o template single.php. Para descobrir qual template verificar, consulte nossa folha de dicas completa da hierarquia de templates do WordPress.
A maneira mais fácil de encontrar e corrigir rapidamente um elemento div não fechado é usando a ferramenta de validação W3C.
Você também pode usar a ferramenta Inspecionar ou aplicativos de editor de código que ajudam a depurar código destacando as tags de início e fim dos elementos.
Aqui está um exemplo de como destacar as tags de início e fim de um elemento:
Ao analisar o código, você precisa garantir que qualquer tag <div> que seja aberta também tenha uma tag de fechamento </div>.
Da mesma forma, você também deve procurar por uma tag de fechamento </div> órfã que não tenha uma tag <div> de abertura correspondente.
Se você encontrou as tags HTML quebradas, corrigi-las resolverá o problema da barra lateral aparecendo abaixo do conteúdo.
5. Encontre o CSS que Move a Barra Lateral Abaixo do Conteúdo
O CSS controla os aspectos mais importantes do design do seu site. Seu tema WordPress usa CSS para definir a largura das áreas de conteúdo e da barra lateral dentro de um layout de grade.
Este valor é a porcentagem da área de visualização disponível. Em dispositivos móveis, seu tema empurrará automaticamente a barra lateral para baixo do conteúdo.
Para descobrir qual CSS está causando o problema, você pode usar a ferramenta Inspecionar. Simplesmente mover seu conteúdo para os campos de wrapper, seção de conteúdo e áreas de barra lateral mostrará sua largura e altura.
Por exemplo, se sua área de conteúdo tiver 70% de largura e a área da barra lateral tiver 33%, ela será automaticamente movida para baixo. Ao calcular esses valores, você também pode querer considerar o espaço usado pelos valores de padding e margin em cada seção.
O Que Fazer Se Você Ainda Vir a Barra Lateral Abaixo do Conteúdo
Se nenhuma das etapas acima funcionou, não se preocupe – ainda há mais algumas coisas que você pode tentar.
Primeiro, recomendamos que você consulte nosso guia completo de solução de problemas do WordPress. É uma ótima maneira de descartar outros problemas ocultos que podem estar afetando seu layout.
Você também pode habilitar o modo de depuração no WordPress. Isso não corrigirá o erro diretamente, mas pode mostrar um erro de PHP ou de plugin que está quebrando seu layout.
Se o modo de depuração apontar para um plugin específico, tente desativá-lo temporariamente ou substituí-lo por uma alternativa que não afete o layout do seu tema.
Aprenda Mais Maneiras de Resolver Erros Comuns do WordPress
Está enfrentando outros problemas no seu site WordPress? Confira os tutoriais abaixo:
- Como Corrigir o Erro de JSON Inválido no WordPress (Guia para Iniciantes)
- Problemas Comuns do Editor de Blocos do WordPress e Como Resolvê-los
- Como Corrigir Erro de Upload de Imagem HTTP no WordPress
- Como Corrigir o Botão Adicionar Mídia Não Funciona no WordPress
- Como Corrigir o Erro 'Outra Atualização Está em Andamento' no WordPress
- Como Corrigir Imagens Destacadas Aparecendo Duas Vezes em Posts do WordPress
- Como Corrigir o Problema do Editor de Sites em Branco no WordPress (Passo a Passo)
Esperamos que este artigo tenha ajudado você a aprender como corrigir o problema da barra lateral do WordPress abaixo do conteúdo. Você também pode querer ler nosso guia definitivo de erros comuns do WordPress e nosso artigo sobre como exibir barras laterais diferentes para cada post e página do WordPress.
Se você gostou deste artigo, 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 no Facebook.
Alessio
Obrigado por compartilhar, isso resolveu meu problema. Fico feliz em ver que eu não fui o único a passar por isso.
WPBeginner Support
You’re welcome, glad our guide was helpful
Admin
Gina Detwiler
Não tenho certeza de como encontrar esse elemento div. Você pode explicar um pouco mais? Tenho esse problema desde o início com meu site e não sei como consertá-lo.
WPBeginner Support
Você precisará dar uma olhada no código do seu tema personalizado em um editor de código e isso deve ajudar a encontrar o div incorreto. Você também pode dar uma olhada no seu site usando a ferramenta "Inspecionar Elemento": https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Shai
Muito obrigado!
Você me salvou muito tempo tentando resolver isso.
Como você disse, eu tinha um elemento div extra fechado
Dale Jennings
Estou tentando colocar meus posts atuais à esquerda e os posts recentes em uma barra lateral direita, mas a barra lateral está no final da página, também é muito larga, e eu não entendo do que você estava falando, pois sou novo nisso. Qual é uma solução fácil? Ou existe uma?
Ayla
Estou tendo o problema em que minha barra lateral aparece no final de todas as páginas. Não sou muito experiente com isso, então não fiz nada de especial além de transferir meu domínio do Google recentemente. Tenho construído o site no WordPress e não tive problemas até mudar o tema. Tentei as instruções acima, mas não consegui encontrar nenhuma dessas coisas.
WPBeginner Support
Oi Ayla,
Tente alternar temporariamente para seu tema anterior ou um tema padrão. Se isso resolver o problema, então o problema é com seu tema. Tente entrar em contato com o desenvolvedor do tema para ver se ele pode ajudá-lo a corrigir isso.
Admin
Jared H
Resolveu meu problema, obrigado por postar!
Dene
obrigado pessoal – este post acabou de resolver meu problema. Muito apreciado
Donald Efiom
Estou com o mesmo problema agora e não consigo encontrar onde editar o HTML da página da loja onde estou exibindo produtos usando o plugin wcommerce. Quando inspeciono o elemento no meu navegador, consigo depurar o erro e corrigi-lo, mas no meu diretório raiz real, não consigo encontrar a página que contém o HTML da página da loja do woocommerce que posso editar. Por favor, ajude!
Maria Appleby
Não consigo de jeito nenhum consertar o problema da minha barra lateral. Procurei por blocos abertos. Removi um post de blog que estava estranho com HTML devido à cópia de conteúdo. Tentei um tema diferente. Tirei meus widgets (e depois tentei adicionar um para ver o que aconteceria – o botão “seguir blog” – ainda na parte inferior). Tentei o validador, mas não entendo realmente o que ele está me dizendo. Quando inseri URLs de posts de blog diferentes, obtive as mesmas mensagens de erro. Desculpe se pareço tão estúpida… Tenho o blog há muito tempo, mas só recentemente comecei a adicionar muito conteúdo e ainda não sei bem o que estou fazendo. A barra lateral acabou indo do lado direito para a parte inferior do blog, muito recentemente (nos últimos dias). Você pode me ajudar?
WPBeginner Support
Olá Maria,
Parece que você está usando um blog WordPress.com. Por favor, veja nosso guia sobre a diferença entre WordPress.org auto-hospedado vs blog WordPress.com gratuito.
Admin
Sparsh Goyal
Eu tenho o mesmo problema, mas não consigo resolvê-lo. Apenas minha página inicial tem esse problema. A página do tipo post e a página do tipo página estão funcionando bem. A barra lateral da minha página inicial está indo para o topo em vez de ficar ao lado do meu conteúdo. Você pode verificar o que está dando errado no meu site? Meu site é coasilat.com
Mustafa
Obrigado. O problema foi resolvido. Era um elemento div extra. Quando me livrei dele, o problema foi corrigido.
Jan Reilink
Salva-vidas, obrigado!
Asha Shendre
Tive problemas o dia todo por isso.
A solução do problema só encontrei aqui.
Obrigado..
Muito obrigado senhor…
Harish
Obrigado por ajudar
Sly
Olá, sou iniciante. Não sei NADA sobre código CSS ou HTML, não edito meu tema, não tenho um tema filho. Eu só adiciono plugins para o que preciso fazer. Parece que estou tendo o problema com TODAS AS MINHAS PÁGINAS DE POSTAGENS DO BLOG. A barra lateral está abaixo das postagens do blog. Não tenho ideia do que é uma div e como consertar isso. Caros profissionais, qual seria a melhor maneira para eu resolver este problema da barra lateral?
Tamara
Sou iniciante e também não sou programadora, mas consegui resolver este problema usando o link do Validador W3 nesta página. No topo do validador, em Opções, marquei todas as disponíveis, depois inseri o endereço web do meu blog e executei o validador. Abaixo de uma lista numerada de erros, havia uma exibição muito detalhada (e intimidante, mas aguente firme) dos erros conforme eles estão localizados no texto do meu blog. Concentrei-me nos mencionados neste artigo. Percorrendo o relatório detalhado, encontrei um erro destacado em vermelho. Como meu texto estava sendo exibido, pude ver que ele estava em uma das minhas postagens do blog logo após um link da internet que eu havia inserido. Fui para essa postagem do blog no painel do WordPress, cliquei em "editar" e deletei o link. (Segurei "delete" para ter certeza de que peguei qualquer coisa invisível que pudesse estar lá e dei um backspace em algumas letras pelo mesmo motivo. Depois salvei a postagem do blog. Minha página web foi consertada! Depois re-editei a postagem do blog para adicionar o link de volta e tudo permaneceu bem. Problema resolvido.
Lisa W Boyle
Obrigado, consegui encontrar e corrigir o problema imediatamente com base nas suas instruções. Descobri que coloquei um extra no meu arquivo single.php. Você é um salva-vidas, muito obrigado!
Roney Oenophile
Não sei o que fiz de errado, por favor me ajude. Eu estava editando um texto e acidentalmente apertei uma combinação de teclas que mudou a forma como ele aparecia. Alguns botões, como tela cheia, sumiram agora. E o botão de publicação foi movido para o lado esquerdo. E a imagem que eu carreguei com a postagem se moveu para cima do meu conteúdo e está muito grande agora. Não sei como aconteceu, não sei qual é o problema. Eu não sou boa com computadores. Eu geralmente escrevo posts. Por favor, me ajude. O endereço da minha página é wordpress.com
WPBeginner Support
Por favor, veja nosso guia sobre a diferença entre WordPress.org auto-hospedado vs blog gratuito WordPress.com. Você precisa entrar em contato com o suporte do WordPress.com.
Admin
Danielle
Primeira vez assumindo a atualização do nosso site… tentei atualizar a página inicial estática e de alguma forma minha barra lateral foi para o final. Não consigo ver nenhuma tag de ou …. ajuda! Não quero dizer para a pessoa que assumi que já estraguei tudo se eu conseguir descobrir o que fiz!
giovanni
Alguém pode me ajudar, eu tenho o mesmo problema…
este é o meu header.php
Susan
Perfeito! Obrigado! Eu sabia no momento em que você disse div exatamente qual post no meu blog da comunidade precisava ser editado!
Leah
This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out.
Sam
Ah! Você acabou de me poupar um monte de tempo e frustração! Obrigado
srik
Muito obrigado por isso! Foi muito útil
Amy
Obrigado por esta postagem. Estou tentando corrigir este problema no meu site agora mesmo. Tentei tudo o que foi mencionado nesta postagem, mas ainda estou tendo problemas. Sei um pouco sobre sites, mas estou completamente perdido sobre por que minha barra de navegação superior está indo para 2 linhas e por que minha barra lateral está sendo empurrada para baixo. Meu site ainda não está no ar, mas aqui está o site
Obrigado por qualquer ajuda!!
sean
Problema semelhante com meu blog personalizado dentro do meu site; a barra lateral desliza sob o rodapé se não houver conteúdo suficiente para empurrá-la para baixo.
Descobri que remover (ou, mais seguro, comentar) o seguinte resolveu o problema:
Não sei para que serve este div vazio e, até agora, não afetou negativamente o blog. Outra razão mais óbvia é devido a divs sem tags de fechamento – é um pouco mais difícil acompanhar todas as suas tags div abertas/fechadas no WP, pois o rodapé e o cabeçalho são removidos, ao contrário de um site HTML padrão.
Sean
Er, isso é comentar o div "delimitador" vazio no final de várias páginas do WP – ele desapareceu do meu comentário original!
David Pomazzo
você pode olhar meu site e me ajudar? http://www.americasfreedomfighters.com/ inseri o google adsense e agora minha barra lateral está empurrada para baixo e tenho uma história subindo na barra lateral! muito obrigado
Jen
THANK YOU! It was the content width that did it for me
Cecilia
Tenho este problema e não consigo resolvê-lo (estou tentando há vários dias)
Aqui está o meu site:
Por favor, eu realmente preciso de ajuda. Obrigado!!!! =)
WPBeginner Support
Provavelmente você precisa adicionar `clear` antes de terminar seu div `.hfeed` assim:
1-click Use in WordPress
Admin
Katie Clark
Eu tenho este problema e nem sei por onde começar, pois não fiz nenhuma edição hoje. Alguma sugestão? Aqui está o meu site
http://clarkscondensed.com/
Equipe Editorial
Seu site parece bom no Chrome.
Admin
Doomish
Dica incrível! Vai ser muito útil, e o comentário da Kathy é tipicamente o que acontece comigo.
kathy
Como a maioria dos temas tem o CSS adequado, considero que este é quase sempre um problema de HTML mal fechado. Geralmente ocorre em uma página específica, porque o usuário tentou adicionar seu próprio HTML no editor de posts e as coisas deram errado a partir daí. Erro simples, mas que pode levar muito tempo para depurar.