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 FICHEIRO DE PESQUISA E DE PÁGINA ESTÁTICA
Os ficheiros de pesquisa e de páginas estáticas são fundamentais em qualquer Template WordPress. E o melhor de tudo é que são ambos bastante simples de programar. Para ambos estes Templates iremos começar de novo usando novo template para templates (pode ir buscá-lo a nosso artigo da parte 6).
<?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(); ?>
Mas obviamente, cada um dos ficheiros irá tomar um caminho diferente.
O TEMPLATE DE PESQUISA
No ficheiro search.php iremos reintroduzir o ciclo novamente no nosso Template. Desta vez com uma declaração IF — para o caso de não termos nenhuma postagem para puxar a partir do ciclo.
Vejamos como este ficheiro irá trabalhar: Se tivermos artigos (IF), ou por outras palavras, se existem artigos que correspondem ao termo pesquisado, então corremos o ciclo, algo parecido com o que acontece no index.php, mas se não tivermos artigos (IF) para correr o ciclo, ou, se não tivermos artigos que correspondam aos termos pesquisados, iremos dar a possibilidade ao usuário de voltar a pesquisar novamente.
Em termos de código, será algo deste tipo:
<?php get_header(); ?> <div id="container"> <div id="content"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post() ?> <!– this is our loop –> <?php endwhile; ?> <?php else : ?> <!– aqui iremos colocar uma caixa de pesquisa caso não existam artigos –> <?php endif; ?> </div><!– #content –> </div><!– #container –> <?php get_sidebar(); ?> <?php get_footer(); ?>
Muito simples e direto, certo? Praticamente.
Gostamos de colocar todos os ficheiros indexáveis mais ou menos com a mesma estrutura: Título do Artigo, Meta, Conteúdo (ou excerto), Links Úteis. Mas quando o WordPress pesquisa por artigos ele também pesquisa por Páginas, que não necessitam de informações de meta ou links úteis. Portanto, no nosso ciclo, iremos verificar se estamos a lidar com um artigo ou uma página.
<?php if ( $post->post_type == 'post' ) { ?>
<?php } ?>
Envolva o código nessa declaração IF e ele apenas mostrará conteúdo se estivermos a lidar com um artigo. Agora que já compreendemos como tudo funciona, aqui está a div #content do nosso template de pesquisa:
<?php if ( have_posts() ) : ?>
<h1 class="page-title"><?php _e( 'Search Results for: ', 'seu-template' ); ?><span><?php the_search_query(); ?></span></h1>
<?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', 'seu-template' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'seu-template' )) ?></div>
</div><!– #nav-above –>
<?php } ?>
<?php while ( have_posts() ) : the_post() ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<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 if ( $post->post_type == 'post' ) { ?>
<div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By ', 'seu-template'); ?></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', 'seu-template' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'seu-template'); ?></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', 'seu-template' ), "<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 } ?>
<div class="entry-summary">
<?php the_excerpt( __( '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-summary –>
<?php if ( $post->post_type == 'post' ) { ?>
<div class="entry-utility">
<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'seu-template' ); ?></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 ', 'seu-template' ) . '</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', 'seu-template' ), __( '1 Comment', 'seu-template' ), __( '% Comments', 'seu-template' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'seu-template' ), "<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 –>
<?php } ?>
</div><!– #post-<?php the_ID(); ?> –>
<?php endwhile; ?>
<?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', 'seu-template' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'seu-template' )) ?></div>
</div><!– #nav-below –>
<?php } ?>
<?php else : ?>
<div id="post-0" class="post no-results not-found">
<h2 class="entry-title"><?php _e( 'Nothing Found', 'seu-template' ) ?></h2>
<div class="entry-content">
<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'your-theme' ); ?></p>
<?php get_search_form(); ?>
</div><!– .entry-content –>
</div>
<?php endif; ?>
O TEMPLATE DE PÁGINA
Você certamente sabe para que serve um template de página. O WordPress olha para ele como um artigo não organizado de forma cronológica. E nós pensamos nele como uma página, simples. Mas maioritariamente, é definido pelas coisas que não tem: todas as tralhas e panóplias que um artigo normalmente tem (links úteis, meta, etc.).
Exceptuando os comentários. Por vezes certas páginas têm comentários. Nós não gostamos de comentários em páginas. Se quiser colocar comentários numa página, pode adicionar um campo personalizado (custom field) com nome e valor “comments”. Muito simples mesmo.
Eis o que você precisa para criar um template de página perfeito:
<?php get_header(); ?>
<div id="container">
<div id="content">
<?php the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'seu-template' ) . '&after=</div>') ?>
<?php edit_post_link( __( 'Edit', 'seu-template' ), '<span class="edit-link">', '</span>' ) ?>
</div><!– .entry-content –>
</div><!– #post-<?php the_ID(); ?> –>
<?php if ( get_post_custom_values('comments') ) comments_template() // Adiciona um custom field com Nome e Valor "comments" para que possa usar comentários numa página ?>
</div><!– #content –>
</div><!– #container –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
ESTÁ ACOMPANHANDO? TEM DÚVIDAS?
Este sexto artigo teve como base a programação de nossos templates para pesquisa e páginas estáticas 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á!
