Widgets são uma parte tão integral dos temas do WordPress que é difícil imaginar um tema do WordPress sem widgets. Widgets são scripts executáveis que você pode simplesmente arrastar e soltar em suas barras laterais ou em qualquer outra área pronta para widgets em seu tema. Muitos de nossos leitores utilizam widgets para adicionar elementos personalizados à sua barra lateral. No entanto, este artigo é para aqueles usuários curiosos que desejam aprender como adicionar barras laterais dinâmicas prontas para widgets ou áreas prontas para widgets em temas do WordPress.
Registrando Barras Laterais ou Áreas Prontas para Widgets no WordPress
A primeira coisa que você precisa fazer é registrar sua barra lateral ou área pronta para widgets para o seu tema. Você pode registrar várias barras laterais e áreas prontas para widgets. Copie e cole este código no arquivo functions.php do seu tema
function wpb_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'wpb' ),
'id' => 'sidebar-1',
'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' =>__( 'Front page sidebar', 'wpb'),
'id' => 'sidebar-2',
'description' => __( 'Appears on the static front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
Neste código, registramos duas barras laterais. Demos nomes e descrições a elas para identificá-las na tela de Widgets. O parâmetro de descrição pode ser usado para dizer aos usuários onde essa barra lateral aparece no tema. O wpb é o nome do tema em que estamos trabalhando, ele é usado aqui para tornar essas strings traduzíveis. Você deve substituí-lo pelo nome do seu tema.
Adicionando Barras Laterais Dinâmicas Prontas para Widgets em Arquivos de Tema do WordPress
Até agora, apenas registramos Barras Laterais Dinâmicas. Os usuários podem arrastar e soltar widgets nessas barras laterais na tela Aparência » Widgets. No entanto, essas barras laterais não aparecerão em seu site até que sejam chamadas em um template como sidebar.php ou em qualquer outro lugar onde você queira exibi-las. Para adicionar essas áreas de widgets, edite o arquivo de template onde você deseja exibi-las e cole este código:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div> <?php endif; ?>
Neste código de exemplo, usamos o ID da barra lateral para chamar a barra lateral que queremos exibir aqui. Altere o ID da barra lateral para exibir outra barra lateral. Por exemplo, você pode registrar três barras laterais para a área do rodapé e, em seguida, chamá-las uma a uma no template footer.php do seu tema.
Widgets podem ser muito poderosos. Você pode adicionar widgets ao seu conteúdo de posts e páginas, tornar seus widgets de texto coloridos, ou estender o poder dos widgets padrão do WordPress. Barras laterais prontas para widgets, posicionadas corretamente, permitem que os usuários adicionem elementos personalizados aos seus sites usando uma interface simples de arrastar e soltar.
Esperamos que este artigo tenha ajudado você a aprender como adicionar barras laterais dinâmicas prontas para widgets no WordPress. Recomendamos que você estude o código em frameworks de temas como o Genesis para aprender como os profissionais os utilizam em seus produtos. Para perguntas e feedback, por favor, deixe um comentário abaixo.
nabil
olá, preciso de duas colunas na barra lateral! como posso fazer isso com css
Jason
Onde posso estender a funcionalidade dos meus widgets do WordPress
Milada
Olá equipe novamente,
desculpe incomodar, mas gostaria de especificar que precisaria de um widget acima do widget "Primary Sidebar" atual, à direita, e o outro widget no lado esquerdo do artigo, no meio.
Como devo proceder?
Obrigado,
Milada
Milada
Olá equipe novamente,
como adiciono um campo no widget e qual e onde devo colar um código de campo para ter links de afiliados lá?
Obrigado,
Milada
Tanmay Bala
Quero aprender a usar o Plugin DB no WordPress e o Redux Framework.
Marc
Este tutorial foi de grande ajuda.
Tenho tentado realizar isso por cerca de uma semana.
Bom e direto ao ponto.
Obrigado!
Laura
Eu só queria saber, antes de colar o código, se isso funciona em um tema que originalmente não vem com uma barra lateral? Estou usando o Book Lite, que só tem rodapés.
WPBeginner Support
Sim, funciona.
Admin
Laura
Obrigado até agora – tentei registrar a barra lateral, mas sempre que clico em “salvar” recebo a tela branca da morte – o que eu nunca tive antes. Alguma sugestão sobre o que pode estar errado?
Lohith
Thanks Alot
Its really wonderful and simple method to explain….
Bakopu
Muito, muito obrigado, senhor. Onde o senhor está, queremos receber suas bênçãos tocando em seus pés.
akhilesh
obrigado senhor, estas postagens foram muito úteis para mim
Marcos Nakamine
Funcionou perfeitamente
Obrigado
gWorldz
Estou tendo problemas para exibir o widget o.O
O widget está sendo registrado e exibido no back-end corretamente, sem problemas, no entanto, ele só mostrará o conteúdo do meu widget se eu incluir conteúdo no widget anterior.
Estou usando um tema filho de 2011 e registrando uma área de rodapé adicional.
Trecho do functions.php:
https://gist.github.com/gWorldz/76273b5901e1b5c4759b#file-functions-php
sidebar-footer.php
https://gist.github.com/gWorldz/b6177ccc9734718dd636#file-sidebar-footer-php
style.css
https://gist.github.com/gWorldz/0f24a9350da164ee2f29#file-style-css
Você tem alguma ideia do que estou fazendo de errado ou o que está causando esse problema?
Tiger
Você chegou a receber alguma ajuda sobre isso? Estou tendo o mesmo problema.
MJ
Só queria dizer obrigado por isso. Pesquisei no Google para descobrir como registrar uma barra lateral no WordPress e encontrei alguns outros sites antes deste, e o seu tinha as melhores, mais claras e mais compreensíveis instruções. Bem feito.
arvind
seu post é útil para mim,
obrigado !!!!!!
Dharmendra Prajapati
Finalmente consegui minha barra lateral de widget dinâmico pronta depois de 23 dias… Pesquisei em todos os sites… e finalmente fui redirecionado para o seu site.
Obrigado
Kevin
No segundo trecho, onde você está inserindo o código do widget no template, onde você tem
div id=”secondary”
Esse ID deve mudar com cada área de widget.
Ex:
Primeiro, Segundo, Terceiro, Quarto, etc.
WPBeginner Support
Kevin, sim, você deve, e deve ser nomeado após a área de widget ou a barra lateral que ele representa.
Admin
SS
Funciona para registrar as barras laterais, mas quando vou para a tela Aparência » Widgets, vejo todos os meus widgets, mas nada para arrastá-los.
WPBeginner Support
SS, quando você registrou com sucesso uma barra lateral dinâmica pronta para widgets, ela aparecerá na tela Widgets. Isso significa que o registro das barras laterais provavelmente não funcionou.
Admin
Steve Smart
Olá –
Este é um post muito útil. Obrigado!
Tive sucesso usando uma área de widget dinâmica, agora estou tentando implementar mais de uma. Tudo parece funcionar como esperado, exceto um problema estranho no painel. Se eu arrastar um widget de texto para minha segunda área de widget dinâmica, posso adicionar conteúdo como esperado e salvá-lo, e ele produz resultados em minhas páginas como esperado, no entanto, se eu revisitar a página de widgets do painel, a segunda área de widget não parece conter nenhum widget.
Estou usando um tema filho twentytwelve e Wordpress 3.7.1.
Alguma ideia?
Jackson
Hearty thanks….You have done such a wonderful work…thanks thanks thanks…
JP
obrigado, achei isso útil. direto ao ponto.
Praveen Prasad
Você pode me dizer onde está o Call Function Started?
Ed Du
Você também pode usar Headway com um bloco adicional e ele cuidará de tudo isso. Ou pagelines, para ser exato.