A inspiração para este tutorial vem de um tweet que recebi com feedback para o tema RS12, que será lançado em breve.
Embora o rodapé com widgets não tenha sido incluído no lançamento do tema RS12, decidi escrever este tutorial para mostrar às pessoas exatamente como adicionar um rodapé com widgets ao seu tema. Neste guia, você aprenderá:
- O código HTML e CSS necessário para produzir o rodapé com widgets
- Como adicionar tags de template do WordPress comumente usadas como placeholders
- Como habilitar widgets no rodapé e colocar widgets nele
Haverá muito código neste post, então se você estiver pronto, continue lendo...
Usarei o tema WordPress Green Rays como exemplo neste tutorial. No momento, o rodapé tem apenas uma mensagem padrão de "direitos autorais" e créditos.
O HTML
O primeiro passo é adicionar a marcação HTML. Vamos dizer que teremos três seções diferentes no rodapé com widgets com listas de Posts Mais Recentes, Arquivos Mensais e Arquivos Diários. Colocaremos este código HTML acima da linha atual de "direitos autorais".
<div class="footer-item">
<h3>Posts Recentes</h3>
<ul>
<li><a href='#' title='Post em Destaque'>Post em Destaque</a></li>
<li><a href='#' title='Citações'>Citações</a></li>
<li><a href='#' title='Como a tag ‘more’ funciona'>Como a tag ‘more’ funciona</a></li>
<li><a href='#' title='Ordem ou Desordem'>Ordem ou Desordem</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Arquivos Mensais</h3>
<ul>
<li><a href='#' title='Março de 2008'>Março de 2008</a></li>
<li><a href='#' title='Fevereiro de 2008'>Fevereiro de 2008</a></li>
<li><a href='#' title='Janeiro de 2008'>Janeiro de 2008</a></li>
<li><a href='#' title='Dezembro de 2007'>Dezembro de 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Arquivos Diários</h3>
<ul>
<li><a href='#' title='7 de Março de 2008'>7 de Março de 2008</a></li>
<li><a href='#' title='9 de Fevereiro de 2008'>9 de Fevereiro de 2008</a></li>
<li><a href='#' title='4 de Janeiro de 2008'>4 de Janeiro de 2008</a></li>
<li><a href='#' title='22 de Dezembro de 2007'>22 de Dezembro de 2007</a></li>
</ul>
</div>
<div class="clear"></div>
Basicamente, este código coloca cada “widget” em uma div. Dentro de cada widget há um título e uma lista não ordenada com links. Sim, eu sei que os links não levam a lugar nenhum. Mais tarde, substituiremos isso por tags de modelo do WordPress. Eis o que temos até agora:
O CSS
Como você pode ver, isso não está muito bom sem nenhum estilo CSS. Adicione o seguinte código à sua folha de estilos.
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}
O que este código faz é flutuar cada item do rodapé para a esquerda, o que basicamente significa que eles podem ficar lado a lado. A largura é definida como 33%, o que dá espaço suficiente para três itens do rodapé em uma única linha. Há também um pouco de preenchimento adicionado abaixo de cada item do rodapé. A segunda parte é apenas preencher as listas com 15 pixels para a esquerda.
Agora você pode ver que o HTML e o CSS estão começando a se unir. Veja o que você deve ter até agora:
Código do WordPress
No momento, temos um monte de links HTML vazios, sem código real do WordPress. Vamos substituir as listas em Posts Recentes, Arquivos Mensais e Arquivos Diários pelos equivalentes das tags de modelo do WordPress. Substitua o que você tem atualmente pelo seguinte:
<div class="footer-item">
<h3>Posts Recentes</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Arquivos Mensais</h3>
<ul>
<?php wp_get_archives('limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Arquivos Diários</h3>
<ul>
<?php wp_get_archives('type=daily&limit=4'); ?>
</ul>
</div>
Os parâmetros devem ser autoexplicativos, mas se você não tiver certeza sobre algum deles, tente procurar por wp_get_archives na Ferramenta de Pesquisa de Tags de Modelo do WordPress. Lembre-se, estou apenas usando as tags de modelo wp_get_archives() como um espaço reservado. Substituiremos isso por outros widgets do WordPress mais tarde, depois de widgetizarmos o rodapé.
Widgetize
Para esta seção do tutorial, vou usar partes do meu tutorial anterior sobre widgetização de temas.
O primeiro passo é registrar as “sidebars”. Para fazer isso, simplesmente substitua o conteúdo atual do arquivo functions.php pelo seguinte:
'Barra Lateral',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Rodapé',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
?>
Agora vamos entrar em sidebar.php e substituir a tag condicional de sidebar dinâmica atual por esta:
Por esta:
Agora vamos entrar em nosso arquivo footer.php e envolver os itens do rodapé em sua própria tag condicional de sidebar. Logo antes da primeira div “sidebar-item”, adicione o seguinte.
Logo após a div final de fechamento “footer-item” (e acima da div “clear” que adicionamos anteriormente), adicionaremos o seguinte:
Ok, agora nossa barra lateral *e* o rodapé devem ser widgetizados. Vamos testar adicionando alguns widgets no rodapé. Adicionarei um widget de Blogroll, um widget de Comentários Recentes e um widget de texto. Veja como deve ficar:
Conclusão
Bem, essas são as noções básicas de como adicionar um rodapé widgetizado ao seu tema. Você pode querer adicionar regras de estilo separadas para outros tipos de widgets, como o calendário ou a caixa de pesquisa. Isso provavelmente não funcionará com todos os temas, como o tema RS12, por exemplo, pois ele tinha um rodapé não expansível.
Se alguém quiser o tema Green Rays atualizado, pode baixá-lo aqui. Assim, você pode ver exatamente onde adicionei o código. Você também pode compará-lo com o tema original.
Espero que tenham gostado do tutorial. Você adicionará um rodapé widgetizado ao seu tema? Há algo no código que usei acima que você faria de forma diferente? Perguntas, comentários, sugestões e críticas são bem-vindos, então sinta-se à vontade para se manifestar nos comentários.
Leland,
Aqui está o link do pastebin para o meu arquivo functions.php. Eu postei sem a sua alteração. Sua ajuda é apreciada.
http://pastebin.com/m40073591
“Eu também estou tentando adicionar widgets ao meu rodapé usando seu passo, mas quando adiciono o código ao functions.php, continuo recebendo a mesma mensagem de erro:
Erro de análise: erro de sintaxe, ‘}’ inesperado em /home/………..redacted………/functions.php na linha 230
Tenho certeza de que isso significa que tenho apenas um ‘}’ fora do lugar, mas removê-lo não parece funcionar. Ajuda?”
Estou tendo os mesmos problemas. Você poderia oferecer algum conselho?
Obrigado,
Dave
você chegou a descobrir isso? Eu também estou tendo o mesmo problema, mas aconteceu quando mudei o código do meu sidebar.php.
como você consertou isso?
Estou executando 2 sidebars, portanto tenho 2 arquivos sidebar.php. Tentei reverter o código para seu estado original, mas sem sucesso. Acho que terei que fazer o upload do meu arquivo php de backup, mas isso não resolverá o problema, apenas me permitirá continuar trabalhando no meu site.
Se houver algum conselho, eu agradeceria.
obrigado
Encontrei isso por acidente – ótimo tutorial em termos de conteúdo e estilo de escrita – bem feito.
Este tutorial revoluciona meu mundo! Eu não vi uma explicação tão completa de como fazer isso. Estou no processo de criar um novo visual para o meu blog e uau… isso é totalmente o que eu precisava. Muito obrigado!!
[…] Adicionar um Rodapé com Widgets ao Seu Tema WordPress | Theme Lab (tags: wordpress tutorial footer CSS) […]
@Lance: Dependeria do tema, mas estaria em algum lugar dentro da div “footer” (seja qual for o nome dela).
Parece que o rodapé do seu site tem uma altura fixa, então você provavelmente teria que consertar isso antes de usar este código.
Olá – Obrigado por este tutorial, mas estou confuso. Onde eu coloco o código HTML que você tem no início?
Eu tenho o css e os arquivos do rodapé e sei que posso colocar o código lá. Mas onde vai o código HTML real?
[…] caixa, modelos personalizados de arquivo e busca, uma página de opções e quatro áreas de widget (incluindo um rodapé com widgets). Esses recursos serão abordados […]
@Terri: Sem problemas! Belo rodapé com widgets, por sinal. 🙂
sssim! Obrigado!
@Hannah: Sim, é isso que significa. Embora seja meio difícil para mim diagnosticar o problema se eu não puder ver o código exato. Você poderia, por favor, colar o código do seu arquivo functions.php atual em algum tipo de pastebin? Algo como http://pastebin.com – obrigado!
Ótimo tutorial! Estou tentando adicionar widgets ao meu rodapé usando seu passo, mas quando adiciono o código ao functions.php, continuo recebendo a mensagem de erro:
Erro de análise: erro de sintaxe, ‘}’ inesperado em /home/………..redacted………/functions.php na linha 230
Tenho certeza de que isso significa que tenho apenas um ‘}” fora do lugar, mas removê-lo não parece funcionar. Ajuda?
[…] encontrei um bom tutorial sobre como adicionar widgets ao rodapé de um tema. Widgets não são apenas para a barra lateral […]
@ezg: Ah… bem, fico feliz que tenha dado certo para você.
@Jeffro: Obrigado, aprecio o stumble, e fico feliz que você tenha gostado do tutorial.
Esperei por um post como este por muito tempo. Eu descobri sozinho, mas é sempre bom ter uma referência para consultar. Enviei esta joia para o StumbleUpon 🙂
[…] Adicionar um Rodapé com Widgets ao Seu Tema WordPress | Theme Lab (tags: wordpress) […]
[…] domínio ), fiz o upload do novo tema e comecei a fazer meus ajustes nele. A maior coisa que fiz foi adicionar um rodapé com muitos widgets. Você pode fazer o mesmo usando o tutorial vinculado de Leland no Theme Lab. Principalmente eu queria fazer […]
[…] Adicione um Rodapé com Widgets ao Seu Tema WordPress – quem disse que widgets são apenas para barras laterais? Eu os vi usados em muitos outros lugares, incluindo rodapés, que é exatamente o que você aprenderá a fazer neste tutorial. [Link] […]
[…] http://www.themelab.com/2009/04/25/add-a-widgetized-footer-to-your-wordpress-theme/ […]
Você não viu, porque eu não estou usando agora. Mas quando eu ativei, realmente parecia ótimo. Mais tarde, quando eu pensar em quais widgets usar, eu vou ativar.
@ezg: Legal! Só estou curioso, em qual blog você usou? Eu verifiquei o URL que você usou para comentar aqui, mas não vi o rodapé com widgets.
Usei seu tutorial no meu blog. Ficou muito legal.
Obrigado pela sua lição. 🙂
@sriganesh: Parece bom, me diga como funciona para você.
obrigado. estou usando o tema elegante agora. que ganhei em um concurso. veja o rodapé do meu tema.. muito obrigado. , tenho um pequeno problema-adicionei minhas fotos do flickr. mas elas estão dispostas irregularmente. como outros sites profissionais com borda, não consigo alinhá-las. você pode me ajudar nisso. nos últimos três meses tentei por conta própria e adicionei códigos, mas nada aconteceu.
[…] HTML ou para um sistema de gerenciamento de conteúdo (CMS)? Dependendo da sua habilidade Adicionar um Rodapé com Widgets ao Seu Tema WordPress – themelab.com 04/25/2009 A inspiração para este tutorial vem de um tweet que recebi com […]
bom tutorial, vou tentar isso, porque preciso de algo assim. visite meu site. eu gosto de ter o mesmo que é mencionado aqui.
Não me entenda mal, eu amo o tutorial e tudo mais... mas para ser completamente honesta, sinto que você nos enrolou um pouco... tipo, queremos saber como VOCÊ fez o SEU cabeçalho, sabe? Isso não é um ataque pessoal, mas me sinto um pouco lesada recebendo um rodapé de texto chato e mesquinho....
Se você pudesse, por favor, nos dizer como você fez o SEU, seria ótimo. E não apenas jogue algo como "coloque sua imagem atrás dele..." Quero dizer como você fez isso de verdade. Obrigado....
Eu fiz tudo o que você disse e não sei como "arrastar" os widgets...? Não vejo onde arrastá-los....
Você faz isso no seu painel de administração do WordPress na página de widgets. Por "arrastar" eu apenas quero dizer colocar os widgets nas várias áreas de widgets.
Sinto muito que você se sinta "enrolado", mas eu queria escrever um tutorial que pudesse ser aplicado a quase qualquer tipo de tema.
Para sua informação, eu nem uso nenhum widget do WordPress no rodapé e cabeçalho deste site, eles são codificados diretamente.
Não tenho certeza o quão mais detalhado ele poderia ter sido. Se você é um web designer e tem uma ideia do que é o WordPress, então você saberia como realizar o resto. O tutorial dele foi perfeito.