pBlog

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.

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!

Neste tutorial explicarei como criar um tema para o WordPress baseado em um template XHTML/CSS. Como não sou designer e nosso objetivo aqui não é criar um template e sim um tema para o WordPress, fui no OSWD e escolhi um template, o escolhido foi o Mighty, desenvolvido pelo Kulor. Todos os templates que existem lá, você pode copiar, modificar e utilizar da forma que quiser, desde que cite o autor. Então escolha um template ou crie o seu próprio e vamos colocar a mão na massa.

Um detalhe importante, na verdade dois, primeiro: para a completa compreensão deste tutorial é necessário que você saiba HTML e CSS, se souber alguma coisa de PHP será ótimo mas não é essencial. Segundo: para tornar mais rápido e prático o desenvolvimento do tema eu recomendo que você instale o WordPress no seu computador, eu já fiz um tutorial explicando como fazer isso, espero que lhe seja útil.

Nesta primeira parte do tutorial explicarei onde colocar os arquivos, como o WordPress reconhece seu tema e como criar o cabeçalho. Vamos lá, acesse a pasta wp-content/themes, que está localizada dentro do seu WordPress no seu computador ou no seu servidor, crie uma pasta com o nome da sua template, no meu caso será Mighty, e salve os arquivos da template. Qualquer tema do WordPress deve ter no mínimo dois arquivos, index.php e style.css. No nosso caso teremos mais, são eles: index.php, header.php, sidebar.php, footer.php, comments.php, style.css, screenshot.png e mais uma pasta chamada images (que contem as imagens utilizadas na template). Na medida que formos construindo a template irei explicando para que serve cada um destes arquivos.

Antes de entrarmos diretamente na modificação dos arquivos faremos logo a imagem de preview do tema, que aparece na administração, no momento em que você está selecionando as templates. O arquivo deve ser chamar screenshot.png e possuir 300×225 pixels. Deverá ser salva na pasta do tema como todos os outros arquivos, no nosso caso wp-content/themes/mighty. Lembrei agora de uma dica muito legal que sempre utilizo quando tenho alguma dúvida, vejo como foi feito nos outros templates, principalmente no Classic e Default, que foram os primeiros temas do WordPress.

A primeira modificação a ser feita será no arquivo style.css. Neste arquivo deveremos inserir as informações sobre a template, que o WordPress utilizará para reconhecer como um tema e exibirá na seção Presentation>Theme do administrador. Se estes dados não forem inseridas no início do style.css, o tema não aparecerá para você escolher na administração. As informações que deverão ser inseridas são as seguintes:

1. /*
2. Theme Name: Mighty
3. Theme URI: http://www.pblog.com.br/
5. Author: Erico Oliveira
6. Author URI: http://www.pblog.com.br
7. Version: 1.0
8. */

Acredito que aqui não há nada a ser esclarecido, tudo é bem óbvio. Vamos adiante.

O próximo arquivo que faremos é o header.php, ou seja, o cabeçalho. Copiaremos o trecho do código referente a esta parte da template:

Que é exatamente esta:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>Mighty</title>
6. <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
7. <link rel="stylesheet" href="style.css" media="all" type="text/css" />
8. <link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" />
9. </li> <li class="t0"><code></head>
11. <body>
12. <div id="header">
13. <div class="subContainer">
14. <div id="logo">
15. <div id="box">MIGHTY</div>
16. <p>Template by James Broad</p>
17. </div>
18. </div>
19. </div>
21. <div id="navigation">
22. <ul>
23. <li id="active"><a href="">Home</a></li>
24. <li><a href="">About Mighty</a></li>
25. <li><a href="">Products</a></li>
26. <li><a href="">Services</a></li>
27. <li><a href="">Contact Us</a></li>
28. </ul>
29. </div>

Agora iremos substituir parte do código estático do HTML pelas tags do WordPress. Para quem não está muito familiarizado com PHP ou outra linguagem dinâmica o negócio funciona assim: na linha 5 do código HTML, por exemplo, temos e iremos substituir por . Desta maneira quando o arquivo header.php for solicitado, o servidor irá processar todos os trechos de códigos compreendidos entre <?php e ?> antes de enviar para o seu browser, neste caso ele substituirá a tag bloginfo(’name’); pelo título do blog que você informou no administrador do WordPress. Ok? Vamos então ver como ficou todo código com as tags do WordPress.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title><?php bloginfo('name'); ?></title>
6. <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
7. <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?>" />
8. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="all" type="text/css" />
9. <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
10. <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
11. <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
13. <?php wp_head(); ?>
14. </head>
16. <body>
17. <div id="header">
18. <div class="subContainer">
19. <div id="logo">
20. <div id="box"><?php bloginfo('name'); ?></div>
21. <p><?php bloginfo('description'); ?></p>
22. </div>
23. </div>
24. </div>
26. <div id="navigation">
27. <ul>
28. <li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
29. <?php wp_list_pages('title_li='); ?>
30. </ul>
31. </div>

Agora vou explicar todas tags utilizadas neste cabeçalho. Se você quiser saber mais detalhes sobre as tags ou conhecer as demais tags do WordPress eu recomendo uma visita ao Codex>Template Tags (em inglês, ok?).

• bloginfo(’name’) - este quase dispensa explicações, nome do blog;
• bloginfo(’version’) - versão do WordPress;
• bloginfo(’html_type’) - “Content-type” do seu blog;
• bloginfo(’charset’); - codificação de caracteres utilizada no blog;
• bloginfo(’stylesheet_url’) - CSS do seu tema;
• bloginfo(’rss2_url’) - RSS 2.0 do blog;
• bloginfo(’rss_url’) - RSS 0.92 do blog;
• bloginfo(’atom_url’) - Atom do blog;
• wp_head() - é uma tag especial que permite que certos plugins insiram códigos no cabeçalho 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;
• bloginfo(’description’) - descrição do blog;
• get_option(’home’) - na verdade trata-se de uma função e não uma tag, por isso deve vir precedida da função echo do PHP, que exibe o resultado de uma função ou variável. Neste caso irá retornar a URL inicial do blog;
• wp_list_pages(’title_li=’) - exibe todas as pages existentes, precedidas de <li> e sucedidas por </li>.

Terminamos assim a primeira parte do nosso tutorial. Na próxima etapa falaremos sobre o corpo principal do site, onde são exibidos o objetivo de todo blog, os posts.