Na etapa de hoje, falaremos sobre o rodapé do nosso tema e como sempre, recomendo a todos que estão chegando agora a leitura dos posts anteriores deste tutorial, parte I, parte II e parte III.
Na imagem abaixo, como vocês podem ver, está o rodapé do nosso template.

Neste template o rodapé é extremamente simples, mas há temas para o WordPress que adicionam vários recursos, como é o caso do tema Dark (excelente por sinal).
Voltando ao nosso template, vamos dar uma olhada no código fonte.

<div id="footer">
<ul>
<li id="copyright" >&amp;copy; 2007 Mighty</li>
<li id="links" >
<ul>
<li><a href="http://validator.w3.org/check/referer">XHTML</a> |</li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" >CSS</a> |</li>
<li><a href="http://www.kulor.com/?ref=mighty_template">Design by Kulor</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Como de praxe, agora vamos ver o código com as tags do WordPress, que deverá ser inserido no arquivo footer.php.

<div id="footer">
<ul>
<li id="copyright">&amp;copy; 2007 <?php bloginfo('name'); ?> |</li>
<li>Powered by <a href="http://wordpress.org/">WordPress</a> |</li>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
<li id="links">
<ul>
<li><a href="http://validator.w3.org/check/referer" >XHTML</a> |</li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" >CSS</a> |</li>
<li><a href="http://www.kulor.com/?ref=mighty_template" >Design by Kulor</a></li>
</ul>
</li>
</ul>
</div>
<?php wp_footer(); ?>
</body>
</html>

Como vocês puderam observar, de fato nosso rodapé é muito simples e apenas algumas tags foram inseridas. Vamos explicá-las:

• bloginfo(’name’) – nome do blog;
• bloginfo(’rss2_url’) – link para o feed RSS;
• wp_footer() – é uma tag especial que permite certos plugins inserir códigos no rodapé de seu tema. Quando esta tag não é inserida vários plugins deixam de funcionar, então não esqueça de colocá-la em todos os seus temas.

Terminamos assim mais uma etapa de nosso tutorial e para a próxima, e última parte, teremos o tema completo para download e as considerações finais. Até a próxima.

Pessoal, não esqueci do nosso tutorial, apenas andei sem tempo nas últimas semanas. Para quem está chegando agora, recomendo a leitura da Parte I e Parte II do tutorial. Na primeira parte do tutorial expliquei como funciona um tema WordPress em linhas gerais e sobre os arquivos screenshot.png, style.css e header.php. Na segunda parte expliquei sobre o corpo principal do tema, o index.php. E agora vocês verão como funciona o menu lateral com o arquivo sidebar.php
Na imagem ao lado vocês estão vendo o menu lateral e nele nos temos o formulário de busca, as listas de categorias, arquivo e blogroll. Todas essas listas são geradas automaticamente pelo WordPress, desta forma sempre que você cria uma nova categoria, por exemplo, ela é exibida no menu lateral sem precisar editar arquivo algum.
Primeiro vejamos o código HTML do menu lateral.

<div id="secondaryContent">
<form action="">
<p><input /> <button>procurar</button></p>
</form>
<h3>Categorias</h3>
<ul>
<li><a href="#">Sed eros</a></li>
<li><a href="#">Condimentum</a></li>
<li><a href="#">Feugiat sit</a></li>
</ul>
<h3>Arquivos</h3>
<ul>
<li><a href="#">Julho 2007</a></li>
<li><a href="#">Junho 2007</a></li>
</ul>
<h3>Blogroll</h3>
<ul>
<li><a href="#">Sed eros</a></li>
<li><a href="#">Condimentum</a></li>
<li><a href="#">Feugiat sit</a></li>
</ul>
</div>

Agora vamos inserir as tags do WordPress e ver como fica o código do template.

<div id="secondaryContent">
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
<p><input type="text" name="s" id="s" /><input type="submit" value="Procurar" /></p>
</form>
<h3>Categorias</h3>
<ul>
<?php wp_list_categories('show_count=1'); ?>
</ul>
<h3>Arquivos</h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h3>Blogroll</h3>
<ul>
<?php get_links(2, '<li>', '</li>', '', '', 'name'); ?>
</ul>
</div>

Visto o código com as tags inseridas mostraremos agora o significado de cada uma. Antes porém, é importante explicar que o formulário de busca segue um padrão, e por isto, basta copiar e colar o código na sua template.

• bloginfo(‘home’) – insere a URL inicial do blog;
• wp_list_categories(‘show_count=1′); – exibe uma lista com todas as categorias com o número de posts existentes em cada categoria;
• wp_get_archives(‘type=monthly’) – lista todos os meses do ano em que foram inseridos posts. Se você escreveu 7 posts no mês de maio de 2007, por exemplo, será exibido um link “maio/2007″ que ao ser clicado exibirá todos os 7 posts que você escreveu;
• get_links(2, ‘<li>’, ‘</li>’, ”, ”, ‘name’) – lista todos os links da categoria 2 (no caso blogroll), inserindo antes a tag “<li>”, depois a tag </li> e exibindo o nome do link.

Assim, concluimos mais uma parte de nosso tutorial. Na próxima etapa veremos o rodapé.

Na primeira parte do tutorial expliquei como funciona um tema WordPress em linhas gerais e sobre os arquivos screenshot.png, style.css e header.php. Nesta segunda parte explicarei sobre o corpo principal do tema, o index.php.

Como vocês podem ver na imagem do corpo principal, este trecho está dividido em cinco partes bem distintas, são elas: o título do post, o conteúdo do post, o link para comentar, o autor e a data. Este é o conteúdo que irá se repetir até que não tenha mais posts ou o número de posts configurado para ser exibido na página principal seja alcançado. Esse é o famoso Loop do WordPress.

Vamos dar uma olhada no código HTML do template referente a este trecho.

<div id="container">
<div id="primaryContent">
<h2>Website Kulor on top yet again website Kulor on top yet again</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce condimentum nibh. Sed eros tellus, <strong>semper</strong> vel, dignissim at, feugiat sit amet, leo.</p>
<div id="comments">
<dl id="status">
<dt>Comments (1)</dt>
<dd>| <a href="#">Add comment</a></dd>
</dl>
<dl class="comment">
<dt><a href="#">John Doe</a></dt>
<dd class="date">on Wed 5 Aug 06</dd>
</dl>
</div>
</div>

E como fica o código com as tags do WordPress.

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="container">
<div id="primaryContent">
 <li ><code><h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<p><?php the_content(); ?></p>
<div id="comments">
<dl id="status">
<dt><a href="<?php the_permalink(); ?>"><?php comments_number('Nenhum coment&amp;aacute;rio', 'Um coment&amp;aacute;rio', '% coment&amp;aacute;rios' );?></a></dt>
</dl>
<dl class="comment">
<dt><?php the_author(); ?></dt>
<dd class="date">dia <?php the_time('j \d\e\ F \d\e\ Y'); ?></dd>
</dl>
<?php endwhile; else: ?>
<p><?php _e('Nenhum post encontrado.'); ?></p>
<?php endif; ?>
<?php posts_nav_link(' &amp;#8212; ', __('&amp;laquo; P&amp;aacute;gina anterior'), __('Pr&amp;oacute;xima p&amp;aacute;gina &amp;raquo;')); ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Agora o que significa cada uma dessas tags. Antes é importante esclarecer que o index.php é o arquivo base do tema e é por isso que nós vamos inserir nele os demais arquivos do tema, como o cabeçalho, o menu e o rodapé. Vamos lá.

• get_header() – insere o código do header.php, isto é, o cabeçalho do tema;
• if (have_posts()) : while (have_posts()) : the_post() – aqui na verdade nós temos três funções e elas é que dão início ao LOOP. A primeira tag verifica se há posts, a segunda solicita que, enquanto existir post continue no loop e a terceira “pega” todas as informações do post, como o título, conteúdo, data, autor, etc. É comum encontrar tags que só funcionam dentro do loop, isto quer dizer que a tag só irá retornar algum valor se estiver inserida após estas funções e antes de endwhile; e endif;, que terminam o loop.
• the_permalink() – o link do post;
• the_title() – o título do post;
• the_content() – o conteúdo do post;
• comments_number() – insere o número de comentários feitos no post. Além disso adiciona um texto dependendo da quantidade de comentários. Se não houver comentários a tag irá inserir o texto “Nenhum comentário”, se tiver apenas um comentário, irá inserir “Um comentário” e para mais de um comentário irá inserir “N comentários”, onde N é a quantidade de comentários, claro;
• the_author() – o autor do post;
• the_time() – a data em que o post foi postado;
• endwhile; else: – encerra o loop e adiciona a condicional que, se não houver nenhum post insira o conteúdo abaixo;
• _e(‘Nenhum post encontrado.’) – este é conteúdo que irá ser inserido caso não exista nenhum post;
• endif; – termina a condicional que verifica se há posts;
• posts_nav_link() – adiciona links de navegação, “próxima página” e “página anterior”;
• get_sidebar() – insere o menu lateral, que veremos na próxima etapa do tutorial;
• get_footer() – e por último, mas não menos importante, insere o rodapé.

Pronto, mais uma parte do nosso tutorial concluída. Até a próxima!