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 CABEÇALHO (HEADER.PHP) DO TEMPLATE WORDPRESS
Nesta lição iremos abordar a construção de nosso ficheiro header.php e encontrar a forma correta de validar nosso template com um Doctype HTML. Esta lição está recheada de código PHP mas não se assuste que iremos explicar tudo passo-a-passo para que possa compreender todas as funcionalidades. Iremos introduzir também dois truques de otimização para buscadores ao mesmo tempo que vamos procurando construir e melhor nosso ficheiro functions.php.
A SECÇÃO “HEAD”
Neste momento seu template WordPress em branco é inválido. Isso acontece porque ele não tem um Doctype definido, dizendo ao browser como interpretar o HTML que ele está lendo. Iremos usar um XHTML Transitional Doctype para validar nosso template. Existem outras opções disponíveis, mas um XHTML transitional é certamente o melhor para um template WordPress.
Abra seu ficheiro header.php criado na lição anterior e cole lá dentro o seguinte código, antes de todo o código que já lá se encontra.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Vamos adicionar também alguns atributos à nossa tag HTML que irão tornar o nosso tipo de página mais aparente e concreto para os browsers. Troque a tag <html> no seu ficheiro header.php com a seguinte linha de código.
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
Agora vamos avançar para dentro da nossa secção <head> de nosso template WordPress. A secção <head> contém a meta-informação sobre nossa página web. Informação típica como o título do documento que se consegue ver e ler no cabeçalho de nosso browser (e nos resultados de buscadores), e ainda links para folhas de estilos e RSS feeds.
Mas primeiro abra seu ficheiro functions.php. Vamos-lhe adicionar uma função para nos ajudar em alguns aspectos, especialmente quando estivermos para criar nosso título de documento. Ela vai-nos dar um número de página que poderemos adicionar ao título.
Inicie seu ficheiro functions.php com:
<?php
e 2 linhas abaixo (gostamos de deixar algumas linhas de separação nas funções) cole as seguintes 2 funções PHP:
// Tornar o template disponível para tradução
// A tradução pode ser feita em /languages/
load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' );
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable($locale_file) )
require_once($locale_file);
// Puxar o número de página
function get_page_number() {
if ( get_query_var('paged') ) {
print ' | ' . __( 'Page ' , 'seu-template') . get_query_var('paged');
}
} // end get_page_number
A primeira função diz ao WordPress que queremos que nosso template esteja disponível para tradução e que os ficheiros de tradução podem ser encontrados na diretoria do template, na pasta “languages”. Se você vai criar um template WordPress, é importante que você torne seu template aberto a traduções. Você nunca sabe quando é que alguém irá necessitar de traduzir seu template para outra linguagem.
Na nossa função seguinte, get_the_page_number(), você irá ver algum texto que pode ser traduzido. Algo deste género:
__( 'Page ' , 'your-theme')
O texto preparado para tradução é o “Page “ seguido do nome de diretório do nosso template; neste caso, “seu-template”. Esta opção de tradução é relativamente simples de implementar, mas existem muitas outras formas de o fazer. Iremos analisar isso mais à frente nesta série de artigos.
Consegue adivinhar o que a função get_page_number() está ali fazendo? Se você analisar bem essa função, você irá perceber que estamos a usar um “if” para verificar se estamos numa página numerada ou não. Isso acontece quando clicamos em “older posts” ou postagens mais antigas, em templates WordPress. Se estivermos numa página numerada, esta função mostra uma barra separadora e o número de página.
Se você está começando a tentar compreender PHP pelas primeiras vezes, então queremos chamá-lo à atenção para um outro aspecto importante. Tudo aquilo que está depois do duplo travessão “//” é ignorado no código e usado apenas como comentário, ou seja, usando dois travessões desse tipo, você pode deixar imensos comentários em seu código para perceber o que está programando e o que faz cada função. Você irá ver isso muitas vezes.
Bem, voltando à nossa secção <head> de nosso ficheiro header.php. Troque as tags <head></head> pelo seguinte código:
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
Neste código realizamos uma série de tarefas, nomeadamente meta-informação sobre o conteúdo de nossa página, seguido de um link para a nossa folha de estilos, depois uma chamada de um script para usarmos comentários em forma de árvore quando criarmos o nosso sistemas de comentários, um truque para plugins e outras coisas relacionadas com o WordPress e por fim um link para nossos RSS feeds e pingbacks.
Incluímos também uma title tag otimizada para motores de busca que mostra apenas o título da postagem em postagens simples e páginas.
A SECÇÃO “HEADER”
Agora iremos acrescentar informação sobre o título de nosso blog, que irá funcionar como um link para a nossa homepage, uma descrição de nosso blog, e por fim um menu.
No ficheiro header.php desça até à div #branding. É aqui que iremos acrescentar nosso título e descrição do blog. Mas iremos fazer algo um pouco diferente da maioria dos templates wordpress.
Você encontra em muitos templates wordpress código que diz aos buscadores que o mais importante de tudo é o título do blog em cada uma das páginas e postagens desse mesmo blog. Essas templates fazem isso usando tags h1; uma tag que diz “isto é o que esta página tem de importante”. No entanto, aquilo que é mais importante nesta página de nosso blog, por exemplo, não é “Escola WordPress” mas sim “Como criar um Template WordPress – Parte IV”. Esta é a razão desta postagem e o que ela realmente trata.
Iremos usar as tags condicionais do WordPress e algum código HTML para criar nosso título e descrição do blog, com o intuito de fazermos aquilo que são as boas práticas. Vejamos então como esse código se apresenta:
<div id="branding">
<div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
<h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>
<?php } else { ?>
<div id="blog-description"><?php bloginfo( 'description' ) ?></div>
<?php } ?>
</div><!– #branding –>
Portanto, o texto âncora do título de nosso blog é definido usando uma tag div. A descrição de nosso blog é criada usando uma declaração “if” em PHP e algumas tags condicionais do WordPress.
Para iniciantes, esta é uma boa altura para olhar um pouco para trás e tentar compreender como as coisas estão sendo criadas e funcionando. No código anterior, estamos usando uma tag WordPress chamada bloginfo(). Poderá ver que a estamos usando para puxar o URL de nosso blog WordPress, o nome de nosso blog, e a descrição do mesmo. Ele puxa essa informação e a mostra em seu template. Compreendendo isto, você compreende todos os templates WordPress. Nós pegamos uma estrutura HTML e chamamos uma tag WordPress com PHP para realizar essa tarefa. Simples. É tudo uma questão de você se habituar a ver tags de templates WordPress juntamente com declarações “if” e alguns ciclos de PHP.
Agora desça para sua div #access. Iremos colocar um link para pular para que os usuários não tenha de estar visualizando o nosso menu ou cabeçalho e possam pular diretamente para os conteúdos.
<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'seu-template' ) ?>"><?php _e( 'Skip to content', 'seu-template' ) ?></a></div>
e iremos adicionar o nosso menu de página, usando apenas uma tag wordpress, com apenas 1 argumento:
<?php wp_page_menu( 'sort_column=menu_order' ); ?>
Fácil, correto? Portanto, sua div #access deverá parecer-se com isto:
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'seu-template' ) ?>"><?php _e( 'Skip to content', 'seu-template' ) ?></a></div>
<?php wp_page_menu( 'sort_column=menu_order' ); ?>
</div><!– #access –>
Está feito! O seu template de cabeçalho WordPress está programado e otimizado corretamente para buscadores!
ESTÁ ACOMPANHANDO? TEM DÚVIDAS?
Este quarto artigo teve como base a programação de nosso cabeçalho header.php e sua devida otimização para buscadores. 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á!
