Há algum tempo que desejávamos iniciar esta série de artigos, a partir da qual esperamos ajudá-lo a aprender como criar um template WordPress. Esta série irá analisar passo-a-passo todas as diferentes fases do desenvolvimento de um template para WordPress, e para que você consiga analisar e implementar todas elas, decidimos partir esta ideia em vários artigos mais simples de assimilar e explorar. No final da série, certamente conseguirá criar seu template WordPress!
Os templates wordpress são hoje em dia cada vez mais procurados e podem ser facilmente criados com o intuito de serem vendidos em mercados como a Theme Forest ou a Mojo Themes. Qualquer pessoa que deseje entrar neste mundo fascinante do desenvolvimento de templates para wordpress, pode posteriormente comercializá-los nesses mercados e começar a ganhar dinheiro produzindo templates de qualidade.
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Vejamos algumas das competências do template que vamos desenvolver ao longo dos próximos artigos:
- Otimização para motores de busca
- Marcação com suporte Microformato da Google
- Semântica da estrutura de marcação válida e lógica que pode ser usada em qualquer template
- Layouts de CSS inteligentes
- Classes dinâmicas para o corpo, postagens e comentários
- Trackbacks e comentários em árvore separados
- 2 áreas para widgets que desaparecem quando não estão ocupadas
- Tudo o resto que é normal num template WordPress
No final desta série de tutoriais, com o código feito e pronto a ser implementado, você poderá fazer praticamente tudo aquilo que desejar com ele. Você pode inclusive olhar para o resultado final como a sua framework WordPress de trabalho.
CONSTRUINDO O INDEX (INDEX.PHP) DO TEMPLATE WORDPRESS
O ficheiro Index.php é provavelmente o ficheiro mais crucial de todo o seu template WordPress. Não apenas porque o WordPress necessita dele no caso de você não estar usando nenhuma página irmã (como as páginas, category.php ou tag.php) mas porque tendo em conta o trabalho que estamos desenvolvendo, conseguir criar este ficheiro da forma mais correta, irá ajudar-nos a construir todos os outros ficheiros mais rapidamente (excepto o ficheiro de comentários que é sempre muito complicado de programar).
O CICLO
Embora o ciclo esteja a meio do seu ficheiro, de uma forma metafórica, o index.php inicia e termina com O Ciclo. Sem ele você não tem nada. Vejamos como ele se parece.
<?php while ( have_posts() ) : the_post() ?> <?php endwhile; ?>
Muito simples mesmo. Embora você tenha postagens em seu banco de dados, o seu template irá correr um ciclo por entre eles e por cada um, realizar uma determinada tarefa. A parte do “realizar uma tarefa” é sem dúvida a mais complexa de todas. Mas ainda assim, poderemos torná-la simples e acessível.
Experimente este ciclo para começar e ao longo dos artigos iremos trabalhar em cima dele. Coloque esse código dentro da sua div #content em seu ficheiro index.php.
<?php while ( have_posts() ) : the_post() ?> <?php the_content(); ?> <?php endwhile; ?>
O que é que você obtém com esse código? Todas as suas postagens numa grande pilha. Mas poderemos tornar isso diferente.
<ul>
<?php while ( have_posts() ) : the_post() ?>
<li>
<?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
</ul>
Conseguiu perceber o que fizemos aqui? Agora você ficou com uma lista não ordenada de todos os excertos de suas postagens. (Agora também já consegue perceber o que as funções the_content() e the_excerpt() fazem!)
Basicamente, você cria um ciclo (inicia com while e termina com endwhile) e coloca algumas coisas dentro dele — coisas como por exemplo tags de template WordPress que puxam informação de suas postagens que se encontram dentro do ciclo, tal como a tag de template bloginfo() puxa a informação das suas opções do WordPress, como vimos no último artigo.
Agora, vamos criar um ciclo realmente fantástico! Vamos iniciar com a nossa versão básica. Mas iremos fazer com que ela seja compatível com a Tag More e a Tag Next Page. Iremos colocá-lo também numa Div própria e fazer com que o browser saiba que isso é o conteúdo de suas postagens usando a classe de micro-formato “entry-content”.
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
</div><!– .entry-content –>
E o título da postagem? Isso é muito simples também. Iremos usar a tag the_title() para puxar o título da postagem e envolvê-lo numa tag <a> que linke diretamente para o the_permalink() (esse é o link permanente para qualquer postagem). Iremos adicionar também um atributo para títulos e outro micro-formato (bookmark) que diz ao browser ou ao buscador (ex.: Google) que isto é um link permanente para um artigo. Tente colocar este código por baixo de sua div .entry-content.
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
Agora é necessário puxar a informação adicional sobre a sua postagem: quem escreveu o artigo, a data em que foi publicado, a categoria onde foi inserido, tags, links para comentários, etc. Gostaria de quebrar esta fase em duas fases: as coisas relacionadas com meta dados (autor e data de publicação) que colocamos antes do conteúdo da postagem, e as coisas relacionadas com utilidade (categorias, tags e link para comentários) que colocamos depois do conteúdo. E ambas as fases irão colocar a sua postagem dentro de sua própria div junto com o título.
Vamos dar uma olhada a todo o ciclo já programado. Inseri alguns comentários no PHP para o ajudar a compreender melhor o código.
<?php /* O Ciclo — com comentários! */ ?>
<?php while ( have_posts() ) : the_post() ?>
<?php /* Criando uma div com um ID único graças ao the_ID() e classes semânticas com o post_class() */ ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php /* um título h2 */ ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php /* Meta dados da postagem com possibilidade de tradução */ ?>
<div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your-theme'); ?></span>
<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
</div><!– .entry-meta –>
<?php /* O conteúdo da postagem */ ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
</div><!– .entry-content –>
<?php /* Categoria micro-formatada e links para tags junto com link para comentários */ ?>
<div class="entry-utility">
<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>
<span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
</div><!– #entry-utility –>
</div><!– #post-<?php the_ID(); ?> –>
<?php /* Encerrar a div e terminar o ciclo com endwhile */ ?>
<?php endwhile; ?>
NAVEGAÇÃO
Agora necessitamos de criar uma forma de navegarmos para outras postagens. Iremos criar isto usando 2 tags do WordPress: next_posts_link() e previous_posts_link(). Estas duas funções … não fazem aquilo que você julga que fazem.
Tal como tudo o que está no index.php, a navegação de postagens tem de ser criada com alguns cuidados porque é um código que iremos usar em praticamente todas as páginas de nosso template.
Uma coisa que também gostamos, é colocar a navegação no topo e no final de cada postagem.
Uma coisa que queremos fazer também é esconder a navegação caso não existam outros conteúdos para navegar. Ou seja, se você não tiver postagens antigas em seu blog, nós não queremos enviar o código de navegação para o browser. Para o fazer, envolvemos o nosso código da seguinte forma:
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<?php } ?>
O que estamos fazendo é indicando que queremos verificar num dado ciclo, se o número de postagens é superior a 1. Caso seja afirmativo, a navegação aparece em seu blog.
Eis o código final que você irá necessitar na sua navegação, para o topo e fundo da postagem, ou seja, antes e depois do ciclo.
<?php /* Navegação para o Topo */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div>
</div><!– #nav-above –>
<?php } ?>
<?php /* Navegação para o Fundo */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div>
</div><!– #nav-below –>
<?php } ?>
E agora uma última coisa que vamos fazer em nosso index.php. Nas próximas postagens iremos analisar como trabalhar com ele, mas para já vamos apenas colocar esta nova função antes da nossa get_footer().
<?php get_sidebar(); ?>
ESTÁ ACOMPANHANDO? TEM DÚVIDAS?
Este quinto artigo teve como base a programação de nosso index.php e sua devida otimização. O mais importante neste momento é que você compreenda os passos que vamos dando e caso tenha dúvidas, poderá colocá-las sem problema. Contamos com a sua participação e as suas dúvidas. Está gostado? Participe com seus comentários!
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Até Já!
