Nesta 6ª e última parte da série sobre a criação de WordPress themes vamos falar nos 3 ficheiros que faltam ser criados para que o tema fique pronto: o sidebar.php, o functions.php e o footer.php.

As outras partes desta série podem ser encontradas nos seguintes links:

sidebar.php

O ficheiro sidebar.php é responsável pelo conteúdo da sidebar (lateral) do blog. A sua utilização não é obrigatória, mas como a maioria dos templates para wordpress têm duas colunas  e o tema que estamos a criar também tem (conteúdo + barra lateral), vamos criar o nosso sidebar.php e adicionar o suporte a widgets.

Para que serve a sidebar?

Nesta série de artigos temos recebido vários comentários e um deles perguntava qual era o uso que podemos dar a um espaço ao lado do conteúdo. A resposta é muito simples, a sidebar pode ser usada para colocar publicidade, um formulário de pesquisa, as categorias, links de sites parceiros, etc.

O que são os widgets?

Os widgets permitem que você adicione conteúdo numa parte do tema sem ter que editar o código. Normalmente os widgets são usados nas sidebars, mas você pode adicionar widgets em qualquer lugar.

Depois do tema estar preparado para trabalhar com widgets, vá a Apresentação (Aparência) > Widgets e só tem que arrastar os widgets para os espaços que o seu tema suporta.

Criando o sidebar.php

Agora que você já sabe para que serve uma sidebar e o que são os widgets, vamos passar ao trabalho. Comece por criar um ficheiro chamado de sidebar.php ou abra o ficheiro que criamos na primeira parte do tutorial. Se ainda não fez o download dos ficheiros, faça-o aqui.

Como algumas pessoas não sabem o que são os widgets e como é que eles funcionam, fizemos este vídeo onde pode acompanhar toda a criação da sidebar e também a preparação do tema para receber widgets. A explicação em texto e todos os códigos estão depois do vídeo.


<div id="sidebar">
<ul class="widget">
<h3>Widget</h3>
<li><a href="#">Página 1</a></li>
<li><a href="#">Página 2</a></li>
<li><a href="#">Página 3</a></li>
<li><a href="#">Página 4</a></li>
</ul>

<ul class="widget">
<h3>Widget</h3>
<li><a href="#">Categoria 1</a></li>
<li><a href="#">Categoria 2</a></li>
<li><a href="#">Categoria 3</a></li>
<li><a href="#">Categoria 4</a></li>
</ul>
</div>

Para começar vamos remover todo o código que está dentro da div "sidebar" e substituir por este:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?><?php endif; ?>

Este código faz uma verificação para saber se o tema suporta widgets. Se suportar, então ele vai mostrar os widgets da zona/área com o nome "Sidebar".

E este é o nosso sidebar.php final:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?><?php endif; ?>
</div>

O próximo passo é "registar" esta zona para que o wordpress consiga guardar e mostrar os widgets no template. Isso é feito no ficheiro functions.php.

functions.php

Este é um dos ficheiros mais importantes num tema e é usado para adicionar muitas funcionalidades a um wordpress theme. O functions.php pode ser usado para definir muita informação, adicionar suporte para várias funcionalidades e até alterar a forma como o wordpress trabalha.

Para um tema suportar widgets, é preciso "dizer" ao wordpress que o tema tem um ou mais espaços que suportam widgets. É neste ficheiro que temos que adicionar um código que faz esse trabalho.

A explicação do código:

  • linha 1: inicio do código php;
  • linha 4: se a função "register_sidebar" existir (se o wordpress suportar widgets), então faz o que estiver entre as { ... } (linhas 5 e 13);
  • linha 5: inicio do "registo" de uma zona para widgets;
  • linha 7: define o nome da zona de widgets;
  • linha 8: define o código que fica antes do inicio do widget;
  • linha 9: define o código que fica no fim do widget;
  • linha 10: define o código que aparece antes de um título (caso o widget tenha um título);
  • linha 11: define o código que fica depois do título;
  • linha 12: termina o registo da zona;
  • linha 13: termina o trabalho iniciado na linha 4;
  • linha 15: termina o código php.
<?php
/* WIDGETS */

if (function_exists('register_sidebar'))
{
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}

?>

Neste caso não é necessário ter mais do que uma sidebar, mas se está interessado em saber como faz para ter duas ou mais zonas com suporte a widgets veja o vídeo em cima.

Depois tem que guardar o fichiero e o nosso tema já suporta widgets:

Wordpress Widgets

footer.php

O footer.php é o ficheiro responsável pelo rodapé do site e nele fica uma tag que insere alguns scripts no tema. Esta tag wp_footer é importante e é necessária para que alguns plugins funcionem. Em condições normais não há nenhuma alteração visível no design quando temos esta tag no código do tema.

Só tem que copiar e colar em qualquer parte do footer.php:

<?php wp_footer(); ?>

Nós optamos por colocar a tag por baixo da linha dos créditos do site, por isso o footer.php final é este:

<div id="footer">
<p>&copy; 2012 - Todos os Direitos Reservados</p>
<?php wp_footer(); ?>
</div>

</div>

</body>
</html>

E agora não há mais ficheiros para terminar, todo o nosso tema está pronto para funcionar!

Download dos ficheiros

Conclusão e Dicas Finais

Neste momento o seu tema está pronto para ser usado online. Recomendamos que faça o download deste pdf que contém uma lista de tags que podem ser usadas nos seus temas. Pode também encontrar muita informação no WordPress Codex, um site onde pode encontrar todas as informações necessárias para criar, melhorar e entender melhor os temas, plugins e o próprio wordpress.

Esta série está agora terminada e nos próximos artigos sobre código, que estão disponíveis na categoria Código e Hacks, vamos ensinar a adicionar funcionalidades avançadas num tema. Para não perder esses artigos, recomendamos que nos siga nas nas redes sociais ou subscreva a newsletter gratuita para receber os artigos por email:

[subscribeform]

Esperamos que esta série de artigos tenha sido útil, se tiver alguma dúvida ou sugestão deixe um comentário! 🙂

Este post faz parte de uma série de artigos sobre a criação de wordpress themes: