Como criar um tema para o WordPress – parte III Por Érico Oliveira dia 05 de agosto de 2007 às 10:35 pm | Imprimir este post

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.

  1. <div id="secondaryContent">
  2. <form action="">
  3. <p><input /> <button>procurar</button></p>
  4. </form>
  5. <h3>Categorias</h3>
  6. <ul>
  7. <li><a href="#">Sed eros</a></li>
  8. <li><a href="#">Condimentum</a></li>
  9. <li><a href="#">Feugiat sit</a></li>
  10. </ul>
  11. <h3>Arquivos</h3>
  12. <ul>
  13. <li><a href="#">Julho 2007</a></li>
  14. <li><a href="#">Junho 2007</a></li>
  15. </ul>
  16. <h3>Blogroll</h3>
  17. <ul>
  18. <li><a href="#">Sed eros</a></li>
  19. <li><a href="#">Condimentum</a></li>
  20. <li><a href="#">Feugiat sit</a></li>
  21. </ul>
  22. </div>

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

  1. <div id="secondaryContent">
  2. <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
  3. <p><input type="text" name="s" id="s" /><input type="submit" value="Procurar" /></p>
  4. </form>
  5. <h3>Categorias</h3>
  6. <ul>
  7. <?php wp_list_categories('show_count=1'); ?>
  8. </ul>
  9. <h3>Arquivos</h3>
  10. <ul>
  11. <?php wp_get_archives('type=monthly'); ?>
  12. </ul>
  13. <h3>Blogroll</h3>
  14. <ul>
  15. <?php get_links(2, '<li>', '</li>', '', '', 'name'); ?>
  16. </ul>
  17. </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é.

Adicionar um comentário

13 comentários : “ Como criar um tema para o WordPress – parte III ”

  1. 1
    Gravatar
    Igor :

    cade a parte 4 o.O !!!!

  2. 2
    Gravatar
    Érico Oliveira :

    Está saindo do forno. :)
    É provável que na próxima semana já esteja publicado.

  3. 3
    Gravatar
    Igor :

    ok meu template pra wordpress ja ta pronto xD falta eu ler a ultima parte, ei me adiciona no msn que tenho uma proposta interessante ao sr, igor_diniz@msn.com

  4. 4
    Gravatar
    Como criar um tema para o WordPress - parte IV :

    [...] 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 [...]

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

    [...] está chegando agora, é bom dar uma olhada nos posts anteriores deste tutorial, parte I, parte II, parte III e parte [...]

  6. 6
    Gravatar
    pBlog: dicas, truques e macetes para Wordpress :

    [...] Como criar um tema para o WordPress – parte III [...]

  7. 7
    Gravatar
    Não sabe fazer? procure um tutorial : Info Dinheiro :

    [...] Como criar um tema para o WordPress – parte III [...]

  8. 8
    Gravatar
    Matheus :

    Como eu faço para adicionar duas colunas na lateral do theme ?
    Obrigado.

  9. 9
    Gravatar
    MicNeupe :

    Ценные рекомендации, беру на заметку

  10. 10
    Gravatar
    Francisco :

    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

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

    [...] 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 [...]

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

    [...] 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 [...]

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

    [...] está chegando agora, é bom dar uma olhada nos posts anteriores deste tutorial, parte I, parte II, parte III e parte [...]

Escreva um Comentário