22

Como criar um tema para o WordPress – parte II Por Érico Oliveira dia 19 de junho de 2007 às 7:38 | Imprimir este post

Corpo principal do Tema Mighty

Corpo principal do Tema Mighty

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!


Adicionar um comentário

22 comentários : “ Como criar um tema para o WordPress – parte II ”

  1. 1
    Gravatar
    John-Henrique : 13 julho 2007 às 22:00

    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. 2
    Gravatar
    Érico Oliveira : 13 julho 2007 às 22:35

    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. 3
    Gravatar
    John-Henrique : 13 julho 2007 às 22:41

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

    Obrigado.

    Falopa!

  4. 4
    Gravatar
    ana : 02 agosto 2007 às 17:38

    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. 5
    Gravatar
    Érico Oliveira : 02 agosto 2007 às 17:50

    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. 6
    Gravatar
    hnnoaodxzp : 03 agosto 2007 às 0:16

    Hello! Good Site! Thanks you! ykambfnkzhr

  7. 7
    Gravatar
    Como criar um tema para o WordPress - parte III : 05 agosto 2007 às 22:52

    [...] criar um tema para o WordPress Рparte IPlugins que ṇo podem faltar no seu blogComo criar um tema para o WordPress Рparte IIInstale plugins e temas com apenas um cliqueCole̤̣o de Temas para o WordPressTema para WordPress [...]

  8. 8
    Gravatar
    Como criar um tema para o WordPress - parte IV : 26 agosto 2007 às 14:04

    [...] Como criar um tema para o WordPress – parte IIComo criar um tema para o WordPress – parte IPlugins que não podem faltar no seu blogColeção de Temas para o WordPressInstale plugins e temas com apenas um cliqueTema para WordPress com cara de CMSDiferentes estilos para os anúncios do Google AdsenseUtilizando o FTP para enviar arquivos para o servidorComo diferenciar os seus comentários dos comentários dos visitantesTema com 2 colunas e design primoroso [...]

  9. 9
    Gravatar
    pBlog, Personalize seu blog Wordpress » Blog Archive » Como criar um tema para o WordPress - parte V : 10 outubro 2007 às 11:09

    [...] Como criar um tema para o WordPress – parte IIComo criar um tema para o WordPress – parte IPlugin Digg style paginationTema para WordPress traduzido para portuguêsComo exibir tags no WordPress 2.3Extensão para o Firefox adiciona menu com atalhos para o WordPressLista de plugins compatíveis com o WordPress 2.3Plugins que não podem faltar no seu blogPlugin permite exibir quantidade diferente de postsWidget para adicionar uma nuvem de tags no menu lateral [...]

  10. 10
    Gravatar
    Raphael Eduardo : 27 novembro 2007 às 15:52

    Párabens pela série de Tutoriais

  11. 11
    Gravatar
    Pablo Almeida : 01 fevereiro 2008 às 22:44

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

  12. 12
    Gravatar
    Anizio Carlos da Silva : 23 abril 2008 às 22:24

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

  13. 13
    Gravatar
    Marcelo torres : 26 julho 2008 às 0:12

    Caraca velho!!! parabéns pelo tutorial,agora posso enfim montar meu próprio layout no WP, e deixar o Blogger

  14. 14
    Gravatar
    Heyder : 09 agosto 2008 às 14:20

    e o link Add Coments?
    não vi ele no codigo do wordpress que vc fez…

    fiz um de teste.. e nao aparece os comentarios =\

  15. 15
    Gravatar
    Lincoln Lamas : 15 agosto 2008 às 11:13

    Cadê a parte 3?
    Cheguei no final dessa e agora tá faltando a sidebar e o footer :/

    ehaehaeha

    Parabéns,
    Estamos no aguardo!

  16. 16
    Gravatar
    mnorgovudkka : 28 dezembro 2008 às 22:54

    Hy my name is mnorgovudkka
    Im from mongolia
    Buy

  17. 17
    Gravatar
    Paulo Maciel : 02 janeiro 2009 às 22:00

    [...] vocês podem ver na imagem do corpo principal, este trecho está dividido em cinco partes bem distintas, são elas: o título [...]

  18. 18
    Gravatar
    Guiiih Tutoriais » Como criar um tema para o WordPress - parte II : 27 fevereiro 2009 às 12:18

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

  19. 19
    Gravatar
    Como criar um tema para o WordPress - parte III | João Andrade l Web Designer : 15 maio 2009 às 14:58

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

  20. 20
    Gravatar
    Como criar um tema para o WordPress - parte V | João Andrade l Web Designer : 15 maio 2009 às 16:43

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

  21. 21
    Gravatar
    Como criar um tema para o WordPress - parte II | João Andrade l Web Designer : 15 maio 2009 às 17:04

    [...] Website Kulor on top yet again website Kulor on top yet [...]

  22. 22
    Gravatar
    everson : 14 setembro 2009 às 8:02

    Cara obrigado pelo seu artigo. esta me ajudando, mas acho que ta errado…. acho que a linha 19 e 20 deve vir antes de fechar o while…

    19.
    20.

    16.
    17.
    18.

Escreva um Comentário