pBlog

Personalize seu blog Wordpress

Assinar Feed
1519 assinantes

Como criar um tema para o WordPress - parte II

Postado dia 19 Jun, 2007 por Érico Oliveira | Categoria Tutorial
Tags: , , ,
Adicionar este post no Linkk e/ou Del.icio.us.

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.Template Mighty - Body

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.

  1. <div id="container">
  2. <div id="primaryContent">
  3. <h2>Website Kulor on top yet again website Kulor on top yet again</h2>
  4. <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>
  5. <div id="comments">
  6. <dl id="status">
  7. <dt>Comments (1)</dt>
  8. <dd>| <a href="#">Add comment</a></dd>
  9. </dl>
  10. <dl class="comment">
  11. <dt><a href="#">John Doe</a></dt>
  12. <dd class="date">on Wed 5 Aug 06</dd>
  13. </dl>
  14. </div>
  15. </div>

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

  1. <?php get_header(); ?>
  2. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  3. <div id="container">
  4. <div id="primaryContent">
  5. <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  6. <p><?php the_content(); ?></p>
  7. <div id="comments">
  8. <dl id="status">
  9. <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>
  10. </dl>
  11. <dl class="comment">
  12. <dt><?php the_author(); ?></dt>
  13. <dd class="date">dia <?php the_time('j de F de Y'); ?></dd>
  14. </dl>
  15. <?php endwhile; else: ?>
  16. <p><?php _e('Nenhum post encontrado.'); ?></p>
  17. <?php endif; ?>
  18. <?php posts_nav_link(' &amp;#8212; ', __('&amp;laquo; P&amp;aacute;gina anterior'), __('Pr&amp;oacute;xima p&amp;aacute;gina &amp;raquo;')); ?>
  19. </div>
  20. </div>
  21. <?php get_sidebar(); ?>
  22. <?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!

12 Comentários

Inscreva-se nos comentários.

  1. John-Henrique, 13 de July de 2007:

    Gostaria de saber como é feito este negócio de “Posts Relacionados” e “Avise-me sobre novos comentários por email”, pode me informar?

    Falopa!

  2. Érico Oliveira, 13 de July de 2007:

    Olá John, trata-se de dois plugins que utilizo aqui no pBlog, um chamado Related Posts e o outro Subscribe To Comments. Você poderá encontrar os dois no site http://www.wp-plugins.net. Abraços.

  3. John-Henrique, 13 de July de 2007:

    Ainda bem, eu já estava quase criando uma aplicação que fizesse isso.

    Obrigado.

    Falopa!

  4. ana, 2 de August de 2007:

    Olá!
    parabéns pela iniciativa de criar esse tutorial! Agora me pergunto: Você vai postar o restante do tutorial? Pois não encontro as alterações para a sidebar.php, footer.php, comments.php…
    Obrigada!

  5. Érico Oliveira, 2 de August de 2007:

    Oi Ana,
    De fato eu já devia ter publicado a terceira parte do tutorial, mas estive bastante ocupado ultimamente. Prometo que publico semana que vem. :)

  6. hnnoaodxzp, 3 de August de 2007:

    Hello! Good Site! Thanks you! ykambfnkzhr

  7. Raphael Eduardo, 27 de November de 2007:

    Párabens pela série de Tutoriais

  8. Pablo Almeida, 1 de February de 2008:

    Muito bom trabalho, cara! Melhor referência que encontrei sobre o assunto! Um dos bons blogs que temos no país! ;)

  9. Anizio Carlos da Silva, 23 de April de 2008:

    Érico, o código tá todo bagunçado nesse artigo!

    Mas enfim, a série é bastante útil, agora mesmo tô terminando um theme e é bom contar com uma referência em português.

    Um abraço.

Deixe um comentário

Faça um trackback

3 Trackbacks/Pingbacks

Clique para mostrar ou ocultar trackbacks.

  1. Pingback: Como criar um tema para o WordPress - parte III on 5 de August de 2007
  2. Pingback: Como criar um tema para o WordPress - parte IV on 26 de August de 2007
  3. Pingback: pBlog, Personalize seu blog Wordpress » Blog Archive » Como criar um tema para o WordPress - parte V on 10 de October de 2007