Como Exibir Barra Lateral Diferente para Cada Post e Página no WordPress

Você quer exibir conteúdo diferente na barra lateral do seu WordPress para posts e páginas específicas?

Uma barra lateral padrão, que serve para todos, é frequentemente uma oportunidade perdida. Ao personalizar a barra lateral para conteúdo específico, você pode aumentar o engajamento do usuário e as conversões.

Embora isso pareça técnico, vimos em primeira mão como as ferramentas certas facilitam a criação e o gerenciamento de diferentes barras laterais para o seu site.

Neste guia, mostraremos como exibir barras laterais diferentes para cada post e página no WordPress.

Por que exibir uma barra lateral diferente para certas páginas ou postagens no WordPress?

A principal razão para exibir uma barra lateral diferente é fornecer uma experiência mais relevante e direcionada para seus visitantes. Isso ajuda a melhorar o engajamento do usuário, aumentar as conversões e tornar seu site mais eficaz.

Em vez de mostrar o mesmo conteúdo genérico em todos os lugares, você pode adaptar a barra lateral para corresponder à página ou postagem específica que um usuário está visualizando.

Por exemplo, você pode mostrar widgets específicos de categoria em suas postagens de blog, exibir informações relacionadas a produtos em suas páginas de loja ou exibir feeds de mídia social em sua página Sobre.

Barras laterais personalizadas também permitem que você crie uma experiência mais focada, apresentando links relevantes, anúncios ou botões de call-to-action.

Dito isso, vamos analisar 3 métodos para adicionar barras laterais diferentes para posts e páginas no WordPress. Você pode usar os links rápidos abaixo para pular para o método que melhor lhe convier:

• Method 1: Create a Custom Theme With Different Sidebars for Specific Pages or Posts (Recommended)
• Method 2: Show a Different Sidebar on Certain Pages With a Free Plugin (Classic Themes)
• Method 3: Add Different Sidebars to Specific Templates in WordPress Full-Site Editor (Block Themes)
• Perguntas Frequentes Sobre Barras Laterais Personalizadas

Método 1: Crie um Tema Personalizado com Barras Laterais Diferentes para Páginas ou Posts Específicos (Recomendado)

De todos os métodos que experimentamos para este tutorial, recomendamos criar um tema personalizado. A razão é que ele oferece a maior flexibilidade e controle sobre o design do seu site WordPress.

Dito isso, sugerimos seguir este método apenas se você estiver nas fases iniciais da construção do seu site ou se estiver interessado em trocar seu tema WordPress corretamente. Isso porque a troca de temas pode impactar significativamente seu conteúdo e layout existentes.

Se você não quiser trocar de tema, pode pular para o método 2 (temas clássicos) ou método 3 (temas de blocos).

Para este método, você precisará de um plugin de construtor de páginas do WordPress.

Com base em nossa experiência testando dezenas de construtores de temas, recomendamos o uso de uma ferramenta como SeedProd ou Thrive Architect. Eles oferecem muito mais controle e opções de personalização do que os recursos integrados do WordPress.

Várias de nossas marcas parceiras usam o SeedProd porque ele é amigável para iniciantes e confiável. Você pode aprender mais sobre a ferramenta em nossa análise do SeedProd.

Etapa 1: Instalar e Ativar o SeedProd

Antes de mais nada, instale o plugin SeedProd em seu site. Se for a sua primeira vez, consulte nosso guia para iniciantes sobre como instalar um plugin WordPress.

Assim que terminar, insira sua chave de licença do SeedProd no campo apropriado e clique em ‘Verificar chave’.

Etapa 2: Escolha um Kit de Modelo de Tema

Em seguida, vá para SeedProd » Construtor de Temas.

Em seguida, clique no botão ‘Kits de Modelos de Tema’.

Agora você deve ver todos os kits de modelos de tema disponíveis. Sinta-se à vontade para usar qualquer um deles como base para seu tema personalizado.

Você também pode passar o mouse sobre cada kit e clicar no botão de lupa para visualizar o tema mais de perto.

Para este tutorial, recomendamos escolher um kit de tema que já inclua um design de barra lateral.

Isso permite que você duplique a ‘parte do modelo da barra lateral’ existente e a personalize, o que é muito mais rápido do que construir uma nova do zero.

Por exemplo, o kit de tema Curbside Food Truck tem um modelo de postagem única que já inclui uma barra lateral:

Depois de decidir sobre um kit, basta passar o cursor sobre ele.

Em seguida, clique no ícone de marca de verificação laranja quando ele aparecer.

Agora, aguarde alguns momentos para o SeedProd configurar seu tema.

Etapa 3: Duplique e Edite o Modelo da Barra Lateral

Após isso, você deverá ser redirecionado para a página de configurações do 'Theme Builder' novamente e verá que o SeedProd criou vários modelos de tema para o seu site WordPress.

Agora podemos começar a editar seu modelo de tema.

Digamos que você queira que a barra lateral em suas páginas de arquivo de categoria de blog seja diferente daquela em suas postagens de blog. Nesse caso, você precisará criar 2 modelos de tema de barra lateral diferentes.

Primeiro, encontre o modelo de tema 'Sidebar' em seu kit. Esta é a barra lateral padrão que seu tema usa quando uma página requer uma barra lateral.

Para ilustração, duplicaremos este modelo e o editaremos para torná-lo diferente da versão original. Para fazer isso, você pode passar o mouse sobre o modelo e clicar em 'Duplicar'.

Agora você deve ver uma versão copiada do seu modelo de barra lateral.

Aqui, clique em 'Editar Design'.

Etapa 4: Personalize Sua Nova Barra Lateral

Você chegará ao editor do SeedProd. Se o modelo de barra lateral parecer mais largo do que o esperado, não se preocupe. O tamanho será ajustado quando a barra lateral for adicionada a uma página posteriormente.

No tema escolhido, o modelo de barra lateral padrão exibe uma barra de pesquisa, um call-to-action para inscrição em newsletter, links para nossas páginas de categoria de blog e uma prévia do nosso feed do Instagram.

Vamos substituir alguns desses elementos. Esses blocos foram organizados em grupos ou linhas, para que possamos excluir vários blocos em uma única linha de uma vez, em vez de removê-los um por um.

Para fazer isso, você pode passar o mouse sobre um elemento até que uma linha azul escura apareça sobre um grupo inteiro de blocos. Em seguida, clique no ícone de lixeira 'Excluir Linha' na parte superior do elemento.

Para criar uma nova linha, passe o mouse sobre o elemento imediatamente acima de onde você deseja que a nova linha apareça. Quando uma linha azul escura aparecer, clique no ícone de ‘+’ que surge abaixo dela.

Em seguida, você precisa clicar no ícone de ‘+’ abaixo.

Agora, você pode escolher um layout para a linha.

Vamos escolher a primeira opção porque é a mais adequada para nossas necessidades.

É aqui que você pode começar a se divertir e adicionar todos os tipos de blocos à sua barra lateral.

O SeedProd tem muitas opções para escolher, desde um cronômetro e um hotspot de imagem até uma barra de progresso e muito mais. Você pode usar a barra de pesquisa ou rolar para baixo na aba ‘Blocos’ para encontrar o bloco que precisa.

Assim que encontrar um bloco que goste, basta arrastá-lo e soltá-lo na linha.

Para fins de exemplo, decidimos adicionar o bloco 'Depoimentos'.

Você pode usar isso para exibir uma avaliação positiva de um cliente como prova social. Se quiser aprender como adicionar um também, pode ler nosso guia sobre como adicionar depoimentos rotativos no WordPress.

Sinta-se à vontade para adicionar mais linhas e blocos neste ponto.

Depois de ficar satisfeito com o design da barra lateral, basta clicar no ícone de seta ao lado do botão 'Salvar' no canto superior direito da página. Em seguida, clique em 'Publicar'.

Etapa 5: Adicione a Nova Barra Lateral a um Modelo de Página

Agora, vamos adicionar esta nova barra lateral a um modelo de postagem ou página. Para fazer isso, volte para SeedProd » Theme Builder no seu painel do WordPress.

O kit de tema que estamos usando tem 2 modelos de tema que apresentam uma barra lateral: 'Postagem Única' e 'Arquivos, Resultados de Pesquisa'. O primeiro é para postagens do WordPress, enquanto o segundo é para todas as páginas de arquivo, incluindo arquivos de categoria, bem como a página de resultados de pesquisa.

Ambos os modelos atualmente usam o mesmo modelo de barra lateral.

Neste caso, queremos que o modelo 'Arquivos, Resultados de Pesquisa' use a nova barra lateral que acabamos de criar. Portanto, localize o modelo que deseja editar e clique em 'Editar Design'.

No editor SeedProd, passe o mouse sobre a área com a barra lateral e, quando uma barra de ferramentas laranja aparecer em cima dela, clique nela.

O painel de configurações à esquerda deve dizer 'Editando: Partes do Modelo'.

No menu suspenso Parte do Modelo, você precisa selecionar o modelo de barra lateral que acabou de criar.

Agora você deve ver que sua nova barra lateral foi adicionada ao seu modelo de página.

Depois disso, basta clicar em 'Salvar' para publicar suas alterações.

Etapa 6: Ative Seu Tema SeedProd

Nesta fase, você pode criar mais barras laterais e adicioná-las a outras páginas repetindo os mesmos passos anteriores.

Quando estiver satisfeito, volte para SeedProd » Theme Builder novamente e ative a configuração ‘Enable SeedProd Theme’ até que diga ‘YES.’ Isso ativará seu tema SeedProd em seu site.

E é isso!

Veja como fica nossa barra lateral personalizada:

Método 2: Exiba uma Barra Lateral Diferente em Certas Páginas com um Plugin Gratuito (Temas Clássicos)

A maioria dos temas clássicos do WordPress tem áreas de barra lateral predefinidas e elas geralmente exibem a mesma barra lateral em todo o seu site.

Embora isso funcione, pode parecer limitante se você quiser exibir conteúdo exclusivo para diferentes seções.

Felizmente, você pode obter mais controle facilmente usando um plugin gratuito. Recomendamos Lightweight Sidebar Manager. Este plugin permite que você crie barras laterais personalizadas ilimitadas e as atribua a posts, páginas, categorias específicas e muito mais.

Passo 1: Instale o Plugin Lightweight Sidebar Manager

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

Passo 2: Crie uma Nova Barra Lateral Personalizada

Após a ativação, você precisa ir para Aparência » Barras Laterais. Para criar a primeira barra lateral, clique no botão ‘Adicionar Nova’.

Agora você pode digitar um título para a nova barra lateral do WordPress. Isso é apenas para sua referência, então você pode usar o que quiser.

Com isso feito, abra o menu suspenso ‘Sidebar To Replace’. Esta configuração permite que você escolha quais das áreas de barra lateral padrão do seu tema (como ‘Main Sidebar’ ou ‘Blog Sidebar’) serão substituídas pela sua nova barra lateral personalizada.

Escolha o local onde você deseja exibir a barra lateral. As opções que você vê podem variar dependendo do seu tema WordPress. 

Etapa 3: Configurar Regras de Exibição e Exclusão

Agora, você pode controlar onde a barra lateral aparece criando regras de inclusão ou exclusão. 

Para criar uma regra de inclusão, basta abrir o menu suspenso ‘Display On’ e escolher as páginas, posts, tipos de post personalizados ou categorias onde você deseja usar a barra lateral. 

Por exemplo, você pode adicionar a barra lateral a uma página específica, como sua página de erro 404, o arquivo do autor ou a página do blog.

Outra opção é usar a barra lateral para uma página, post ou categoria específica selecionando ‘Specific Pages/Posts/Taxonomies’.

Isso adiciona uma caixa onde você pode digitar a página, post ou categoria.

Para criar mais regras de inclusão, basta clicar no botão ‘Add Display’ Rule.

Isso adiciona uma seção onde você pode criar a nova regra de inclusão.

Se preferir, você pode criar regras de exclusão em vez disso. Por exemplo, você pode querer mostrar a barra lateral em todas as páginas, exceto na página inicial. 

Você também pode combinar regras de inclusão e exclusão para controlar exatamente onde a barra lateral aparece em seu blog WordPress.

Para criar uma regra de exclusão para a localização da barra lateral, basta clicar no botão ‘Adicionar Regra de Exclusão’.

Na nova seção ‘Não Exibir Em’, abra o menu suspenso e selecione a página ou post que não deve usar esta barra lateral. 

Você também pode excluir a barra lateral de páginas do WordPress que tenham uma categoria específica, seguindo o mesmo processo descrito acima.

Etapa 4: Definir Visibilidade por Função de Usuário (Opcional)

Depois de decidir onde a barra lateral aparecerá, você pode querer mostrar conteúdo diferente para usuários diferentes.

Por exemplo, se você tem um site de membros, você pode querer usar uma barra lateral diferente para visitantes do que para membros logados. 

Para fazer isso, abra o menu suspenso ‘Usuário’ e escolha uma função no menu suspenso. Agora, apenas pessoas com esta função de usuário específica verão a barra lateral. 

Finalmente, você pode querer digitar uma descrição opcional. Isso aparecerá apenas no painel do WordPress, então é uma boa maneira de compartilhar informações com outros administradores ou usuários.

Se você for criar muitas barras laterais, também pode usar este campo para deixar notas e lembretes úteis para si mesmo.

Quando estiver satisfeito com as informações que inseriu, basta clicar em ‘Publicar’.

Etapa 5: Adicionar Widgets à Sua Nova Barra Lateral

Com isso feito, vá para Aparência » Widgets. Agora você verá todas as áreas de widget que seu tema suporta por padrão, mais a nova barra lateral que você criou na etapa anterior.

Agora você pode adicionar widgets à barra lateral, assim como qualquer outra seção de widgets.

Para instruções passo a passo, consulte nosso guia sobre como adicionar e usar widgets do WordPress. 

Quando estiver satisfeito com a configuração da barra lateral, clique em ‘Atualizar’.

Agora, se você visitar seu blog WordPress, verá a nova barra lateral ativa.

Para criar mais barras laterais de tema, basta continuar repetindo essas etapas. 

Método 3: Adicione Barras Laterais Diferentes a Templates Específicos no Editor de Site Completo do WordPress (Temas de Bloco)

Se você usar um tema de blocos, como o tema Twenty Twenty-Four ou Hestia, poderá usar o editor de site completo para criar barras laterais personalizadas e colocá-las onde quiser.

Usaremos o tema Twenty Twenty-Four para demonstrar este método.

A grande vantagem dos temas de blocos é que todos eles usam a mesma ferramenta padrão: o Editor de Site Completo. Embora os modelos específicos dentro de cada tema possam ser diferentes, o processo de edição é consistente.

Isso significa que você não precisa de um plugin de barra lateral especial para adicionar uma barra lateral diferente às suas páginas ou postagens.

Etapa 1: Abrir o Editor de Site Completo

Primeiro, vá para Aparência » Editor no seu painel do WordPress.

Aqui, você verá alguns menus para personalizar seu tema de blocos.

Para criar uma nova barra lateral, você precisa selecionar ‘Padrões’.

Etapa 2: Duplicar a Parte do Modelo da Barra Lateral

Agora, clique em ‘Todas as partes do modelo’.

Partes de modelo são blocos reutilizáveis de conteúdo, como um cabeçalho, rodapé ou barra lateral, que podem aparecer em várias páginas do seu site.

Você deverá ver uma parte de modelo chamada ‘Sidebar.’ Clique no menu de três pontos e selecione ‘Duplicar.’ Isso criará uma cópia da parte do modelo da barra lateral que você poderá personalizar.

Na nova janela pop-up, dê um nome à sua nova barra lateral para identificá-la facilmente mais tarde.

Na seção ‘Área’, selecione ‘Geral’. Feito isso, basta clicar em ‘Duplicar’.

Etapa 3: Personalizar a Nova Barra Lateral

Agora você deve ver sua barra lateral recém-duplicada na lista de partes do modelo.

Simplesmente clique na miniatura para abrir a interface de edição.

Agora, você pode começar a personalizar sua barra lateral, adicionar mais blocos ou configurá-los para combinar com o design do seu site. O editor de site completo funciona da mesma forma que o editor de blocos, no sentido de que você só precisa arrastar e soltar blocos na parte do modelo.

No nosso caso, decidimos exibir nossas posts mais recentes, um botão de call-to-action para assinar nossa lista de e-mail e um divisor de forma para separar esses elementos.

Assim que estiver satisfeito com a aparência da barra lateral, clique no botão ‘Salvar’.

Passo 4: Adicionar a Nova Barra Lateral a um Modelo de Página

Agora, precisamos adicionar essa nova barra lateral a um modelo de página.

Primeiro, volte ao menu principal do editor de site completo. Em seguida, clique em ‘Modelos’.

O modelo Twenty Twenty-Four tem vários modelos de página com uma barra lateral, mas todos eles usam a mesma parte do modelo de barra lateral. Vamos alterar um deles com nossa barra lateral recém-criada.

Para fazer isso, selecione um modelo de página com uma barra lateral. No nosso caso, selecionaremos ‘Página com Barra Lateral’ para que a barra lateral nas páginas normais tenha uma aparência diferente daquela nas postagens individuais do WordPress.

Na interface de edição, clique na seção ‘Barra Lateral’.

Na barra de ferramentas de blocos, clique no menu de três pontos e selecione ‘Excluir’ para remover a barra lateral antiga.

Em seguida, clique no ícone de ‘+’ nessa mesma seção.

Depois disso, localize e selecione ‘Parte do Modelo’.

Assim que tiver feito isso, prossiga e clique em ‘Escolher’.

Isso permitirá que você escolha a barra lateral que acabou de criar.

Um novo pop-up aparecerá, mostrando as diferentes partes do modelo que o tema possui.

Aqui, basta clicar na nova parte do modelo da barra lateral.

Nesta fase, você pode continuar personalizando o modelo, se necessário.

Em seguida, basta clicar em ‘Salvar’.

Agora você personalizou um modelo de página e adicionou uma barra lateral personalizada a ele.

Passo 5: Atribuir o Novo Modelo a uma Página

No entanto, precisamos garantir que este modelo seja realmente usado em seu site. Para fazer isso, volte ao menu principal do editor de site completo e clique em ‘Páginas’.

Em seguida, escolha uma página à qual deseja adicionar a barra lateral.

Para fins de exemplo, usaremos nossa página ‘Política de Privacidade’.

Agora, clique no ícone de configurações no canto superior esquerdo da página e clique em ‘Páginas’ no painel de configurações da página.

Depois disso, você precisa selecionar ‘Trocar modelo’.

Assim que fizer isso, um pop-up aparecerá.

Aqui, basta selecionar o modelo de página com a nova barra lateral.

E é isso! Sinta-se à vontade para repetir os mesmos passos para criar uma nova barra lateral personalizada e implementá-la em diferentes páginas e posts.

Veja como nossa página de exemplo de política de privacidade fica com a nova barra lateral:

Perguntas Frequentes Sobre Barras Laterais Personalizadas

Aqui estão algumas perguntas que nossos leitores fizeram com frequência sobre como adicionar uma barra lateral personalizada a posts ou páginas específicas no WordPress:

1. Como posso criar uma barra lateral exclusiva para apenas um post de blog específico?

Se você estiver usando um plugin como o Lightweight Sidebar Manager, você pode criar uma nova barra lateral e definir a regra 'Exibir em' para 'Páginas/Posts/Taxonomias Específicas'. Em seguida, basta digitar o nome do post exato em que você deseja que ela apareça.

Se você estiver usando um construtor de temas como o SeedProd, você pode criar um novo modelo de página, atribuir sua barra lateral personalizada a ele e, em seguida, aplicar esse modelo ao post individual a partir do editor de posts.

2. Ter muitas barras laterais diferentes deixará meu site lento?

Geralmente, não. O número de barras laterais que você cria tem um impacto mínimo na velocidade do site. O desempenho depende mais do que você coloca dentro delas.

Uma barra lateral preenchida com muitos widgets pesados, como imagens grandes ou scripts complexos, pode deixar uma página lenta. No entanto, os plugins e ferramentas de gerenciamento de barras laterais em si são leves e otimizados para desempenho.

3. Como as barras laterais personalizadas funcionam em dispositivos móveis?

A maioria dos temas modernos do WordPress são responsivos. Isso significa que em telas menores, como as de celulares, o conteúdo da barra lateral não é exibido ao lado. Em vez disso, ele é "empilhado" e movido para aparecer abaixo do conteúdo principal da página.

Suas barras laterais personalizadas ainda serão visíveis para visitantes de celular, mas eles precisarão rolar para baixo, passando o artigo, para vê-las.

4. Posso remover a barra lateral de uma página específica em vez de substituí-la?

Sim. A maioria dos temas do WordPress inclui um modelo de página 'Largura Total' ou 'Sem Barra Lateral'. Você pode selecionar este modelo no editor de páginas para remover a barra lateral dessa página específica.

Se o seu tema não tiver essa opção, um construtor de temas como o SeedProd (Método 1) lhe dará controle total para criar modelos sem barras laterais.

Esperamos que este artigo tenha ajudado você a aprender como mostrar diferentes barras laterais em páginas e posts no WordPress. Você também pode querer conferir nosso guia sobre como mudar o lado da barra lateral no WordPress e nossas escolhas de especialistas das melhores alternativas ao Canva para gráficos de sites.

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.