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.
Estou recebendo um erro ao adicionar um widget personalizado no meu tema. Este é o código que tenho adicionado em functions.php.
function widget()
{
register_sidebar(array(
‘name’ => __(‘Barra Lateral Principal’, ‘wpb’),
‘id’ => ‘primary_sidebar’
‘description’ => ”,
‘class’ => ”,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
} add_action(‘widgets_init’, ‘widget’);
Que mensagem de erro você está recebendo?
Trabalho incrível no seu tutorial!
Uma pergunta:
Por que você precisou adicionar código ao arquivo sidebar.php quando o propósito do tutorial é adicionar três áreas com widgets ao rodapé?
Olá Mark, boa pergunta.
Este tutorial assume que você já tem uma área com widgets na sua barra lateral. Quando menciono o arquivo
sidebar.php, estou basicamente recodificando essa área com widgets para ter um nome único (neste caso, "Sidebar") para diferenciá-la da nova área com widgets no rodapé que estamos prestes a criar.Há mais informações sobre como codificar várias áreas de widget no meu tutorial de widgetização de temas do WordPress.
Uau, eu realmente consegui fazer isso funcionar! (Não é um comentário sobre o seu código, apenas um comentário sobre minha habilidade de codificação). Obrigado!
Minha primeira tentativa de widgetização, e isso funcionou absolutamente perfeitamente. Obrigado! :)
Você disse:
“O primeiro passo é adicionar a marcação HTML.” e “Colocaremos este código HTML acima da linha atual de “direitos autorais”.
OK…. adicionar a QUÊ? Onde coloco a marcação HTML? A quê eu adiciono? Como encontro o arquivo que tem a linha de “direitos autorais”?
Tente procurar no seu arquivo
footer.php.Você poderia me dar um resumo rápido do novo tema padrão de rodapé de 2012? Quero usar este tutorial, mas o rodapé de 2012 é ridiculamente longo ou “Alto”. Quero adicionar 5 widgets de texto, e ele tem um modelo fluido, então eu gostaria que ele ficasse centralizado. Você pode jogar um saco de batatas fritas com isso, se quiser 😛
O tutorial é maravilhoso, mas eu gostaria de saber como colorir o fundo onde os widgets ficam ou como adicionar uma imagem sob eles. Se você puder responder a este comentário ou me enviar um e-mail, seria ótimo.
Mais uma vez, ótimo tutorial, funcionou perfeitamente para o blog do meu tema e agora eu só quero pintá-lo um pouco, se você me entende.
Atenciosamente e estou aguardando uma resposta sua! :)
Acho que você está procurando a propriedade de fundo CSS – http://www.w3schools.com/css/css_background.asp
Uau, eu realmente não sabia que você poderia ter tornado isso mais direto e simples. Excelente tutorial sobre um processo que poderia ter sido muito mais difícil… 10 minutos e estou funcionando com um rodapé com widgets novinhos em folha. Obrigado!
Muito obrigado por dedicar seu tempo a isso! post incrível. O tema em que estou trabalhando foi muito personalizado, então isso deve me ajudar a adicionar o rodapé que estou querendo há um tempo!
Obrigado pelo ótimo tutorial. Tenho uma pergunta. Adicionar os widgets não é problema, mas de alguma forma ele não quer adicionar um fundo a todo o rodapé. A parte onde os widgets ficam continua branca comigo. Alguma forma de consertar isso?
http://blog.whenlovefalls.com/
Hmm… parece que esqueci de mencionar colocar
.clear { clear: both; }na sua folha de estilos.Isso deve resolver o problema.
Não é um problema simplesmente substituir o conteúdo do arquivo functions.php? Não é um dos arquivos que não devo tocar?
Além disso, qual chamada de função eu precisaria para obter uma lista de páginas em cada seção do site? Eu quero uma espécie de rodapé de "mapa do site", se você me entende (uma lista horizontal de links de nível superior, cada um com suas sub-páginas listadas abaixo).
Você pode tocá-lo se quiser, mas eu faria um backup antes de editá-lo, pois se você cometer um erro, isso pode causar problemas para o resto do seu site.
Você provavelmente está procurando a função wp_list_pages ou o widget "Páginas".
Este post me salvou. Tentei tantos outros posts, quase desisti e então encontrei o seu. Funciona como um encanto. Sendo um Personal Trainer de San Diego, tenho que ter as informações ali para as pessoas. Obrigado novamente pela ajuda. 2001 Iron
Desculpe, apertei o botão de enviar por acidente. Ok, obrigado pelo post matador. Você se importa se eu colocar um link para ele. Obrigado
Campeão de Fisiculturismo 2001 Ironman, Hank Butler
Fico feliz que tenha gostado do post, Hank. Sinta-se à vontade para linkar de volta para ele.
Posso substituir este rodapé pelo rodapé de qualquer tema do WordPress?
Basicamente. Existem alguns designs de rodapé que não são muito flexíveis, e pode não funcionar nesses casos.
Oi Leland,
Como posso fazer para que o fundo de todo o rodapé seja de uma cor diferente do resto da página? Tentei usar background-color na seção footer-item da folha de estilos, mas isso só muda o fundo das áreas ocupadas por widgets, por exemplo, se o widget ocupa apenas metade da área do widget, o fundo também ocupa apenas metade da área.
Você provavelmente precisaria colocar outro div em volta de todos os divs footer-item e definir a cor de fundo para ele. Certifique-se de que os divs footer-item também estejam limpos.
Obrigado Leland
Eu mexi um pouco mais e consegui fazer. Tive que colocar minha tag no início do arquivo e colocar o estilo background-color dentro dela.
Obrigado pela postagem. Tentei tantas outras ideias de pessoas sobre como fazer isso e gastei a maior parte do meu tempo consertando o que elas tinham estragado. Isso funciona perfeitamente e agora eu tenho em todos os meus sites. Obrigado
Hank, fico feliz em saber que funcionou para você!
Muito obrigado por este ótimo tutorial, Leland! 🙂
Você acha que poderia me guiar sobre como adicionar separadores entre cada bloco (div) de links ou widget, como no rodapé desta página?
@Saeed: Tudo que você precisaria fazer é mudar seu CSS.
Você poderia fazer algo como:
.footer-item { border-right:1px solid #000; }
Ou você sempre poderia aplicar um fundo a cada item do rodapé.
@Leland: Encontrei esta postagem, estou tentando fazer algo um pouco mais extenso e estava procurando conselhos. Digamos que o usuário queira adicionar mais de 3 widgets (por exemplo) e a largura do contêiner do rodapé só possa acomodar 3. Eu quero que os próximos 3 widgets caiam diretamente abaixo. Onde estou travado é que, quando os 4º (e os próximos) widgets são adicionados, eles não estão alinhados verticalmente corretamente... por causa dos 3 widgets superiores não terem uma altura fixa. Mas eu não quero que os widgets tenham uma altura específica, eu quero que seja dinâmico.
A única coisa que consigo pensar é ter uma função que pegue os widgets para o rodapé em grupos divisíveis por 3 e os envolva em um contêiner div. Você pode me ajudar com isso? Se não, você tem alguma outra sugestão de como posso lidar com isso?
Obrigado,
Jeff
Jeff, o que eu faria seria criar três áreas de widget separadas, uma para cada coluna. Dessa forma, você poderia colocar quantos widgets quisesse em cada coluna e eles ficariam alinhados corretamente.
Ótima ideia! Obrigado
Olá
Não consigo passar da parte de widgetização do tutorial. E agora meu site está infestado de erros. Segui os passos exatamente como você explicou.
Você pode responder para que possamos revisar o que deu errado?
Obrigado por fazer este tutorial. Estou ansioso para fazer isso funcionar para o meu site. É uma boa ideia.
Bom tutorial. Eu também estou travado na parte de widgetização. Tenho várias barras laterais no meu site, então tenho dois arquivos sidebar.php. Tentei adicionar o HTML da barra lateral ao meu arquivo “sibebar1.php”, mas agora recebo um erro semelhante ao que outros postaram.
o que estou fazendo de errado?
Artigo realmente ótimo, finalmente funcionou para mim, agora está implementado no meu site, me ajudou a projetar o tema existente como eu gosto em vez de procurar um tema adequado. Mais uma vez, obrigado por isso.
Olá, Posso usar isso com o Tema Thesis? Eu o comprei e estou tentando aprender a usar todos os seus recursos, como o Thesis OpenHook. Me avise.
Obrigado, Tam
[…] Em: Plugins do Wordpress 29 Jul 2009 Ir para a Fonte […]
[…] Adicione um Rodapé com Widgets ao Seu Tema WordPress Um tutorial que ensina como codificar seu próprio rodapé com widgets, incluindo o HTML, CSS e código WordPress necessários. […]
[…] Adicione um Rodapé com Widgets ao Seu Tema WordPress Um tutorial que ensina como codificar seu próprio rodapé com widgets, incluindo o HTML, CSS e código WordPress necessários. […]
[…] Adicione um Rodapé com Widgets ao Seu Tema WordPress Um tutorial que ensina como codificar seu próprio rodapé com widgets, incluindo o HTML, CSS e código WordPress necessários. […]
Leland:
Obrigado pelo seu comentário no meu post. Meu único problema com este tutorial é que não sei onde vai a marcação inicial de "HTML". É no functions.php?
[…] um rodapé com widgets em um tema minimalista do Wordpress? Já tentei o tutorial aqui e algumas soluções de problemas aqui. Talvez eu tente este […]