Como desenvolver um tema wordpress de A a Z

Parte 1
FERRAMENTAS DE DESENVOLVIMENTO

Antes de começar a construir nosso template WordPress, é necessário que tenhamos todas as nossas
ferramentas à mão. Neste primeiro artigo, iremos analisar e recomendar as melhores ferramentas para
construir um ambiente de trabalho e de testes do qual você ficará orgulhoso.

SERVIDOR DE TESTES LOCAIS: XAMP OU MAMP

A melhor forma de desenvolver seu novo template WordPress é fora da internet, a partir do seu próprio
computador. No entanto, para o fazer você precisa tornar seu computador num “servidor local”,
aproximando-o ao máximo a um servidor de internet (Apache, MySQL e PHP). Isto significa que você
poderá instalar o WordPress em seu próprio computador.

Instalar estes softwares de servidor pode ser uma tarefa relativamente complicada, mas felizmente
existem alguns softwares automáticos que realizam essas tarefas automaticamente por nós. Se você tiver
um computador com Windows, instale o XAMP. Se por ventura tiver um computador Mac instale o MAMP.

WORDPRESS

Obviamente, iremos necessitar de descarregar a última versão do WordPress e instalá-la corretamente em
nosso servidor de testes. Se instalou o XAMP e por ventura tiver dúvidas a instalar o WordPress
localmente, siga estas instruções. Se estiver a usar o MAMP siga estas instruções.

CONTEÚDO DE TESTES

A sua instalação do WordPress irá necessitar de conteúdo para testes. No seu painel de administração, vá
no menu Ferramentas > Importar e escolha a opção WordPress da listagem. Agora apenas iremos
necessitar de informação em formato WXR.

Eis algumas opções do mercado:

The Theme Development Checklist test data

The Sandbox Dummy Content

Obviamente que estas opções de conteúdo de testes têm os seus prós e contras. Obviamente que quanto
mais conteúdo você conseguir importar melhor. Dessa forma você garante que nenhuma das
funcionalidades é esquecida. Se desejar, poderá também criar o seu próprio conteúdo de testes. Quando
achar que está tudo OK, use a navegação por postagens para pesquisar através de cada um dos posts que
acabou de importar/criar. Verifique também os arquivos mensais e anuais, bem como os arquivos de
categoria. Se faltar alguma coisa, poderá sempre tentar adicionar.

UM EDITOR DE TEXTO

Você não necessita de nenhum software visualmente atrativo e com gráficos para criar um template
WordPress. Você precisa apenas de um Editor de Texto. Mas como em tudo na vida, uns são melhores que
os outros. Para Windows, você pode experimentar o Notepad++. É grátis e open-source. Para Mac,
recomendo vivamente o Text Wrangler que é o editor que uso, embora o Smultron seja muito bom
também. Se necessitar de um cliente de FTP de qualidade, tem à escolha entre o FileZilla e o Cyberduck.

FIREFOX

Obviamente, você pode usar qualquer browser para desenvolvimento web, mas aquele que
recomendamos vivamente é sem dúvida o Firefox. Especial com dois plugins que tornam a sua vida bem
mais fácil quando se pretende desenvolver templates WordPress. O plugin Web Developer adiciona uma
toolbar que lhe oferece uma série de funcionalidades para inspeccionar e remover erros de código do seu
template, desde desabilitar todos os estilos CSS à validação local do HTML. O plugin Firebug é também ele
indispensável. Com o Firebug ligado você pode clicar em qualquer elemento da janela de seu browser e ver
como ele se parece ao nível de código fonte e a forma como está sendo afectado pelo CSS.

HTML E CSS

Se você dominar relativamente bem ou pelo menos tiver conhecimentos de HTML e CSS, tanto melhor.
Recomendo-lhe também a leitura deste tutorial para aprender HTML5. Embora o Tutorial não lhe ensine
tudo aquilo que irá precisar, tanto a nível de HTML como de CSS, é sempre uma boa primeira abordagem

PHP

Relativamente ao PHP, é também ele importante no desenvolvimento de um template wordpress. No
entanto iremos criando a nossa série de artigos de forma didática para que não tenha qualquer tipo de
problema no desenvolvimento de seu template WordPress. Para conseguir realizar esta série de artigos
com eficiência, você apenas necessita do básico do PHP, embora estejamos cá para ajudá-lo em tudo o que
for necessário.

Parte 2
CRIANDO A ESTRUTURA HTML DO TEMPLATE WORDPRESS

A estrutura HTML do seu Template WordPress é fundamental para o trabalho que iremos desenvolver ao
longo das próximas sessões. Tendo em conta que consideramos que já tem o seu ambiente de trabalho
criado e pronto a trabalhar, vamos iniciar-nos no desenvolvimento da estrutura HTML do Template
WordPress.

OS OBJETIVOS DE QUALQUER ESTRUTURA HTML

Quando você pretende criar/codar um determinado website você deverá ter em mente 2 objetivos: pouco
código e código significativo. Isso é, usando o mínimo de marcações (HTML tags) possível e ao mesmo
tempo ter a certeza de que essas marcações são significativas, usando classes semânticas e nomes de ID
que apontam para o conteúdo (class=”widget-area” ao invés de class=”sidebar-left”).

Agora, quando iniciarmos a programação do Template WordPress (ou qualquer outro template para outro
CMS) é necessário existir um equilíbrio entre pouco código, com muito pouca estrutura, incluindo
elementos div desnecessários, e código que seja significativo e importante.

Você provavelmente já viu a tag div no passado se por ventura olhou para o código de um site ou de um
template WordPress. Pense nelas como recipientes para o código HTML — recipientes que são fáceis de
manusear para manipular código HTML com CSS. Obviamente, iremos ter algumas também. Mas não
queremos muitas ou que não façam sentido. E queremos estrutura suficiente — usando a tag div — de
forma a podermos reutilizar o nosso código para múltiplos blogs e layouts. Nós queremos programar algo
que nos possa ser útil no futuro também.

ESTRUTURA HTML PARA O SEU TEMPLATE WORDPRESS

Vamos dar uma vista de olhos à estrutura HTML que iremos utilizar para o corpo (body) do nosso Template
WordPress.

<html>

<head>

</head>

<body>

<div id="wrapper" class="hfeed">

<div id="header">

<div id="masthead">

<div id="branding"> </div>

<!– #branding –>

<div id="access"> </div>

<!– #access –>

</div>

<!– #masthead –>

</div>

<!– #header –>

<div id="main">

<div id="container">

<div id="content"> </div>

<!– #content –>

</div>

<!– #container –>

<div id="primary" class="widget-area"> </div>

<!– #primary .widget-area –>

<div id="secondary" class="widget-area"> </div>

<!– #secondary –>

</div>

<!– #main –>

<div id="footer">

<div id="colophon">

<div id="site-info"> </div>

<!– #site-info –>

</div>

<!– #colophon –>

</div>

<!– #footer –>

</div>

<!– #wrapper –>

</body>

</html>

Copie e cole este código para o seu editor de texto e guarde-o num local seguro e onde saiba que o volta a
encontrar. Iremos utilizá-lo mais tarde quando construir o ficheiro de estrutura do nosso Template
WordPress. Mas antes de o fazermos, existem algumas coisas importantes a analisar primeiro.

UM PEQUENO GUIA SOBRE O HTML DO SEU TEMPLATE WORDPRESS

Primeiro, o atributo de classe no wrapper (invólucro) intitulado hfeed. A classe hfeed faz parte do esquema
de microformato. Em linguagem simples, isto significa que adicionando a classe hfeed à nossa página, ela
irá dizer a qualquer máquina que leia o nosso site (como por exemplo os robots dos motores de busca ou
outros serviços) que o nosso site publica conteúdo sindicado, como por exemplo artigos/postagens. Você
irá ver uma série de classes deste género à medida que formos avançando.

Na área central do nosso HTML irá reparar que temos duas áreas para widgets que surgem depois da nossa
área de conteúdos. E provavelmente também reparou que o nosso conteúdo está envolvido numa div
container (invólucro). Estes pontos são chave. Isto faz com que o nosso conteúdo seja carregado antes das
barras laterais aos olhos dos motores de busca (e dos leitores) mas usando uma técnica de CSS com
margens negativas poderemos tornar este template num template de 1, 2, ou 3 colunas com pouco código
CSS. Interessante?

Esta estrutura HTML poderá ser utilizada para os seus Templates WordPress futuros e dá-lhe a
oportunidade de criar coisas bem interessantes com CSS.

Parte 3
ESTRUTURA DO TEMPLATE E DIRETÓRIO

Enquanto a grande maioria dos templates minimalistas para WordPress apenas necessitam de um ficheiro
index.php e um ficheiro style.css, a grande maioria dos Templates WordPress necessitam de algo um
pouco mais sólido.

O nosso template minimalista irá incluir um total de 6 ficheiros. Comece por criar uma pasta do tipo wp-
content/themes/ para o seu template — neste tutorial iremos utilizar a nomenclatura “seu-template” mas
ele pode tomar o nome que você desejar — e crie também os seguintes ficheiros no seu diretório (não se
preocupe que eles ficarão em branco até aos próximos passos).

• index.php

• header.php

• sidebar.php

• footer.php

• functions.php

• style.css

Agora, vamos abrir o último ficheiro que criámos, o style.css, num editor de texto. A primeira coisa que
necessitamos fazer é adicionar uma secção no topo do ficheiro na qual iremos colocar os comentários do
CSS (algo do tipo: /* e */). É aqui que necessitamos de colocar a informação que diz ao WordPress onde
está seu ficheiro de estilos do seu template. Sem isso, seu template também não irá aparecer no painel de
administração do seu blog WordPress.

/*

Theme Name: Seu Template

Theme URI: http://exemplo.com/exemplo/

Description: Um Template WordPress otimizado para buscadores.

Author: Escola WordPress

Author URI: http://www.escolawp.com/

Version: 1.0

Tags: separadas por vírgulas para identificar seu template

.

Your theme can be your copyrighted work.

Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.

*/

Algo a notar: uma grande parte disto é opcional. Sério, você precisa apenas do nome do Template. Mas se
alguma vez tiver como intenção lançar seu template ao público, ou está a desenvolver um template para
alguém, você provavelmente irá desejar ter toda a informação. Assim que tiver isso realizado, poderá
ativar seu template e começar a correr a versão de testes. E tcharam, um template branquinho! Agora é
que as coisas vão começar a aquecer!

CONSTRUINDO A SUA ESTRUTURA HTML

Agora é a altura em que vamos utilizar a nossa estrutura HTML criada na segunda parte deste tutorial. Mas
primeiro uma mini-lição sobre WordPress e Templates. O WordPress necessita apenas de 1 ficheiro de
template, o index.php. Nós podemos, e iremos adicionar uma série de templates que podem ser usadas
além do index.php em determinadas situações (artigos singulares, páginas de categorias, etc.), mas no
início, o index.php é tudo o que precisamos.

Agora, o index.php e todas as suas irmãs e irmãos (que iremos usar também) criam as páginas que vemos
em nosso browser. Estes são ficheiros com HTML e PHP mas no final de contas servem para criar páginas
visuais.

Vamos imaginar as páginas web como histórias, algo com um princípio, um meio, e um fim. Quando
escrevemos o nosso ficheiro index.php (e mais tarde o single.php, category.php, etc.) iremos concentrar-
nos apenas no meio. Mas! Iremos chamá-lo tanto no princípio como no fim. É provável que estejamos
constantemente refazendo o nosso meio mas ao mesmo tempo estaremos criando o princípio e fim em
simultâneo.

HEADER.PHP E FOOTER.PHP

Agarre na estrutura HTML que construímos na aula anterior e copie tudo incluindo a div <div id="main">
no seu header.php e guarde-o. No final deverá ficar algo deste tipo:

<html>

<head>

</head>

<body>


<div id="header">

<div id="masthead">

<div id="branding"> </div>

<!– #branding –>

<div id="access"> </div>

<!– #access –>

</div>

<!– #masthead –>

</div>

<!– #header –>

<div id="main">

Agora, copie tudo o que está depois, incluindo a div </div> para o seu ficheiro footer.php. Ele
deverá ficar algo deste género:

</div>

<!– #main –>

<div id="footer">

<div id="colophon">

<div id="site-info"> </div>

<!– #site-info –>

</div>

<!– #colophon –>

</div>

<!– #footer –>

</div>

<!– #wrapper –>

</body></html>

INDEX.PHP

Aposto que entretanto já sabe o que vamos fazer de seguida. Copie toda a estrutura HTML do meio onde
está incluída a div #main para o seu ficheiro index.php. Ele deverá ficar algo deste género:

<div id="content"> </div>

<!– #content –>

</div>

<!– #container –>

<div id="primary" class="widget-area"> </div>

<!– #primary .widget-area –>

<div id="secondary" class="widget-area"> </div>

<!– #secondary –>

Com apenas duas adições pequenas teremos um Template WordPress perfeitamente inválido mas estamos
certamente no bom caminho. Temos também de chamar o cabeçalho (header.php) e o rodapé
(footer.php) no nosso template.

No topo do ficheiro index.php, antes de todo o código lá existente, adiciona a seguinte tag de template.

<?php get_header(); ?>

Parece-nos perfeitamente óbvio o que esta tag faz. Ela puxa e carrega o cabeçalho do site. Mas já que
estamos aqui, aproveite para olhar melhor para esta tag PHP. Gostava que percebesse algumas coisas.
Primeiro, a nossa função PHP é a chamada — get_header()— e começa com <?php e termina com ?>.
Segundo, embora a nossa chamada seja muito curta (apenas uma linha) ela termina com um ponto e
vírgula. Pequeno, mas muito importante.

Quer adivinhar qual a função que vamos colocar agora no fundo do nosso ficheiro index.php?

<?php get_footer(); ?>

Isso mesmo! Agora temos o nosso ficheiro principal que o WordPress estava procurando, o nosso
index.php. Ele contém todos miolos do meio, e também um princípio e um fim. Recarregue sua página no
browser e verifique o código fonte (Ver > Código-Fonte da Página, no Firefox). Aí está o seu código!

Estamos cada vez mais próximos de criar nosso Template WordPress! Fique connosco e participe!

Parte 4
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);

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>


</div><!– #access –>

Está feito! O seu template de cabeçalho WordPress está programado e otimizado corretamente para
buscadores!

Parte 5
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 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>


<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 /* 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 */ ?>


<?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-dTH:i:sO') ?>"><?php
the_time( get_option( 'date_format' ) ); ?></abbr></span>

<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class="meta-
sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?>

</div><!– .entry-meta –>

<?php /* O conteúdo da postagem */ ?>





<?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>


<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-
links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>ntttttt<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>

sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?>

</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 */ ?>


<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 */ ?>


<div id="nav-below" class="navigation">

posts', 'your-theme' )) ?></div>

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(); ?>

Parte 6
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.



<div id="content">







</div><!– #content –>

</div><!– #container –>



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 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 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>


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.


<?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' ), "nttttt<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 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.


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-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>')
?>


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>


<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><!– #post-0 –>

Parte 7
CONSTRUINDO O FICHEIRO COMMENTS.PHP

Qualquer desenvolvedor que se preze odeia programar o template de comentários do WordPress. Na
verdade ele poderá tornar-se uma verdadeira confusão. Na versão 2.7, o WordPress introduziu felizmente
uma forma mais fácil de criar templates para comentários — o que na verdade não foi grande ajuda se
você desejar separar seus comentários e trackbacks ou desejar introduzir algumas funcionalidades
customizadas. Continua sendo confuso.

Felizmente para você, tentámos recriar um template de forma mais fácil. Continua confuso, mas ainda
assim mais simples, presumo. Para este tutorial sobre o desenvolvimento do template de comentários,
vamos tentar guiá-lo sobre o que vai acontecer, mostrar-lhe algumas porções de código interessantes e
que você vai necessitar de adicionar ao ficheiro functions.php, e depois então apresentar o código
completo e final. Se tudo correr bem, no final fará sentido.

Vejamos o que irá acontecer neste template.

Prevenir o carregamento de páginas por robots

Verificar se há comentários

Contar o número de comentários e trackbacks (ou pings)

Se existirem comentários, mostrar esses comentários — com navegação para paginação de comentários

Se existirem trackbacks, mostrar os trackbacks

Se os comentários estiverem ligados, mostrar o formulário de “resposta”

Na verdade é muita coisa para um template só, mas penso que conseguiremos explicar-lhe como tudo isso
funciona.

CHAMANDO OS COMENTÁRIOS E TRACKBACKS DE FORMA CUSTOMIZADA

Agora, com o WordPress 2.7 foi lançada a função wp_list_comments() que apresenta uma lista
desordenada de comentários e trackbacks para os seus artigos (em árvore também). Pode ser conveniente
se você assim o desejar. Mas para nós não. Nós queremos comentários em árvore separados dos
trackbacks, e customizados à nossa maneira.

Para criar o código do template de comentários vamos dar-lhe algum trabalho. Você irá necessitar de criar
chamadas customizadas para a sua lista de Comentários e Trackbacks. Adicione as seguintes 2 funções ao
seu ficheiro functions.php.

// Chamada customizada de comentários

function custom_comments($comment, $args, $depth) {

$GLOBALS['comment'] = $comment;

$GLOBALS['comment_depth'] = $depth;

?>

<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>

<div class="comment-author vcard"><?php commenter_link() ?></div>

<div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span class="meta-
sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>', 'seu-template'),

get_comment_date(),

get_comment_time(),

'#comment-' . get_comment_ID() );

edit_comment_link(__('Edit', 'seu-template'), ' <span class="meta-sep">|</span> <span
class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e("ttttt<span class='unapproved'>Your
comment is awaiting moderation.</span>n", 'seu-template') ?>

<div class="comment-content">

<?php comment_text() ?>

</div>

<?php // echo the comment reply link

if($args['type'] == 'all' || get_comment_type() == 'comment') :

comment_reply_link(array_merge($args, array(

'reply_text' => __('Reply','seu-template'),

'login_text' => __('Log in to reply.','seu-template'),

'depth' => $depth,

'before' => '<div class="comment-reply-link">',

'after' => '</div>'

)));

endif;

?>

<?php } // end custom_comments

// Chamada customizada para listar trackbacks

function custom_pings($comment, $args, $depth) {


?>


<div class="comment-author"><?php printf(__('By %1$s on %2$s at %3$s', 'seu-template'),

get_comment_author_link(),

get_comment_date(),

get_comment_time() );

edit_comment_link(__('Edit', 'seu-template'), ' <span class="meta-sep">|</span> <span
class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e('ttttt<span class="unapproved">Your
trackback is awaiting moderation.</span>n', 'seu-template') ?>



</div>

<?php } // end custom_pings

Iremos necessitar também de uma função customizada que o custom_comments() está chamando. Esta
função irá fazer a marcação do gravatar que estamos a usar, mas que ele se enquadre no esquema de
microformato para hcard.

// Produz um avatar compatível com hCard

function commenter_link() {

$commenter = get_comment_author_link();

if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {

$commenter = ereg_replace( '(<a[^>]* class=['"]?)', '1url ' , $commenter );

} else {

$commenter = ereg_replace( '(<a )/', '1class="url "' , $commenter );

}

$avatar_email = get_comment_author_email();

$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );

echo $avatar . ' <span class="fn n">' . $commenter . '</span>';

} // end commenter_link

Se você pretende mudar a dimensão original do seu gravatar, troque o valor de 80 na função get_avatar(
$avatar_email, 80 ) ). O valor 80 é a dimensão em pixeis para o seu gravatar.

O TEMPLATE DE COMENTÁRIOS

Vejamos então o template de comentários com algums comentários PHP que o vão ajudar a compreender
melhor as funcionalidades presentes no template.

<?php /* O template de comentários! */ ?>

<div id="comments">

<?php /* Correr algumas verificações para robots artigos protegidos com password */ ?>

<?php

$req = get_option('require_name_email'); // Verifica se os campos são obrigatórios.

if ( 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']) )

die ( 'Please do not load this page directly. Thanks!' );

if ( ! empty($post->post_password) ) :

if ( $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password ) :

?>

<div class="nopassword"><?php _e('This post is password protected. Enter the password to view
any comments.', 'seu-template') ?></div>

</div><!– .comments –>

<?php

return;

endif;

endif;

?>

<?php /* Verificar se há comentários e fazer coisas! */ ?>

<?php if ( have_comments() ) : ?>

<?php /* Contar o número de comentários e trackbacks (ou pings) */

$ping_count = $comment_count = 0;

foreach ( $comments as $comment )

get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;

?>

<?php /* Se existire comentários, mostrar os comentários */ ?>

<?php if ( ! empty($comments_by_type['comment']) ) : ?>

<div id="comments-list" class="comments">

<h3><?php printf($comment_count > 1 ? __('<span>%d</span> Comments', 'seu-template') :
__('<span>One</span> Comment', 'seu-template'), $comment_count) ?></h3>

<?php /* Se existirem comentários suficientes, construir a paginação de comentários */ ?>

<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>

<div id="comments-nav-above" class="comments-navigation">

<div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>

</div><!– #comments-nav-above –>

<?php endif; ?>

<?php /* Uma lista ordenada de comentários, custom_comments(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=comment&callback=custom_comments'); ?>

</ol>

<?php /* Se existirem comentários suficientes, construir a navegação */ ?>


<div id="comments-nav-below" class="comments-navigation">

<div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>

</div><!– #comments-nav-below –>

<?php endif; ?>

</div><!– #comments-list .comments –>

<?php endif; /* if ( $comment_count ) */ ?>

<?php /* Se existirem trackbacks(pings), mostrar os trackbacks */ ?>

<?php if ( ! empty($comments_by_type['pings']) ) : ?>

<div id="trackbacks-list" class="comments">

<h3><?php printf($ping_count > 1 ? __('<span>%d</span> Trackbacks', 'seu-template') :
__('<span>One</span> Trackback', 'seu-template'), $ping_count) ?></h3>

<?php /* Uma lista ordenada de trackbacks, custom_pings(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=pings&callback=custom_pings'); ?>

</ol>

</div><!– #trackbacks-list .comments –>

<?php endif /* if ( $ping_count ) */ ?>

<?php endif /* if ( $comments ) */ ?>

<?php /* Se os comentários estiverem ligados, criar o formulário de resposta */ ?>

<?php if ( 'open' == $post->comment_status ) : ?>

<div id="respond">

<h3><?php comment_form_title( __('Post a Comment', 'seu-template'), __('Post a Reply to %s',
'your-theme') ); ?></h3>

<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>

<p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged in</a> to post
a comment.', 'seu-template'),

get_option('siteurl') . '/wp-login.php?redirect_to=' . get_permalink() ) ?></p>

<?php else : ?>

<div class="formcontainer">

<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"
method="post">

<?php if ( $user_ID ) : ?>

<p id="login"><?php printf(__('<span class="loggedin">Logged in as <a href="%1$s" title="Logged
in as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s" title="Log out of this account">Log
out?</a></span>', 'seu-template'),

get_option('siteurl') . '/wp-admin/profile.php',

wp_specialchars($user_identity, true),

wp_logout_url(get_permalink()) ) ?></p>

<?php else : ?>

<p id="comment-notes"><?php _e('Your email is <em>never</em> published nor shared.', 'your-
theme') ?> <?php if ($req) _e('Required fields are marked <span class="required">*</span>', 'seu-
template') ?></p>

<div id="form-section-author" class="form-section">

<div class="form-label"><label for="author"><?php _e('Name', 'seu-template') ?></label> <?php
if ($req) _e('<span class="required">*</span>', 'seu-template') ?></div>

<div class="form-input"><input id="author" name="author" type="text" value="<?php echo
$comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>

</div><!– #form-section-author .form-section –>

<div id="form-section-email" class="form-section">

<div class="form-label"><label for="email"><?php _e('Email', 'seu-template') ?></label> <?php if
($req) _e('<span class="required">*</span>', 'seu-template') ?></div>

<div class="form-input"><input id="email" name="email" type="text" value="<?php echo
$comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>

</div><!– #form-section-email .form-section –>

<div id="form-section-url" class="form-section">

<div class="form-label"><label for="url"><?php _e('Website', 'seu-template') ?></label></div>

<div class="form-input"><input id="url" name="url" type="text" value="<?php echo
$comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>

</div><!– #form-section-url .form-section –>

<?php endif /* if ( $user_ID ) */ ?>

<div id="form-section-comment" class="form-section">

<div class="form-label"><label for="comment"><?php _e('Comment', 'seu-template')
?></label></div>

<div class="form-textarea"><textarea id="comment" name="comment" cols="45" rows="8"
tabindex="6"></textarea></div>

</div><!– #form-section-comment .form-section –>

<div id="form-allowed-tags" class="form-section">

<p><span><?php _e('You may use these <abbr title="HyperText Markup
Language">HTML</abbr> tags and attributes:', 'seu-template') ?></span> <code><?php echo
allowed_tags(); ?></code></p>

</div>

<?php do_action('comment_form', $post->ID); ?>

<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php
_e('Post Comment', 'seu-template') ?>" tabindex="7" /><input type="hidden"
name="comment_post_ID" value="<?php echo $id; ?>" /></div>

<?php comment_id_fields(); ?>

<?php /* O código termina aqui. Está feito. Vamos encerrá-lo. */ ?>

</form><!– #commentform –>

</div><!– .formcontainer –>

<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>

</div><!– #respond –>

<?php endif /* if ( 'open' == $post->comment_status ) */ ?>

</div><!– #comments –>

E está feito! Acaba de criar o seu template de comentários com estilo e alguns pormenores bem
interessantes.

Parte 8
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).



<div id="content">











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:



<div id="content">

<?php if ( have_posts() ) : ?>


<!– this is our loop –>

<?php endwhile; ?>

<?php else : ?>

<!– aqui iremos colocar uma caixa de pesquisa caso não existam artigos –>

<?php endif; ?>





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:


<h1 class="page-title"><?php _e( 'Search Results for: ', 'seu-template' ); ?><span><?php
the_search_query(); ?></span></h1>



posts', 'seu-template' )) ?></div>

nav">»</span>', 'seu-template' )) ?></div>


<?php } ?>






<span class="meta-prep meta-prep-author"><?php _e('By ', 'seu-template'); ?></span>

$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-prep meta-prep-entry-date"><?php _e('Published ', 'seu-template'); ?></span>

<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-dTH:i:sO') ?>"><?php
the_time( get_option( 'date_format' ) ); ?></abbr></span>

<?php edit_post_link( __( 'Edit', 'seu-template' ), "<span class="meta-


<?php } ?>

<div class="entry-summary">

<?php the_excerpt( __( 'Continue reading <span class="meta-nav">»</span>', 'seu-template' ) ); ?>

?>

</div><!– .entry-summary –>



'Posted in ', 'seu-template' ); ?></span><?php echo get_the_category_list(', '); ?></span>


links">' . __('Tagged ', 'seu-template' ) . '</span>', ", ", "</span>ntttttt<span class="meta-

<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'seu-template' ),
__( '1 Comment', 'seu-template' ), __( '% Comments', 'seu-template' ) ) ?></span>



<?php } ?>


<?php endwhile; ?>






<?php } ?>

<?php else : ?>

<div id="post-0" class="post no-results not-found">

<h2 class="entry-title"><?php _e( 'Nothing Found', 'seu-template' ) ?></h2>


<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different
keywords.', 'your-theme' ); ?></p>



</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:



<div id="content">

<?php the_post(); ?>


?>

<?php edit_post_link( __( 'Edit', 'seu-template' ), '<span class="edit-link">', '</span>' ) ?>



<?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><!-- #container –>



Parte 9
CONSTRUINDO O FICHEIRO DE ARQUIVO, AUTOR, CATEGORIA E TAG

Tal como fizemos com o ficheiro index.php, vamos aproveitar o novo template dos templates e usá-lo para
construir os templates que nos faltam, nomeadamente o template de arquivo, autor, categoria e tag. O
nosso template mestre neste caso será o template de Arquivo.

O que o ficheiro archive.php faz (e todos os seus templates relacionados) é mostrar artigos baseados num
determinado critério. Um intervalo de datas, postagens por autor, uma categoria, ou uma tag. Portanto,
basicamente, é muito parecido com o ficheiro index.php. Vamos então começar novamente com o nosso
template dos templates (pode ir buscá-lo a nosso artigo da parte 6) que construímos num das lições
anteriores e começar a trabalhar em cima dele.



<div id="content">







O TEMPLATE DE ARQUIVO

Eis o esquema de um template de arquivo:

Chamar a função the_post()

Verificar que tipo de template é este

Produzir um template apropriado

Rebobinar as postagens com a função rewind_posts()

Correr o clico normal do WordPress

Eis então o conteúdo (#content) do seu ficheiro archive.php. Tome nota de que as Tags Condicionais que
se encontram no topo, servem para verificar que tipo de template estamos a usar.


<?php if ( is_day() ) : ?>

<h1 class="page-title"><?php printf( __( 'Daily Archives: <span>%s</span>', 'seu-template' ),
get_the_time(get_option('date_format')) ) ?></h1>

<?php elseif ( is_month() ) : ?>

<h1 class="page-title"><?php printf( __( 'Monthly Archives: <span>%s</span>', 'seu-template' ),
get_the_time('F Y') ) ?></h1>

<?php elseif ( is_year() ) : ?>

<h1 class="page-title"><?php printf( __( 'Yearly Archives: <span>%s</span>', 'seu-template' ),
get_the_time('Y') ) ?></h1>

<?php elseif ( isset($_GET['paged']) && !empty($_GET['paged']) ) : ?>

<h1 class="page-title"><?php _e( 'Blog Archives', 'seu-template' ) ?></h1>

<?php endif; ?>

<?php rewind_posts(); ?>






<?php } ?>

<?php while ( have_posts() ) : the_post(); ?>


<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to
%s', 'seu-template'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>


<span class="meta-prep meta-prep-author"><?php _e('By ', 'seu-template'); ?></span>

$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-prep meta-prep-entry-date"><?php _e('Published ', 'seu-template'); ?></span>

<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-dTH:i:sO')
?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>




<?php the_excerpt( __( 'Continue reading <span class="meta-nav">»</span>', 'seu-template' ) ); ?>

</div><!– .entry-summary –>





<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'seu-
template' ), __( '1 Comment', 'seu-template' ), __( '% Comments', 'seu-template' ) ) ?></span>




<?php endwhile; ?>






<?php } ?>

O TEMPLATE DE AUTOR

O seu template de autor não será muito diferente. Você certamente vai gostar deste. Copie o código do
ficheiro archive.php e atribua-lhe o nome author.php. A única coisa que necessita trocar é o título da
secção.

<h1 class="page-title author"><?php printf( __( 'Author Archives: <span class="vcard">%s</span>', 'seu-
template' ), "<a class='url fn n' href='$authordata->user_url' title='$authordata->display_name'
rel='me'>$authordata->display_name</a>" ) ?></h1>

<?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echo apply_filters(
'archive_meta', '<div class="archive-meta">' . $authordesc . '</div>' ); ?>

Simples, hein?

O TEMPLATE DE CATEGORIA

O template de categoria é outro template que pode ser criado facilmente a partir do template de arquivo.
Copie o código do ficheiro archive.php e atribua-lhe o nome category.php.

Agora abra o ficheiro functions.php. Iremos introduzir uma função customizada que irá tornar o nosso
template de categoria mais simples de usar.

// Retorna outras categorias excepto a atual (redundante)

function cats_meow($glue) {

$current_cat = single_cat_title( '', false );

$separator = "n";

$cats = explode( $separator, get_the_category_list($separator) );

foreach ( $cats as $i => $str ) {

if ( strstr( $str, ">$current_cat<" ) ) {

unset($cats[$i]);

break;

}

}

if ( empty($cats) )

return false;

return trim(join( $glue, $cats ));

} // end cats_meow

A nossa função customizada cats_meow() remove a categoria corrente das páginas de categorias. Por
outras palavras, ela simplesmente livra-se de categorias redundantes quando pretende apresentar uma
lista de categorias.

Agora, volte ao ficheiro category.php, e substitua a secção de título de página pelo seguinte código:

<h1 class="page-title"><?php _e( 'Category Archives:', 'seu-template' ) ?> <span><?php single_cat_title()
?></span></span></h1>

<?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters(
'archive_meta', '<div class="archive-meta">' . $categorydesc . '</div>' ); ?>

E na div “.entry-utility” troque:


com o seguinte código modificado:

<?php if ( $cats_meow = cats_meow(', ') ) : // Retorna categorias que não aquela pesquisada ?>

<span class="cat-links"><?php printf( __( 'Also posted in %s', 'seu-template' ), $cats_meow )
?></span>


<?php endif ?>

O TEMPLATE DE TAG

O template de tag é basicamente idêntico ao template de categoria, excepto no facto de ser para tags.
Você já sabe como fazer: copie o conteúdo do ficheiro archive.php e altere o nome para tag.php.

E temos novamente uma função customizad para incluir no ficheiro functions.php intitulada tag_ur_it(). Ela
funciona de forma parecida à função cats_meow() excepto o facto de que remove tags redundantes.

// Retorna outras tags excepto a atual (redundante)

function tag_ur_it($glue) {

$current_tag = single_tag_title( '', '', false );

$separator = "n";

$tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) );

foreach ( $tags as $i => $str ) {

if ( strstr( $str, ">$current_tag<" ) ) {

unset($tags[$i]);

break;

}

}

if ( empty($tags) )

return false;

return trim(join( $glue, $tags ));

} // end tag_ur_it

Agora, no ficheiro tag.php, substitua o título da página por:

<h1 class="page-title"><?php _e( 'Tag Archives:', 'seu-template' ) ?> <span><?php single_tag_title()
?></span></h1>

e na div “.entry-utility” substitua:


pela versão modificada:

<?php if ( $tag_ur_it = tag_ur_it(', ') ) : // Retorna tags excepto a pesquisada ?>

<span class="tag-links"><?php printf( __( 'Also tagged %s', 'seu-template' ), $tag_ur_it ) ?></span>

<?php endif; ?>

Está feito!

Parte 10
CONSTRUINDO A BARRA LATERAL (SIDEBAR.PHP)

Sabemos que você tem esperado pacientemente por este artigo. Toda a gente adora a barra lateral de um
Template WordPress. Mas para não variar, iremos criar uma barra lateral um pouco diferente do que é
habitual em Templates WordPress. A nossa vai ser melhor e mais funcional!

FUNÇÕES CUSTOMIZADAS NA BARRA LATERAL

Primeiro as coisas mais importantes. Criando uma barra lateral em WordPress, uma das primeiras coisas a
ter em consideração é que essa barra suporte widgets. A nossa barra lateral vai ter duas secções de
widgets. Desta forma poderemos adaptar mais facilmente o código a templates de 2-colunas ou 3-colunas.

Isto é bastante simples e direto. No nosso ficheiro functions.php vamos registrar as nossas áreas de
widgets com o seguinte código.

// Registrar áreas de widgets

function theme_widgets_init() {

// Área 1

register_sidebar( array (

'name' => 'Primary Widget Area',

'id' => 'primary_widget_area',

'before_widget' => '<li id="%1$s" class="widget-container %2$s">',

'after_widget' => "</li>",

'before_title' => '<h3 class="widget-title">',

'after_title' => '</h3>',

) );

// Área 2


'name' => 'Secondary Widget Area',

'id' => 'secondary_widget_area',





) );

} // end theme_widgets_init

add_action( 'init', 'theme_widgets_init' );

Agora temos duas áreas de widgets: A área de widget primária (Primary) e a área de widget secundária
(Secondary). Não existe interesse em estar a chamar-lhes barra lateral primária e barra lateral secundária.
Em alguns templates nem barra lateral existe, mas no entanto existem zonas compatíveis com widgets.

Agora, ainda no ficheiro functions.php iremos adicionar mais duas customizações super interessantes e
engraçadas.

Primeiro, vamos definir os widgets pré-definidos: A pesquisa, páginas, categorias, arquivos, links e meta.
Não iremos programar esses conteúdos manualmente no ficheiro sidebar.php. Iremos simplesmente dizer
ao WordPress para os adicionar como widgets automaticamente na nossa área de widgets através das
opções.

$preset_widgets = array (

'primary_widget_area' => array( 'search', 'pages', 'categories', 'archives' ),

'secondary_widget_area' => array( 'links', 'meta' )

);

if ( isset( $_GET['activated'] ) ) {

update_option( 'sidebars_widgets', $preset_widgets );

}

// update_option( 'sidebars_widgets', NULL );

Agora, na nossa área de widgets primária (primary_widget_area) temos então o widget de pesquisa, o
widget de páginas, o widget de categorias, e o widget de arquivos. A área de widgets secundária
(secondary_widget_area) tem os widgets para links e meta. Todos eles são carregados automaticamente
com o template através das opções.

Consegue ver o código // update_option( 'sidebars_widgets', NULL ); na última linha? Se por alguma razão
quiser zerar seus widgets, remova esse código. Como provavelmente perceberá, NULL significa sem
widgets.

Agora, iremos criar uma nova condicional que irá verificar se existem widgets em alguma das nossas áreas
de widgets. Isto será incrivelmente útil quando desenvolvemos a nossa barra lateral.

// Verificar widgets nas áreas de widgets

function is_sidebar_active( $index ){

global $wp_registered_sidebars;

$widgetcolums = wp_get_sidebars_widgets();

if ($widgetcolums[$index]) return true;

return false;

} // end is_sidebar_active

Agora temos de colocar estes códigos a funcionar corretamente.

PROGRAMANDO A BARRA LATERAL

Com as nossas áreas de widgets dinâmicas registradas e os nossos widgets pré-definidos, o nosso Template
da Barra Lateral será um dos mais simples que alguma vez viu. Mas lembre-se, iremos também envolver as
nossas barras laterais numa declaração IF usando a nossa condicional is_sidebar_active().

Eis então como o código irá se parecer:

<?php if ( is_sidebar_active('primary_widget_area') ) : ?>

<div id="primary" class="widget-area">

<ul class="xoxo">

<?php dynamic_sidebar('primary_widget_area'); ?>

</ul>

</div><!– #primary .widget-area –>

<?php endif; ?>

<?php if ( is_sidebar_active('secondary_widget_area') ) : ?>

<div id="secondary" class="widget-area">

<ul class="xoxo">

<?php dynamic_sidebar('secondary_widget_area'); ?>

</ul>

</div><!– #secondary .widget-area –>

<?php endif; ?>

Agora, se for na página de administração dos widgets e retirar todos os widgets das suas áreas de widget
irá verificar que a nossa condicional dá erro. Isso significa que terão de existir widgets nas áreas para que o
seu template funcione corretamente.

Essa a forma como gostamos que as coisas funcionem. Como reparou também, estamos muito pertinho do
final, portanto, fique atento que a nossa série está quase terminando!

Parte 11
COMO CRIAR O CSS DO TEMPLATE

A programação CSS pode ser bastante complicado, como também pode ser bastante simples. Uma das
melhores formas de conseguir aprender bem sobre CSS é pedindo ajuda a outros usuários que já dominem
a linguagem, bem como procurando tutoriais na internet que o ajudem a melhorar as suas competências
técnicas com a linguagem.

Para lhe facilitar um pouco o trabalho, trazemos até si um arsenal de folhas de estilo CSS para que possa
moldar corretamente o seu template às suas necessidades:

Uma folha de estilos que reinicia o CSS padrão em todos os web browsers e que cria um standard com o
qual podemos trabalhar mais facilmente

Uma folha de estilos que recria as nossas fundações tipográficas de uma forma simples

Uma folha de estilos apenas para as classes do WordPress

Uma série de 6 folhas de estilo que irão criar todos os layouts do blog ou site que você deseja.

Antes de começarmos com a estilização, você deverá criar uma diretoria “style” na pasta do seu template.
É lá que iremos colocar todas as nossas folhas de estilo.

REINICIAR O CSS

A nossa folha de estilos Reset CSS é adaptada a partir de uma folha de estilo do Eric Meyer com pequenas
alterações. Basicamente o que ela faz é criar um standard com o qual possamos trabalhar de conveniente.
Usar esta folha de estilo é muito simples. Adicione as seguintes linhas ao seu ficheiro style.css, no topo, e
antes da secção de comentários.

/* Reset default browser styles */

@import url('styles/reset.css');

No entanto, para que tudo funcione corretamente, você deverá criar um ficheiro reset.css, com o código
que temos para si. Copie e cole esse código para criar o seu ficheiro:

/* --------------------------------------------------------------

Reset default browser CSS.

Based on work by Eric Meyer:

http://meyerweb.com/eric/tools/css/reset/index.html

------------------------------------------------------------- */

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

border-spacing: 0;

}

a img { border: none; }

RECRIAR O CSS

O nosso ficheiro Rebuild CSS é um ficheiro que trabalha toda a tipografia do nosso template de uma forma
inteligente e prática. O que esta folha de estilos faz é criar uma relação ritmada entre a tipografia utilizada
no template e todos os elementos do mesmo, de forma a que você possa alterar convenientemente a
dimensão das fontes e todo o layout mantenha uma estrutura equilibrada e funcional.

Usar o ficheiro rebuild.css é muito simples. Adicione as seguintes linhas de código imediatamente depois
da importação do seu ficheiro reset.css no seu style.css.

/* Rebuild default browser styles */

@import url('styles/rebuild.css');

No entanto, para que tudo funcione corretamente, você deverá criar um ficheiro rebuild.css, com o código
que temos para si. Copie e cole esse código para criar o seu ficheiro:

/* --------------------------------------------------------------

Rebuild the default browser styles

Based on work by Blueprint CSS

http://code.google.com/p/blueprintcss/

-------------------------------------------------------------- */

body {

background: #fff;

}

body, input, textarea {

color: #111;

font: 12px Arial,sans-serif;

line-height: 1.5;

}

/* Headings

------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 {

font-weight: normal;

clear: both;

}

hr {

background-color: #999;

border:0;

height: 1px;

margin-bottom: 1.5em;

}

/* Text elements

-------------------------------------------------------------- */

p{


}

ul {

margin: 0 0 1.5em 2.5em;

}

ol {

margin: 0 0 1.5em 2.5em;

}

ul {

list-style:disc;

}

ol {

list-style-type: decimal;

}

ol ol {

list-style:upper-alpha;

}

ol ol ol {

list-style:lower-roman;

}

ol ol ol ol {

list-style:lower-alpha;

}

ul ul, ol ol, ul ol, ol ul {

margin-bottom:0;

}

dl {

margin:0 1.5em;

}

dt {

font-weight: bold;

}

dd {


}

strong {

font-weight: bold;

}

cite, em, i {

font-style: italic;

}

blockquote {

margin: 0 3em;

}

blockquote em, blockquote i, blockquote cite {

font-style: normal;

}

pre {

font: 11px Monaco, monospace;

line-height: 1.5;


}

code {

font: 11px Monaco, monospace;

}

abbr, acronym {

border-bottom: 1px dotted #666;

cursor: help;

}

ins {

text-decoration: none;

}

sup,

sub {

height: 0;

line-height: 1;

vertical-align: baseline;

position: relative;

}

sup {

bottom: 1ex;

}

sub {

top: .5ex;

}

/*

Adapt the following for use in your Child Themes when using

different font-sizes and line-heights

body, input, textarea {

font: --px Arial,sans-serif;

line-height:--;

}

p, ul, ol, dd, pre {

margin-bottom:--em;

}

pre, code {

font:--px Monaco, monospace;

line-height:--;

}

All other styles can be overridden--or ignored!--in Child Theme stylesheets

*/

ESTILOS BÁSICOS DO WORDPRESS

Existem alguns elementos no WordPress para os quais você terá de ter um estilo. O que fizemos com esta
folha de estilos foi usar esses mesmos estilos e colocá-los todos num ficheiro chamado wp.css. Neste
momento, esse ficheiro inclui estilos para fluatações de imagens — incluindo captações manuais e galerias
de imagens. E ainda estilos para citações.

Usar o ficheiro wp.css é muito simples. Adicione as seguintes linhas de código no seu style.css.

/* Basic WordPress Styles */

@import url('styles/wp.css');

TODOS OS LAYOUTS QUE VOCÊ IRÁ NECESSITAR

Para o seu novo template, criámos alguns layouts que podem ser facilmente adaptados à estrutura HTML
do seu template. No total são 6 layouts diferentes. Cada layout é fluído (estica ou encolhe conforme a
dimensão do seu browser) mas todos eles são fáceis de adaptar a uma largura fixa.

Usar qualquer um destes layouts é muito simples. Depois da importação dos estilos básicos do WordPress,
importe um desses layouts. Veja um exemplo do código que deverá usar:

/* Import a basic layout */

@import url('styles/3c-b.css');

LAYOUT DE UMA COLUNA
Para usar um layout de uma coluna, crie um ficheiro com o nome 1c-b.css e copie lá para dentro o seguinte
código de CSS:

/*

LAYOUT: One-Column

DESCRIPTION: One-column fluid layout with sidebars stacked in two columns below content

*/

#primary, #secondary {

float: left;

overflow: hidden;

padding: 10px 1.9%;

width: 46%;

}

#primary {

clear: both;

}

#footer {

clear: left;

width: 100%;

}

LAYOUT DE DUAS COLUNAS (ESQUERDA)
Para usar um layout de duas colunas com uma delas à esquerda, crie um ficheiro com o nome 2c-l.css e
copie lá para dentro o seguinte código de CSS:

/*

LAYOUT: Two-Column (Left)

DESCRIPTION: Two-column fluid layout with one sidebars left of content

*/

#container {

float: right;

margin: 0 0 0 -200px;

width: 100%;

}

#content {

margin: 0 0 0 200px;

}


float: left;

overflow: hidden;

width: 180px;

}

#secondary {

clear: left;

}

#footer {

clear: both;

width: 100%;

}

LAYOUT DE DUAS COLUNAS (DIREITA)
Para usar um layout de duas colunas com uma delas àdireita, crie um ficheiro com o nome 2c-r.css e copie
lá para dentro o seguinte código de CSS:

/*

LAYOUT: Two-Column (Right)

DESCRIPTION: Two-column fluid layout with one sidebars right of content

*/

#container {

float: left;

margin: 0 -200px 0 0;

width: 100%;

}

#content {

margin: 0 200px 0 0;

}


float: right;

overflow: hidden;

width: 180px;

}

#secondary {

clear: right;

}

#footer {

clear: both;

width: 100%;

}

LAYOUT DE TRÊS COLUNAS
Para usar um layout de três colunas, crie um ficheiro com o nome 3c-b.css e copie lá para dentro o
seguinte código de CSS:

/*

LAYOUT: Three-Column

DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content

*/

#container {

float: left;

width: 100%;

}

#content {

margin: 0 200px;

}


float: left;

overflow: hidden;

width: 180px;

}

#primary {

margin: 0 0 0 -100%;

}

* html #primary {

left: 20px;

position: relative;

}

#secondary {

margin: 0 0 0 -180px;

}

#footer {

clear: left;

width: 100%;

}

LAYOUT DE TRÊS COLUNAS (ESQUERDA)
Para usar um layout de três colunas com uma delas à esquerda, crie um ficheiro com o nome 3c-l.css e
copie lá para dentro o seguinte código de CSS:

/*

LAYOUT: Three-Column (Left)

DESCRIPTION: Three-column fluid layout with two sidebars left of content

*/

#container {

float: right;

margin: 0 0 0 -400px;

width: 100%;

}

#content {

margin: 0 0 0 400px;

}


float: left;

overflow: hidden;

width: 180px;

}

#primary {

margin: 0 20px 0 0;

}

#footer {

clear: both;

width: 100%;

}

LAYOUT DE TRÊS COLUNAS (DIREITA)
Para usar um layout de três colunas com uma delas à direita, crie um ficheiro com o nome 3c-r.css e copie
lá para dentro o seguinte código de CSS:

/*

LAYOUT: Three-Column (Right)

DESCRIPTION: Three-column fluid layout with two sidebars right of content

*/

#container {

float: left;

width: 100%;

}

#content {

margin: 0 400px 0 0;

}


float: left;

overflow: hidden;

width: 180px;

}

#primary {

margin: 0 0 0 -380px;

}

#secondary {

margin: 0 0 0 -180px;

}

#footer {

clear: left;

width: 100%;

}

ESTILIZAR O MENU
Se por ventura nunca estilizou um menu com items desordenados provavelmente irá sentir uma grande
frustração quando o tentar fazer. Como bónus, eis o CSS que usamos para criar menus em templates
wordpress:

#access {

margin: 0 0 1.5em 0;

overflow: auto;

}

.skip-link {

position:absolute;

left:-9000px;

}

.menu ul {

list-style: none;

margin: 0;

}

.menu ul ul {

display: none;

}

.menu li {

display: inline;

}

.menu a {

display: block;

float: left;

}

É muito simples de usar e bastante prático até!

Parte 12
GUIA COMPLETO PARA CRIAR UM TEMPLATE WORDPRESS

Ao longo dos últimos dois meses, escrevemos um total de 12 artigos sobre como criar um template
wordpress, numa série que consideramos essencial a todos aqueles que pretendem arriscar no
desenvolvimento de templates wordpress e/ou todos aqueles que pretendem perceber melhor como
funcionam os templates wordpress. Consideramos que estes tutoriais servem o propósito de ajudar não só
Freelancers e Desenvolvedores, como também blogueiros, amadores e meros curiosos.

Este último artigo é o guia completo para criar um template wordpress. Em cima colocámos todos os
artigos desenvolvidos ao longo desta série, e em baixo colocamos o código final para cada uma das páginas
que fomos ensinando a desenvolver. Se por ventura se sentiu perdido no desenvolvimento, o código que
deixamos no final poderá ajudá-lo a retificar mais facilmente o seu template e a encontrar novamente o
caminho para o sucesso. Esperamos que tenha gostado, e obviamente que agradecemos caso seja possível
deixar o seu comentário!

TEMPLATES DE PÁGINAS CRIADOS

404.PHP


<div id="content">

<div id="post-0" class="post error404 not-found">

<h1 class="entry-title"><?php _e( 'Not Found', 'your-theme' ); ?></h1>


<p><?php _e( 'Apologies, but we were unable to find what you were looking
for. Perhaps searching will help.', 'your-theme' ); ?></p>


</div>

</div>

</div>

</div>



ARCHIVE.PHP

<div id="content">


<?php if ( is_day() ) : ?>

<h1 class="page-title"><?php printf( __( 'Daily Archives: <span>%s</span>', 'your-
theme' ), get_the_time(get_option('date_format')) ) ?></h1>

<?php elseif ( is_month() ) : ?>

<h1 class="page-title"><?php printf( __( 'Monthly Archives: <span>%s</span>', 'your-
theme' ), get_the_time('F Y') ) ?></h1>

<?php elseif ( is_year() ) : ?>

<h1 class="page-title"><?php printf( __( 'Yearly Archives: <span>%s</span>', 'your-
theme' ), get_the_time('Y') ) ?></h1>

<?php elseif ( isset($_GET['paged']) && !empty($_GET['paged']) ) : ?>

<h1 class="page-title"><?php _e( 'Blog Archives', 'your-theme' ) ?></h1>

<?php endif; ?>




<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>

<?php } ?>



<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>


<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-prep meta-prep-entry-date"><?php _e('Published ', 'your-
theme'); ?></span>

<span class="entry-date"><abbr class="published" title="<?php the_time('Y-
m-dTH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>


</div>


<?php the_excerpt( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?>

</div>


<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>


<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep
entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>ntttttt<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>


</div>

</div>

<?php endwhile; ?>

</div>

<?php } ?>





ATTACHMENT.PHP


<div id="content">


<h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>"
title="<?php printf( __( 'Return to %s', 'your-theme' ), 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>




?></span>

?></a></span>


theme'); ?></span>




<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 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>.', 'your-theme' ),


get_the_tag_list( __( ' and tagged ', 'your-theme' ), ', ', '' ),

get_permalink(),


comments_rss() ) ?>

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>.', 'your-theme' ),

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>.', 'your-theme' ), get_trackback_url() ) ?>

comments open ?>

<?php _e( 'Trackbacks are closed, but you can <a class="comment-link"
href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>


<?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme'
) ?>

<?php endif; ?>

<?php edit_post_link( __( 'Edit', 'your-theme' ), "nttttt<span class="edit-link">", "</span>" ) ?>

</div>


<?php comments_template(); ?>





AUTHOR.PHP


<div id="content">


<h1 class="page-title author"><?php printf( __( 'Author Archives: <span
class="vcard">%s</span>', 'your-theme' ), "<a class='url fn n' href='$authordata->user_url'
title='$authordata->display_name' rel='me'>$authordata->display_name</a>" ) ?></h1>

<?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echo
apply_filters( 'archive_meta', '<div class="archive-meta">' . $authordesc . '</div>' ); ?>







<?php } ?>





?></span>

?></a></span>


theme'); ?></span>












?></span>




<?php endwhile; ?>






<?php } ?>





CATEGORY.PHP


<div id="content">


<h1 class="page-title"><?php _e( 'Category Archives:', 'your-theme' ) ?> <span><?php
single_cat_title() ?></span></span></h1>

<?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo
apply_filters( 'archive_meta', '<div class="archive-meta">' . $categorydesc . '</div>' ); ?>







<?php } ?>





?></span>

?></a></span>


theme'); ?></span>








<?php if ( $cats_meow = cats_meow(', ') ) : // Returns categories other than the one queried ?>

<span class="cat-links"><?php printf( __( 'Also posted in %s', 'your-theme' ),
$cats_meow ) ?></span>


<?php endif ?>


?></span>




<?php endwhile; ?>





<?php } ?>


</div>

<?php

return;

endif;

endif;

?>

<?php /* See IF there are comments and do the comments stuff! */ ?>

<?php if ( have_comments() ) : ?>

<?php /* Count the number of comments and trackbacks (or pings) */

$ping_count = $comment_count = 0;

foreach ( $comments as $comment )

get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;

?>

<?php /* IF there are comments, show the comments */ ?>

<?php if ( ! empty($comments_by_type['comment']) ) : ?>

<div id="comments-list" class="comments">

<h3><?php printf($comment_count > 1 ? __('<span>%d</span> Comments', 'your-
theme') : __('<span>One</span> Comment', 'your-theme'), $comment_count) ?></h3>

<?php /* If there are enough comments, build the comment navigation */ ?>


<div id="comments-nav-above" class="comments-navigation">

<div class="paginated-comments-links"><?php
paginate_comments_links(); ?></div>

</div>

<?php endif; ?>

<?php /* An ordered list of our custom comments callback, custom_comments(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=comment&callback=custom_comments'); ?>

</ol>

<?php /* If there are enough comments, build the comment navigation */ ?>


<div id="comments-nav-below" class="comments-navigation">

<div class="paginated-comments-links"><?php paginate_comments_links();
?></div>

</div>

<?php endif; ?>

</div>

<?php endif; /* if ( $comment_count ) */ ?>

<?php /* If there are trackbacks(pings), show the trackbacks */ ?>

<?php if ( ! empty($comments_by_type['pings']) ) : ?>

<div id="trackbacks-list" class="comments">

<h3><?php printf($ping_count > 1 ? __('<span>%d</span> Trackbacks', 'your-
theme') : __('<span>One</span> Trackback', 'your-theme'), $ping_count) ?></h3>

<?php /* An ordered list of our custom trackbacks callback, custom_pings(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=pings&callback=custom_pings'); ?>

</ol>

</div>

<?php endif /* if ( $ping_count ) */ ?>

<?php endif /* if ( $comments ) */ ?>

<?php /* If comments are open, build the respond form */ ?>

<?php if ( 'open' == $post->comment_status ) : ?>

<div id="respond">

<h3><?php comment_form_title( __('Post a Comment', 'your-theme'), __('Post a Reply
to %s', 'your-theme') ); ?></h3>

<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>

<p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged
in</a> to post a comment.', 'your-theme'),

get_option('siteurl') . '/wp-login.php?redirect_to=' . get_permalink() ) ?></p>

<?php else : ?>

<div class="formcontainer">

<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-
comments-post.php" method="post">

<?php if ( $user_ID ) : ?>

<p id="login"><?php printf(__('<span class="loggedin">Logged in as <a
href="%1$s" title="Logged in as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s"

title="Log out of this account">Log out?</a></span>', 'your-theme'),

get_option('siteurl') . '/wp-admin/profile.php',

wp_specialchars($user_identity, true),

wp_logout_url(get_permalink()) ) ?></p>

<?php else : ?>

<p id="comment-notes"><?php _e('Your email is <em>never</em>
published nor shared.', 'your-theme') ?> <?php if ($req) _e('Required fields are marked <span
class="required">*</span>', 'your-theme') ?></p>

<div id="form-section-author" class="form-section">

<div class="form-label"><label for="author"><?php _e('Name', 'your-
theme') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'your-theme') ?></div>

<div class="form-input"><input id="author" name="author"
type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>

</div>

<div id="form-section-email" class="form-section">

<div class="form-label"><label for="email"><?php _e('Email', 'your-
theme') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'your-theme') ?></div>

<div class="form-input"><input id="email" name="email" type="text"
value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>

</div>

<div id="form-section-url" class="form-section">

<div class="form-label"><label for="url"><?php _e('Website', 'your-
theme') ?></label></div>

<div class="form-input"><input id="url" name="url" type="text"
value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>

</div>

<?php endif /* if ( $user_ID ) */ ?>

<div id="form-section-comment" class="form-section">

<div class="form-label"><label for="comment"><?php _e('Comment',
'your-theme') ?></label></div>

<div class="form-textarea"><textarea id="comment"

name="comment" cols="45" rows="8" tabindex="6"></textarea></div>

</div>

<div id="form-allowed-tags" class="form-section">

<p><span><?php _e('You may use these <abbr title="HyperText Markup
Language">HTML</abbr> tags and attributes:', 'your-theme') ?></span> <code><?php echo
allowed_tags(); ?></code></p>

</div>

<?php do_action('comment_form', $post->ID); ?>

<div class="form-submit"><input id="submit" name="submit"
type="submit" value="<?php _e('Post Comment', 'your-theme') ?>" tabindex="7" /><input
type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>

<?php comment_id_fields(); ?>

<?php /* Just … end everything. We're done here. Close it up. */ ?>

</form>

</div>

<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>

</div>

<?php endif /* if ( 'open' == $post->comment_status ) */ ?>

</div>

FOOTER.PHP
</div>

<div id="footer">

<div id="colophon">

<div id="site-info">

<p>Powered by <span id="generator-link"><a href="http://wordpress.org/"
title="<?php _e( 'WordPress', 'your-theme' ) ?>" rel="generator"><?php _e( 'WordPress', 'your-theme' )
?></a></span> and <span id="theme-link"><a href="http://example.com/" title="<?php _e( 'Your
Theme for WordPress', 'your-theme' ) ?>" rel="designer"><?php _e( 'Your Theme', 'your-theme' )
?></a></span>.</p>

</div>

</div>

</div>

</div>

<?php wp_footer(); ?>

</body>

</html>

FUNCTIONS.PHP
<?php

// Make theme available for translation

// Translations can be filed in the /languages/ directory

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);

// Get the page number

function get_page_number() {

if (get_query_var('paged')) {

print ' | ' . __( 'Page ' , 'your-theme') . get_query_var('paged');

}

} // end get_page_number

// For category lists on category archives: Returns other categories except the current one (redundant)

function cats_meow($glue) {

$current_cat = single_cat_title( '', false );

$separator = "n";

$cats = explode( $separator, get_the_category_list($separator) );

foreach ( $cats as $i => $str ) {

if ( strstr( $str, ">$current_cat<" ) ) {

unset($cats[$i]);

break;

}

}

if ( empty($cats) )

return false;

return trim(join( $glue, $cats ));

} // end cats_meow

// For tag lists on tag archives: Returns other tags except the current one (redundant)

function tag_ur_it($glue) {

$current_tag = single_tag_title( '', '', false );

$separator = "n";

$tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) );

foreach ( $tags as $i => $str ) {

if ( strstr( $str, ">$current_tag<" ) ) {

unset($tags[$i]);

break;

}

}

if ( empty($tags) )

return false;

return trim(join( $glue, $tags ));

} // end tag_ur_it

// Register widgetized areas

function theme_widgets_init() {

// Area 1


'name' => 'Primary Widget Area',

'id' => 'primary_widget_area',





) );

// Area 2


'name' => 'Secondary Widget Area',

'id' => 'secondary_widget_area',





) );

} // end theme_widgets_init

add_action( 'init', 'theme_widgets_init' );

// Pre-set Widgets

$preset_widgets = array (

'primary_widget_area' => array( 'search', 'pages', 'categories', 'archives' ),

'secondary_widget_area' => array( 'links', 'meta' )

);

if ( !isset( $_GET['activated'] ) ) {

update_option( 'sidebars_widgets', $preset_widgets );

}

// update_option( 'sidebars_widgets', NULL );

// Check for static widgets in widget-ready areas

function is_sidebar_active( $index ){

global $wp_registered_sidebars;

$widgetcolums = wp_get_sidebars_widgets();

if ($widgetcolums[$index]) return true;

return false;

} // end is_sidebar_active

// Produces an avatar image with the hCard-compliant photo class

function commenter_link() {

$commenter = get_comment_author_link();

if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {

$commenter = ereg_replace( '(<a[^>]* class=['"]?)', '1url ' , $commenter );

} else {

$commenter = ereg_replace( '(<a )/', '1class="url "' , $commenter );

}

$avatar_email = get_comment_author_email();

$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );

echo $avatar . ' <span class="fn n">' . $commenter . '</span>';

} // end commenter_link

// Custom callback to list comments in the your-theme style

function custom_comments($comment, $args, $depth) {


$GLOBALS['comment_depth'] = $depth;

?>


<div class="comment-author vcard"><?php commenter_link() ?></div>

<div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span class="meta-
sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>', 'your-theme'),

get_comment_date(),

get_comment_time(),

'#comment-' . get_comment_ID() );

edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span>
<span class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e("ttttt<span class='unapproved'>Your
comment is awaiting moderation.</span>n", 'your-theme') ?>



</div>

<?php // echo the comment reply link

if($args['type'] == 'all' || get_comment_type() == 'comment') :

comment_reply_link(array_merge($args, array(

'reply_text' => __('Reply','your-theme'),

'login_text' => __('Log in to reply.','your-theme'),

'depth' => $depth,

'before' => '<div class="comment-reply-link">',

'after' => '</div>'

)));

endif;

?>

<?php } // end custom_comments

// Custom callback to list pings

function custom_pings($comment, $args, $depth) {


?>


<div class="comment-author"><?php printf(__('By %1$s on %2$s at %3$s', 'your-theme'),

get_comment_author_link(),

get_comment_date(),

get_comment_time() );

edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span>

<span class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e('ttttt<span class="unapproved">Your
trackback is awaiting moderation.</span>n', 'your-theme') ?>



</div>

<?php } // end custom_pings

HEADER.PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<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');

elseif ( is_page() ) { single_post_title(''); }

elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s);

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>

<body <?php body_class(); ?>>


<div id="header">

<div id="masthead">

<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>

<div id="access">

<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'your-
theme' ) ?>"><?php _e( 'Skip to content', 'your-theme' ) ?></a></div>


</div>

</div>

</div>

<div id="main">

INDEX.PHP


<div id="content">





<?php } ?>

<?php /* The Loop — with comments! */ ?>


<?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>


<?php /* an h2 title */ ?>


<?php /* Microformatted, translatable post meta */ ?>


?></span>

?></a></span>


theme'); ?></span>




<?php /* The entry content */ ?>





<?php /* Microformatted category and tag links along with a comments link */ ?>





?></span>




<?php /* Close up the post div */ ?>

<?php endwhile; ?>






<?php } ?>





PAGE.PHP


<div id="content">







<?php edit_post_link( __( 'Edit', 'your-theme' ), '<span class="edit-link">', '</span>' ) ?>



<?php if ( get_post_custom_values('comments') ) comments_template() // Add a custom field with
Name and Value of "comments" to enable comments on this page ?>





SEARCH.PHP


<div id="content">


<h1 class="page-title"><?php _e( 'Search Results for: ', 'your-theme' ); ?><span><?php
the_search_query(); ?></span></h1>






<?php } ?>






?></span>

?></a></span>


theme'); ?></span>




<?php } ?>










?></span>



<?php } ?>


<?php endwhile; ?>






<?php } ?>

<?php else : ?>

<div id="post-0" class="post no-results not-found">

<h2 class="entry-title"><?php _e( 'Nothing Found', 'your-theme' ) ?></h2>


<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try
again with some different keywords.', 'your-theme' ); ?></p>

</div>

<?php endif; ?>





SIDEBAR.PHP
<?php if ( is_sidebar_active('primary_widget_area') ) : ?>

<div id="primary" class="widget-area">

<ul class="xoxo">

<?php dynamic_sidebar('primary_widget_area'); ?>

</ul>

</div>

<?php endif; ?>

<?php if ( is_sidebar_active('secondary_widget_area') ) : ?>

<div id="secondary" class="widget-area">

<ul class="xoxo">

<?php dynamic_sidebar('secondary_widget_area'); ?>

</ul>

</div>

<?php endif; ?>

SINGLE.PHP


<div id="content">


<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>





?></span>

?></a></span>


theme'); ?></span>









<?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>.', 'your-theme' ),


get_the_tag_list( __( ' and tagged ', 'your-theme' ), ', ', '' ),

get_permalink(),


comments_rss() ) ?>

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>.', 'your-theme' ),

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>.', 'your-theme' ), get_trackback_url() ) ?>

comments open ?>

<?php _e( 'Trackbacks are closed, but you can <a class="comment-link"
href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>


<?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme'
) ?>

<?php endif; ?>

<?php edit_post_link( __( 'Edit', 'your-theme' ), "nttttt<span class="edit-link">", "</span>" ) ?>

</div>



<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>

<?php comments_template('', true); ?>





STYLE.CSS
/*

Theme Name: Your Theme

Theme URI: http://example.com/example/

Description: A search engine optimized website framework for WordPress.

Author: You

Author URI: http://example.com/

Version: 1.0

.

Your theme will be your copyrighted work.

Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.

*/

/* Reset default browser styles */

@import url('styles/reset.css');

/* Rebuild default browser styles */

@import url('styles/rebuild.css');

/* Import a basic layout */

@import url('styles/2c-r.css');

/* Basic WordPress Styles */

@import url('styles/wp.css');

body {

margin: 1.5em 15%;

}

/* =Header

-------------------------------------------------------------- */

#branding {


}

/* =Menu

-------------------------------------------------------------- */

#access {


overflow: auto;

}

.skip-link {

display: none;

}

.menu ul {

list-style: none;

margin: 0;

}

.menu ul ul {

display: none;

}

.menu li {

display: inline;

}

.menu a {

display: block;

float: left;

}

/* =Content

-------------------------------------------------------------- */

.post {

margin: 0 0 3em 0;

}

.entry-content, .entry-summary {

margin: 1.5em 0 0 0;

}

/* =Navigation -------------------------------------------------------------- */

.navigation {


overflow: auto;

}

/* =Widget Areas -------------------------------------------------------------- */

.widget-area ul {

list-style: none;

margin-left: 0;

}

.widget-area ul ul {

list-style: disc;

margin-left: 1.1em;

}

.widget-area ul ul ul {

margin-left: 2.5em;

}

.widget-container {


}

Como desenvolver um tema wordpress de A a Z

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Como desenvolver um tema wordpress de A a Z

Último

Como desenvolver um tema wordpress de A a Z