Como mostrar diferentes barras laterais para postagens e páginas no WordPress

Por padrão, o WordPress mostra a mesma barra lateral em todos os posts e páginas. Mas, às vezes, você pode querer exibir uma barra lateral completamente diferente para sua postagem mais importante ou itens da barra lateral relacionados a uma categoria de postagem inteira. Se você já se perguntou como fazer isso, você está com sorte!

Neste artigo, mostraremos como criar barras laterais exclusivas para diferentes postagens ou páginas, manualmente e com plug-ins do WordPress. Mas primeiro, vamos falar mais sobre por que você pode querer fazer isso.

Por que você pode querer barras laterais diferentes

Como dito anteriormente, se você tiver muitas categorias em seu blog, pode ficar tentado a ter uma barra lateral com ofertas, anúncios ou produtos semelhantes a esse tópico. Ou talvez você queira falar sobre o seu negócio em uma barra lateral “Sobre nós”, adaptada ao público de cada página.

Nesses tipos de situações, você desejará ter uma barra lateral exclusiva. Existem duas maneiras de criar um: manualmente, desenvolvendo o seu próprio ou com um plugin do WordPress.

Vamos cobrir o modo manual primeiro.

Como criar manualmente uma nova barra lateral do WordPress

Para criar manualmente uma nova barra lateral, o ideal é usar um tema filho em um ambiente local. Já criamos um para o tema twentyseventeen, mas você pode seguir o mesmo processo para qualquer tema.

Primeiramente, encontre o arquivo onde está cadastrada a barra lateral em seu tema. Normalmente é o arquivo functions.php, mas pode variar dependendo do seu tema.

Abra o arquivo e localize a função para o código da barra lateral. Geralmente consistirá em register_sidebar e a função completa pode ser algo como isto:

[php]

function twentyseventeen_widgets_init() {

register_sidebar(

variedade(

'nome' => __( 'Blog Sidebar', 'twentyseventeen' ),

'id' => 'barra lateral-1',

'description' => __( 'Adicione widgets aqui para aparecer em sua barra lateral em postagens de blog e páginas de arquivo.', 'twentyseventeen' ),

'before_widget' => '<seção id=”%1$s” classe=”widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class=”widget-title”>',

'after_title' => '</h2>',

)

);

register_sidebar(

variedade(

'nome' => __( 'Rodapé 1', 'vinte dezessete' ),

'id' => 'barra lateral-2',

'description' => __( 'Adicione widgets aqui para aparecer no seu rodapé.', 'twentyseventeen' ),

'before_widget' => '<seção id=”%1$s” classe=”widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class=”widget-title”>',

'after_title' => '</h2>',

)

);

register_sidebar(

variedade(

'nome' => __( 'Rodapé 2', 'twentyseventeen' ),

'id' => 'barra lateral-3',

'description' => __( 'Adicione widgets aqui para aparecer no seu rodapé.', 'twentyseventeen' ),

'before_widget' => '<seção id=”%1$s” classe=”widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class=”widget-title”>',

'after_title' => '</h2>',

)

);

}

add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

[/php]

Agora copie a função inteira e crie um arquivo functions.php em seu tema filho (se ainda não o tiver) e cole o código. Certifique-se de alterar o nome da função.

Dependendo de quantas barras laterais adicionais você precisa criar, você pode simplesmente replicar o mesmo código e atribuir um ID exclusivo a cada barra lateral. Você também deve alterar o nome e a descrição para tornar cada um único. Aqui criamos duas novas barras laterais:

[php]

function twentyseventeen_new_widgets_init() {

register_sidebar(

variedade(

'nome' => __('Barra lateral do WordPress', 'twentyseventeen' ),

'id' => 'barra lateral-4',

'description' => __( 'Adicione widgets aqui para aparecer em sua barra lateral em postagens de blog relacionadas ao wordpress.', 'twentyseventeen' ),

'before_widget' => '<seção id=”%1$s” classe=”widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class=”widget-title”>',

'after_title' => '</h2>',

)

);

register_sidebar(

variedade(

'nome' => __( 'Barra lateral de design da Web', 'twentyseventeen' ),

'id' => 'barra lateral-5',

'description' => __( 'Adicione widgets aqui para aparecer em sua barra lateral em postagens de blog relacionadas a web design.', 'twentyseventeen' ),

'before_widget' => '<seção id=”%1$s” classe=”widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class=”widget-title”>',

'after_title' => '</h2>',

)

);

}

add_action( 'widgets_init', 'twentyseventeen_new_widgets_init' );

[/php]

As novas barras laterais já estão prontas; Se você verificar a seção de widgets, ela mostrará duas novas áreas de widgets. Adicionamos um widget de texto simples a cada barra lateral para torná-los reconhecíveis.

Depois de criar suas barras laterais, é hora de atribuir o local. Estamos tentando substituir a barra lateral direita existente, então você precisa encontrar o arquivo onde ela está localizada.

Para esta instância, está em sidebar.php . Copie o arquivo do tema pai e cole-o no tema filho.

Se você verificar o arquivo, ele chamará sidebar-1 , que é o id da barra lateral direita principal.

[php]

<aside id=”secondary” class=”widget-area” role=”complementary” aria-label=”<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>”>

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aside>

[/php]

Agora, criaremos uma barra lateral para minha categoria de web design e outra para minha categoria WordPress. Isso pode ser alcançado de duas maneiras diferentes: uma é uma abordagem orientada por modelo e a outra é uma abordagem orientada por categoria.

Abordagem baseada em modelo

Nesta abordagem, você deve criar modelos diferentes, dependendo de seus requisitos. Para este exemplo, single.php é responsável por postagens únicas, então você pode copiar e colar o arquivo em seu tema filho. Renomeie o arquivo de acordo, como wordpress-post.php , e adicione um nome de modelo também.

[php]

/* Nome do modelo: barra lateral do WordPress

* Tipo de postagem do modelo: postagem*/

[/php]

Da mesma forma, criamos outro modelo chamado webdesign-post.php .

Agora, volte para o arquivo sidebar.php do tema filho e adicione uma condição simples para verificar qual modelo está em uso. Para isso, usaremos a função is_page_template() .

O código é auto-explicativo. Ele verifica qual modelo está em uso e define a barra lateral de acordo. Se nenhuma das condições for atendida, ele usará a barra lateral padrão.

[php]

<?php

if ( is_page_template('wordpress-post.php') ) {

dynamic_sidebar('sidebar-4');

}elseif ( is_page_template('webdesign-post.php') ){

dynamic_sidebar('sidebar-5');

}outro{

dynamic_sidebar('sidebar-1');

}

?>

[/php]

Agora vamos criar um novo post e atribuir um dos templates que acabamos de criar.

Você verá que selecionei a barra lateral do WordPress para este post específico.

Abordagem orientada por categoria

Para este exemplo (alterar a barra lateral com base nas categorias de postagem), uma abordagem orientada por categoria funcionará melhor do que a abordagem orientada por modelo. Para fazer isso, você precisará ajustar a condição em sidebar.php com base na categoria em vez do modelo usando a função in_category() .

[php]

<?php

if (in_category('wordpress')) {

dynamic_sidebar('sidebar-4');

}elseif ( in_category('web-design') ){

dynamic_sidebar('sidebar-5');

}outro{

dynamic_sidebar('sidebar-1');

}

?>

[/php]

Agora, se você editar ou criar uma nova postagem, basta adicionar a categoria desejada. Ele exibirá a barra lateral de acordo, portanto, não há necessidade de escolher nenhum modelo! Aqui escolhemos web design como minha categoria de postagem, então a barra lateral de web design aparecerá.

Basicamente, você só precisa ajustar a condição sidebar.php de acordo com seus requisitos específicos.

Como criar barras laterais personalizadas com plugins do WordPress

Se você está tendo problemas para criar barras laterais manualmente, pode experimentar alguns plug-ins úteis do WordPress que permitem criá-los facilmente!

Um desses plugins é o Content Aware Sidebars. É um plug-in simples que permite criar dinamicamente barras laterais em páginas individuais, postagens, categorias, etc.

Uma vez instalado, você verá um menu de barras laterais no painel de administração.

Barras laterais > Adicionar novo

Primeiro, adicione um nome à sua barra lateral. Você pode definir as condições de exibição no menu suspenso Condições da barra lateral . Uma barra lateral pode ter várias condições, como páginas, postagens, categorias, autor, etc.

Você pode agendar sua barra lateral na guia de agendamento e alterar as tags HTML na guia de design.

Você verá uma caixa de opções no lado direito. A partir daí, você pode definir a localização e as regras da sua nova barra lateral. Você também pode executar ações, como criar um shortcode da sua barra lateral.

Depois que sua barra lateral for publicada, você poderá acessá-la na seção Aparência > Widgets .

Essa nova barra lateral aparecerá nas páginas e postagens automaticamente, de acordo com suas configurações.

O plug-in também permite selecionar barras laterais ao editar cada postagem ou página, independentemente de suas configurações iniciais.

Dentro de uma postagem ou página, você verá um painel Barras laterais – Seleção rápida no lado direito que mostrará todas as barras laterais existentes. A partir daí, você pode selecionar sua barra lateral no local de destino definido anteriormente nas configurações iniciais.

Por exemplo, criamos anteriormente Minha barra lateral e o local de destino era Barra lateral do blog , portanto, no painel Seleção rápida , Minha barra lateral estará disponível apenas para a Barra lateral do blog .

Você também pode criar novas barras laterais, no entanto, na seção da página de edição. Basta digitar o nome da sua nova barra lateral e publicar ou atualizar a página.

Se você criar uma nova barra lateral, basta ativá-la na seção Aparência > Widgets .

Observação: você também pode atribuir barras laterais às suas páginas, mas certifique-se de que seu modelo de página inclua uma barra lateral. Sem isso, a barra lateral não será exibida, mesmo que você a configure na seção de edição da página.

Conclusão

Agora você viu duas opções para criar sidebars: desenvolvimento manual e também com plugins. Se você não se sentir confortável com códigos, usar um plug-in pode ser a melhor opção para você, mas se você tiver um requisito específico e não quiser adicionar um plug-in extra ao seu site, deve optar pelo método manual . O importante é entender suas necessidades e então escolher a sua melhor opção!