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 SINGLE POST, ANEXOS E PÁGINA DE ERRO 404
Depois de termos criado um template para nosso index.php onde aparecem todas as postagens de nosso blog, é altura de começarmos a criar as páginas individuais para cada tipo de conteúdo. O index é apenas a homepage de seu blog, pelo que é necessário criarmos também as páginas individuais das postagens (single post), os anexos de postagens (post attachments) e também a página de erro 404 que surge quando seus usuários não encontram os seus conteúdos.
O TEMPLATE PARA OS TEMPLATES
A estrutura do ficheiro single.php (e praticamente todos os outros templates de páginas que iremos criar) é muito parecido com o ficheiro index.php. De facto, você poderá olhar para ele como o template para os templates.
<?php get_header(); ?>
<div id="container">
<div id="content">
<div id="nav-above" class="navigation">
</div><!– #nav-above –>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
</div><!– #post-<?php the_ID(); ?> –>
<div id="nav-below" class="navigation">
</div><!– #nav-below –>
</div><!– #content –>
</div><!– #container –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
No entanto irão existir diferenças bastante notáveis. Começando com as funções the_post() e comments_template().
Iremos chamar a função the_post() perto do topo de nossa página logo após a abertura da “div content” e antes da navegação. Não iremos necessitar de um ciclo neste template, uma vez que o WordPress sabe qual a postagem que estamos procurando através da função the_permalink().
E tendo em consideração que este é um single post, iremos necessitar também da função comments_template(). E porque iremos separar nossos comentários dos trackbacks quando programarmos nosso ficheiro comments.php, iremos necessitar do seguinte código:
<?php comments_template('', true); ?>
A função comments_template() deverá ficar antes de encerrarmos nossa div #content logo depois da navegação.
NAVEGAÇÃO DO SINGLE POST
Ao invés de usarmos as funções next_posts_link() e previous_posts_link() iremos usar as funções previous_post_link() e next_post_link(). Elas fazem precisamente aquilo que você está pensando que fazem.
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">«</span> %title' ) ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">»</span>' ) ?></div>
</div><!– #nav-above –>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">«</span> %title' ) ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">»</span>' ) ?></div>
</div><!– #nav-below –>
TÍTULO DO SINGLE POST
Se por ventura se lembrar de nossa aula de programação do ficheiro header.php, nós usámos uma declaração IF para termos caminho livre para definirmos o título de nossos Single Posts. Para tirarmos vantagem disso neste template e em todos os templates de páginas que iremos criar, vamos envolver nosso título em tags h1.
<h1 class="entry-title"><?php the_title(); ?></h1>
Você provavelmente reparou que o código de nossos títulos é também ele muito simples. Isso é o benefício de não termos de linkar para nada ainda.
LINKS ÚTEIS DE ENTRADA DO SINGLE POST
Os links úteis de entrada são…complicados. Antes de darmos uma vista de olhos no código, deveremos começar por pensar porque razão são complicados. Por causa da forma como os comentários funcionam no WordPress iremos necessitar de ter em conta diversos cenários: comentários e trackbacks ligados; apenas os trackbacks ligados; apenas os comentários ligados; comentários e trackbacks encerrados. E isso significa…uma verdadeira confusão de declarações IF.
O código está documentado mas lembre-se de olhar para os blocos de declarações IF e ELSEIF e certamente que não será complicado para si compreendê-lo.
Da mesma forma, desejamos mostrar o link permanente de nossa postagem aqui para propósitos de bookmarking e também o RSS Feed para esta postagem singular (single post) — ideal para seus usuários seguirem conversas específicas.
<div class="entry-utility">
<?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feed for this post</a>.', 'seu-template' ),
get_the_category_list(', '),
get_the_tag_list( __( ' and tagged ', 'seu-template' ), ', ', '' ),
get_permalink(),
the_title_attribute('echo=0'),
comments_rss() ) ?>
<?php if ( ('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Comments and trackbacks open ?>
<?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'seu-template' ), get_trackback_url() ) ?>
<?php elseif ( !('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Only trackbacks open ?>
<?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'seu-template' ), get_trackback_url() ) ?>
<?php elseif ( ('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Only comments open ?>
<?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'seu-template' ) ?>
<?php elseif ( !('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Comments and trackbacks closed ?>
<?php _e( 'Both comments and trackbacks are currently closed.', 'seu-template' ) ?>
<?php endif; ?>
<?php edit_post_link( __( 'Edit', 'seu-template' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>
</div><!– .entry-utility –>
Não foi assim tão difícil, foi?
CONTEÚDO DO SINGLE POST
Ao contrário do que acontece com o ficheiro index.php, o conteúdo do seu ficheiro single.php é muito simples de obter. Apenas necessitamos de chamar uma função seguida da função wp_link_pages().
<?php the_content(); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
ANEXOS DA POSTAGEM
Nem todos os blogueiros usam os anexos de postagem, mas eles são na verdade muito interessantes. Quando você adiciona uma imagem a um artigo seu, você está na verdade a anexá-la ao seu artigo. E, obviamente, você pode anexar muito mais do que apenas imagens. Iremos agora criar um template attachment.php, mas se você desejar, poderá customizá-lo para suportar vídeos, audio, e aplicações, criando os templates video.php, audio.php, e application.php por exemplo. Existem muitas formas de você levar sua criatividade a seus anexos com WordPress.
A forma mais rápida de procedermos aqui é copiando o seu ficheiro single.php, renomeá-lo de attachment.php, e realizando as seguintes alterações.
Primeiro que tudo, elimine a navegação de topo. Não iremos necessitar dela. Substitua-a pelo título da página que linka diretamente para o seu artigo parente.
<h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf( __( 'Return to %s', 'seu-template' ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span class="meta-nav">« </span><?php echo get_the_title($post->post_parent) ?></a></h1>
Agora que nosso título de página está envolvido em tags h1, isso significa que o título de nossa postagem deverá estar envolvido em tags h2.
<h2 class="entry-title"><?php the_title(); ?></h2>
Agora, porque o nosso template de anexos precisa mesmo de mostrar esses anexos, nosso conteúdo deverá reflectir isso mesmo. E dado que a maioria dos anexos serão imagens, teremos de verificar isso e garantir que usamos uma declaração IF para esse cenário.
<div class="entry-content">
<div class="entry-attachment">
<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?>
<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a>
</p>
<?php else : ?>
<a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>
<?php endif; ?>
</div>
<div class="entry-caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt() ?></div>
<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'seu-template' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'seu-template' ) . '&after=</div>') ?>
</div><!– .entry-content –>
Elimine a navegação do fundo que se encontrava no código que você copiou de seu ficheiro single.php, e seu template attachment.php está pronto!
O TEMPLATE DE ERRO 404
O erro 404 é o código de servidor para “Não consigo encontrar essa página” e é algo que você não deverá descurar em seu template WordPress. O que acontece quando um link para o seu blog foi mal copiado e envia usuários para uma página que não existe em seu blog? Isso dá origem a um erro 404. Existem formas muito criativas de lidar com páginas de erro 404. Se desejar apimentar sua página, veja essas incríveis 45 páginas de erro 404 incríveis e criativas.
Felizmente, o WordPress tem um template para gerir esse erro também. Ele chama-se 404.php. A técnica que usamos em templates de páginas de erro 404 é muito simples e funcional. Ela simplesmente pede desculpa e deixa uma caixa de pesquisa para seus usuários poderem procurar por conteúdo em seu blog. Se desejar um pouco mais de criatividade, veja o exemplo que deixámos em cima.
Agora volte para o seu template dos templates, elimine a navegação e adicione algo como isto ao conteúdo.
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'seu-template' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'seu-template' ); ?></p>
<?php get_search_form(); ?>
</div><!– .entry-content –>
</div><!– #post-0 –>
ESTÁ ACOMPANHANDO? TEM DÚVIDAS?
Este sexto artigo teve como base a programação de nossos templates para páginas específicas 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á!
