Como exibir barras laterais com reconhecimento de conteúdo para qualquer página ou tipo de postagem do WordPress

Tudo bem, vamos falar sobre barras laterais com reconhecimento de conteúdo. No entanto, antes de fazermos isso, devemos primeiro falar sobre as barras laterais em geral.

A barra lateral típica é um elemento básico do design da web e de muitos temas do WordPress. Eles são um bom local para exibir informações adicionais, como formulários de contato, suas postagens de blog mais recentes ou mais populares, anúncios ou qualquer outra coisa que não seja a atração principal do seu site. Embora nos últimos anos a tendência tenha mudado para designs de uma página sem barras laterais, eles continuam sendo um elemento popular.

Na maioria dos casos, a barra lateral de um site mostrará o mesmo conteúdo, independentemente da página em que você estiver. No entanto, nem sempre essa é a maneira ideal de fazer isso. Na verdade, existem muitos motivos para mostrar barras laterais personalizadas em diferentes páginas ou postagens que reconhecem o conteúdo que elas acompanham.

Por esse motivo, neste artigo queremos falar mais sobre este assunto. Mostraremos primeiro casos de uso para barras laterais com reconhecimento de conteúdo. Dessa forma, você entenderá se eles fazem sentido para você. Depois disso, continuaremos explicando como implementar esse tipo de barra lateral em seu site WordPress.

Pronto para ir? Então vamos começar.

Qual é o ponto das barras laterais sensíveis ao conteúdo?

Antes de qualquer coisa, vamos falar sobre por que você se preocuparia em personalizar as barras laterais dependendo do conteúdo ao lado do qual elas aparecem. Afinal, a barra lateral estática existe há muito tempo e ainda parece funcionar. Por que bagunçar um sistema funcional?

Acontece que existem muitos casos de uso em que faz sentido usar barras laterais com reconhecimento de conteúdo:

• Onboarding - os visitantes de primeira viagem podem precisar de um conteúdo diferente como regulares. Por exemplo, seus usuários conectados não precisam ver a frase de chamariz "inscreva-se", que visa fazer com que as pessoas ingressem no seu site ou na sua lista de e-mail.
• Informações personalizadas - algumas informações fazem mais sentido em algumas páginas do que em outras. Os exemplos incluem informações de contato adicionais na página de contato, os melhores ou os artigos mais recentes na página do blog, ofertas especiais na página da loja - você entende.
• SEO aprimorado - embora não seja um fator importante, o conteúdo da barra lateral ainda é importante para a otimização do mecanismo de pesquisa (especialmente se os títulos dos widgets estiverem devidamente agrupados em tags de cabeçalho). Portanto, você pode usar barras laterais com reconhecimento de conteúdo para tornar suas páginas ainda mais direcionadas.
• Frases de chamariz - você também pode usar esse tipo de barra lateral para personalizar frases de chamariz para diferentes lugares em seu site.
• Idiomas - eles também possibilitam a criação de barras laterais para diferentes versões de idiomas do seu site e para diferentes mercados.

Como você pode ver, há vários motivos para usar barras laterais com reconhecimento de conteúdo e esta lista está longe de ser exaustiva. No entanto, vamos agora concentrar nosso foco em como implementá-los.

Como implementar barras laterais com reconhecimento de conteúdo no WordPress

Existem três maneiras principais de configurar barras laterais personalizadas para postagens e páginas. O que todos eles têm em comum é que o conteúdo da barra lateral é alterado em resposta à página ou postagem em que é exibida. As condições incluem tags, categorias, nomes de páginas ou outros atributos do WordPress, como se um usuário está logado ou não.

Depois disso, a barra lateral geralmente é alterada de uma das três maneiras:

• Widgets de filtro - uma barra lateral está cheia de widgets e algum tipo de lógica em segundo plano decide quais widgets aparecem em qual local e quais ficam ocultos
• Configurar barras laterais inteiras - outra maneira é criar barras laterais totalmente separadas que aparecem no mesmo local quando condições diferentes são atendidas. Eles podem conter configurações de widget individuais.
• Codificado no tema - Claro, você também pode adicionar barras laterais personalizadas aos seus arquivos de tema, se você tiver recursos de codificação para isso

Pessoalmente, acho que o segundo método é aquele que resulta em uma interface de usuário mais organizada. No entanto, a seguir, examinaremos cada caminho em detalhes para que você possa decidir por si mesmo. Depois disso, listaremos mais algumas opções para implementar barras laterais personalizadas em seu site WordPress.

Use Jetpack Widget Visibility para filtrar widgets

A maneira mais fácil de filtrar a aparência do widget em seu site é o módulo de Visibilidade do widget apropriadamente denominado incluído no Jetpack. Se você já tem o plug-in em seu site, criar barras laterais personalizadas é tão fácil quanto ativar o módulo (se ainda não estiver ativo por padrão). Alternativamente, você também pode usar esta versão autônoma.

Depois de fazer isso e ir para o menu de widgets, você encontrará um novo botão Visibilidade em todos os seus widgets. Clique nele e você pode implementar facilmente a lógica de exibição desejada para seus widgets por meio de menus suspensos.

As condições de visibilidade são as seguintes:

• Categoria - os widgets podem aparecer em certas páginas de categoria ou em todas elas
• Autor - Aparência em todas as páginas do autor ou limitada a determinados usuários
• Usuário - verifica se o usuário está conectado ou não
• Função - Controle os widgets de acordo com a função do usuário
• Tag - Funciona como páginas de categoria, mas para tags
• Data - Controle em que data os widgets de arquivos aparecem em
• Página - Defina a visibilidade do widget para a página inicial, página de postagens, páginas de arquivo, a página de erro 404, tipos de postagem, arquivos de tipos de postagem e páginas estáticas

Para cada opção, você pode definir se os widgets são mostrados ou ocultos. As regras devem ser inseridas separadamente, o que significa que não é possível inserir várias páginas de uma vez. No entanto, esse método é ainda mais conveniente do que inserir ids de página manualmente, conforme necessário em outras soluções (mais sobre isso a seguir). Há também uma caixa de seleção Corresponder a todas as condições que força os widgets a serem exibidos apenas se todas as condições forem válidas.

As barras laterais sensíveis ao conteúdo permitem que você configure barras laterais personalizadas

A segunda solução sobre a qual queremos falar é o plug-in Content Aware Sidebars. Conforme mencionado anteriormente, este plugin permite que você configure barras laterais inteiras que você pode preencher com widgets e atribuir a postagens e páginas. É muito simples de usar.

Após a instalação, você encontrará um novo item de menu chamado Sidebars no menu do WordPress.

Ao escolher Adicionar novo aqui, você chegará a esta tela:

Aqui, a primeira coisa a fazer é nomear sua barra lateral. Depois disso, é hora de definir as condições para exibi-lo. As opções disponíveis são semelhantes ao Jetpack:

• Páginas estáticas - Escolha páginas estáticas para exibir a barra lateral, como a página inicial, resultados de pesquisa ou páginas de erro 404
• Postagens - As mesmas opções acima, mas para postagens
• Páginas - escolha em quais páginas do seu site mostrar a barra lateral
• Mídia - determina em quais páginas de mídia sua barra lateral aparece
• Autores - Limita a exibição às páginas do autor
• Modelos de página - Escolha modelos de página para exibir sua barra lateral
• Categorias - Escolha certas categorias ou todos os arquivos de categorias
• Tags - mesmas opções, mas para tags
• Formatos - Novamente, as mesmas configurações para arquivos de formato
• Datas - E mais uma vez para arquivos de datas
• URLs (somente versão Pro) - Limita a exibição da barra lateral a certos URLs

Configurações adicionais:

• Agenda - Defina um tempo para a exibição da barra lateral. Na versão gratuita, você está limitado a dias inteiros, a versão Pro oferece intervalos de tempo mais granulares.
• Design - Adicione classes CSS personalizadas às suas barras laterais, widgets e títulos de widgets para manipular seus
• Avançado - Defina a ordem de suas barras laterais (no caso de haver mais de uma)

Além disso, você também pode mesclar barras laterais umas com as outras, substituí-las, configurá-las como áreas de widget e controlar sua visibilidade para usuários conectados (funções de usuário disponíveis no Pro).

Depois de concluir a configuração, a nova barra lateral aparece no menu de widget normal, onde você pode preencher, ativar e desativar e até mesmo ver as revisões anteriores. Limpo e fácil.

Criar barras laterais personalizadas manualmente

Finalmente, também é possível criar barras laterais personalizadas por meio de codificação. O WordPress oferece muitas opções para isso e examinaremos rapidamente o processo.

A primeira coisa a fazer para criar barras laterais personalizadas é registrar uma nova área com widget. Para isso, basta inserir o seguinte código em functions.php do seu tema (filho):

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

Com isso:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

Depois disso, esse é o resultado final na interface:

Claro, se você tiver mais recursos de desenvolvimento, é possível adicionar mais condições, como mostrar a barra lateral apenas para usuários logados. Você também pode obter mais detalhes sobre onde exibi-lo usando a hierarquia de modelos do WordPress. Pode não ser a solução mais dinâmica, no entanto, funciona e pode funcionar completamente em segundo plano, sem a necessidade de instalar plug-ins adicionais.

Maneiras adicionais de implementar barras laterais sensíveis ao conteúdo

Além das opções acima, também temos mais alguns plug-ins com funcionalidades semelhantes.

Widget Logic

Este plugin funciona de forma semelhante à solução Jetpack, no entanto, em vez de menus suspensos, você precisa inserir manualmente as tags condicionais do WordPress. Dessa forma, você pode determinar onde os widgets aparecem, dependendo de quantas regras desejar.

No entanto, para fazer isso, você precisa conhecer os ids de suas páginas e, no geral, é um pouco mais técnico do que o que vimos acima. Isso não significa que não funcione e não seja um plugin poderoso, no entanto, pessoas menos técnicas podem ficar melhor com outra coisa.

Barras Laterais Personalizadas

Feito por WPMU DEV, aqui temos outra solução para configurar barras laterais com reconhecimento de conteúdo que funciona com qualquer área de widget. O plugin permite que você exiba widgets dinamicamente em qualquer postagem, página, arquivo de categoria, tipo de postagem e muito mais. Além disso, ele faz tudo isso com uma interface de usuário muito poderosa e fácil de usar. Para uma introdução completa, verifique o artigo de Tom Ewer no site deles.

Barras laterais de página simples

A solução final para criar barras laterais personalizadas é feita para simplificar. Ele permite que você atribua barras laterais e faça alterações em massa diretamente no editor de página. Depois de fazer isso, você pode preenchê-los normalmente no menu do widget.

Infelizmente, faltam opções de personalização mais avançadas. No entanto, se você deseja ter apenas barras laterais diferentes para suas páginas, esta pode ser a solução que você está procurando.

Barras laterais sensíveis ao conteúdo em poucas palavras

Há muitos bons motivos para usar barras laterais personalizadas em seu site. Nem todo conteúdo precisa que as mesmas informações apareçam ao lado dele. Com as barras laterais com reconhecimento de conteúdo, você pode exibir o que faz sentido em vez de usar uma barra lateral padrão.

Neste tutorial, aprendemos várias maneiras de criar barras laterais personalizadas. Desde a filtragem de widgets, passando pela criação de barras laterais inteiras, até a codificação deles em seu tema, está tudo lá.

Munido dessas informações, agora você pode fornecer apenas o conteúdo da barra lateral de que precisa para melhorar a interação do usuário e o serviço ao seu público. De uma chance!

Qual é a sua experiência com barras laterais com reconhecimento de conteúdo? Deixe-nos saber na seção de comentários abaixo!

Imagem em miniatura do artigo por Kit8.net/ shutterstock.com