Como criar um tema para o WordPress – parte III

Menu Lateral do Tema Mighty

Menu Lateral do Tema Mighty

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é.

19 thoughts on “Como criar um tema para o WordPress – parte III

  1. Pingback: Como criar um tema para o WordPress - parte IV

  2. Pingback: pBlog, Personalize seu blog Wordpress » Blog Archive » Como criar um tema para o WordPress - parte V

  3. Pingback: pBlog: dicas, truques e macetes para Wordpress

  4. Pingback: Não sabe fazer? procure um tutorial : Info Dinheiro

  5. Olá Érico,
    utilizando a tag faz com que, além de estar o título “Categorias” por nós escrito, também aparecer pela tag escrito ‘categorias’

    Sendo assim ficam duas “categorias” na sidebar, a nossa em Hx e a da tag php.

    Mas no seu exemplo isso não aconteceu. Ainda vou olhar a documentação do WP quanto a isso, mas caso saiba me dizer o porque e como tirar, obrgiado.

    O link do exemplo/blog está adicionado acima.

    Abraços

  6. Pingback: Como criar um tema para o WordPress - parte IV | João Andrade l Web Designer

  7. Pingback: Como criar um tema para o WordPress - parte III | João Andrade l Web Designer

  8. Pingback: Como criar um tema para o WordPress - parte V | João Andrade l Web Designer

  9. Pingback: junichi_y

  10. Pingback: FreelanceWP.com

  11. Pingback: WP Goat

  12. Pingback: FreelanceWP.com

  13. Pingback: Blueliner Web

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>