Como Criar Um WordPress Theme

Como Criar um WordPress Theme Parte 1
Nesta srie de artigos sobre a construo de um wordpress theme vamos tentar falar na informao mais importante, usando sempre uma linguagem simples para que todos possam entender. Vamos seguir a seguinte ordem:

Introduo aos WordPress Themes style.css e header.php index.php, archive.php single.php, page.php, 404.php comments.php sidebar.php e footer.php Melhorar a aparencia do tema (css) Funcionalidades Extras: Thumbails Funcionalidades Extras: Menus Personalizados
Ferramentas e Conhecimentos Necessrios

Para poder seguir este tutorial e conseguir criar o seu tema, deve de:

Ter um browser (de preferncia o Firefox com o addon firebug instalado Conta de hospedagem online ou servidor local (Wamp (Windows), MAMP (Mac) e LAMP (Linux). Editor de texto sua preferncia. (Recomendamos o NotePad++ para Windows, TextWrangler para Mac e o Bluefish para Linux ltima verso do WordPress faa o download em wordpress.org Saber trabalhar com o WordPress Conhecimento em HTML e CSS Se perceber PHP, melhor ainda
A Estrutura do WordPress
O WordPress um gestor de contedo que no inicio pode fazer alguma confuso as muitas pastas e ficheiros que tem, mas voc s tem que se preocupar com 2 coisas: o ficheiro wp-config.php e a pasta wp-content. O ficheiro wp-config.php contm toda a informao necessria para o WordPress se ligar a base de dados (banco de dados) e funcionar normalmente. J a pasta wp-content onde ficam os temas e os plugins.
Como neste tutorial vamos aprender a fazer temas, importante que voc saiba onde ele tem que ser colocado para poder ser usado no seu site. Como dissemos anteriormente, os temas e os plugins ficam dentro da pasta wp-content. Dentro desta pasta existem outras duas chamadas de plugins e themes. Ns vamos trabalhar dentro da pasta themes (wp-content/themes).
Depois do tema estar pronto, voc tem transferir a pasta do tema para dentro desta pasta themes. S assim voc vai conseguir ativa-lo e usar-lo online.
A Estrutura de um Tema
Antes de comear a criar um template preciso saber como ele funciona. Um tema para wordpress basicamente uma pgina normal feita em HTML, mas dividida em partes. A parte que diz respeito ao cabealho fica num ficheiro, a parte do cdigo que diz respeito ao contedo fica noutro e assim por diante. As partes/ficheiros bsicos e essenciais de um tema so os seguintes:

header.php: local onde fica o cdigo do cabealho sidebar.php: local onde fica o cdigo da lateral footer.php: local onde fica o cdigo do rodap index.php: cdigo que mostra os artigos na pgina inicial single.php: cdigo que mostra o artigo na sua prpria pgina page.php: cdigo que mostra o contedo de uma pgina esttica archive.php: igual ao index.php, o cdigo nesta parte vai mostrar os artigos que esto no arquivo, nas categorias, tags, etc
functions.php: local onde ficam algumas funes que adicionam mais capacidades aos temas 404.php: igual ao index.php, em vez de mostrar um artigo dever de mostrar um texto a avisar que o contedo no foi encontrado style.css: ficheiro onde fica o stylesheet do tema
O que devo colocar em cada um destes ficheiros:
J explicamos em cima o que deve de colocar em cada parte, mas para que no restem dvidas criamos uma pgina normal em HTML e vamos ensinar a separar cada parte. importante que antes de comear criar o seu wordpress theme, j tenha as pginas feitas em HTML. Depois s precisa de dividir essas pginas pelos vrios ficheiros do tema e usar php para que funcione bem. Este cdigo de uma simples pgina HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title>Pgina de HTML</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="corpo"> <div id="header"> <h1>Titulo do Site</h1> <h2>Descrio do site</h2> <ul id="nav"> <li><a <li><a <li><a <li><a </ul> </div> <div id="conteudo"> <div id="artigos"> <div class="artigo"> <h2>Titulo do artigo 1</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> <div class="artigo"> <h2>Titulo do artigo 2</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> </div> href="#">Pgina href="#">Pgina href="#">Pgina href="#">Pgina 1</a></li> 2</a></li> 3</a></li> 4</a></li>
<div id="sidebar"> <ul class="widget"> <h3>Widget</h3> <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina </ul>
1</a></li> 2</a></li> 3</a></li> 4</a></li>
<ul class="widget"> <h3>Widget</h3> <li><a href="#">Categoria <li><a href="#">Categoria <li><a href="#">Categoria <li><a href="#">Categoria </ul> </div> </div>
1</a></li> 2</a></li> 3</a></li> 4</a></li>
<div id="footer"> <p>© 2012 - Todos os Direitos Reservados</p> </div> </div> </body> </html>
Separando a pgina HTML em partes
Vamos comear de cima para baixo, ou seja, no header.php (cabealho). Comece por criar um novo ficheiro no seu bloco de notas, copiar o cdigo deste o inicio at ao fim da div header e colar no bloco de notas. Depois grave com o nome header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title>Pgina de HTML</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="corpo"> <div id="header"> <h1>Titulo do Site</h1> <h2>Descrio do site</h2> <ul id="nav"> <li><a <li><a <li><a <li><a </ul> </div> href="#">Pgina href="#">Pgina href="#">Pgina href="#">Pgina 1</a></li> 2</a></li> 3</a></li> 4</a></li>
Depois do cabealho, passamos a div onde o contedo (artigos e sidebar) mostrado. Ento nos ficheiros index.php, single.php, page.php, archive.php e search.php, colamos toda a div conteudo com excepo da parte da sidebar. O cdigo este:
<div id="conteudo"> <div id="artigos"> <div class="artigo"> <h2>Titulo do artigo 1</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> <div class="artigo"> <h2>Titulo do artigo 2</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> </div>  </div>
No colocamos o cdigo da sidebar no passo anterior, porque esse cdigo deve de ficar no sidebar.php, um ficheiro que contm todo o contedo da sidebar.
<div id="sidebar"> <ul class="paginas"> <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina </ul>
1</a></li> 2</a></li> 3</a></li> 4</a></li>
<ul class="categorias"> <li><a href="#">Categoria <li><a href="#">Categoria <li><a href="#">Categoria <li><a href="#">Categoria </ul> </div>
1</a></li> 2</a></li> 3</a></li> 4</a></li>
Neste momento toda a parte do contedo tambm est pronta. Vamos passar ao que falta, ou seja, ao rodap do tema. Vamos usar para isso o footer.php, o ficheiro onde deve de ficar a nossa div footer e o cdigo restante.
<div id="footer"> <p>© 2012 - Todos os Direitos Reservados</p> </div> </div> </body> </html>
Agora toda a pgina HTML que tnhamos no inicio est dividida em partes.
Como chamar outras partes dos temas
O prximo passo adicionar algumas tags para que o wordpress, quando usar o tema, possa juntar todas as partes e mostrar todas as partes do tema. Para fazer isto, vamos usar 3 tags que servem para ir chamar/incluir outras partes do tema. Numa pgina como o index.php, precisamos de chamar o cabealho (header.php), lateral (sidebar.php) e o rodap (footer.php):
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Cada uma destas tags devem de ser colocadas no lugar onde o cdigo das outras pginas deve de ser includo. Por exemplo, no index.php precisamos de incluir o header.php logo no inicio, o sidebar.php no lugar onde antes estava o cdigo da sidebar e no fim da pgina, temos que incluir o footer.php. Ento os ficheiros index.php, single.php, page.php, archive.php e search.php ficam assim:
<?php get_header(); ?> <div id="conteudo"> <div id="artigos"> <div class="artigo"> <h2>Titulo do artigo 1</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> <div class="artigo"> <h2>Titulo do artigo 2</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>
Como pode ver, as tags foram adicionas em 3 lugares diferentes, a primeira chama o header, a segunda chama a sidebar e a terceira chama o footer. Estes so os primeiro passos para a criao de um tema. Depois temos que adicionar vrias tags, criar o loop que vai fazer com que os artigos e pginas sejam mostradas e tambm criar um stylesheet para que o tema fique apresentvel nos navegadores de internet. Tudo isto ser falado nos prximos artigos.
Download dos ficheiros do tutorial
Download dos ficheiros do tutorial

Publicado em 06/02/2012 Arquivado em Cdigo / Hacks, Wordpress 20 Comentrios
Depois do primeiro artigo onde fizemos uma introduo sobre como criar templates para wordpress, comeamos a trabalhar nos ficheiros individuais que fazem parte do tema. Seguindo a ordem definida no inicio, na segunda parte desta srie de artigos vamos falar nos ficheiros style.css e header.php. Se esta informao do seu interesse, subscreva a nossa newsletter para receber os artigos no seu email e ainda participar no nosso passatempo mensal onde oferecemos vrios prmios. Escreva o seu email e clique em subscrever:
style.css
No ficheiro style.css fica todo o cdigo css que responsvel pela a aparncia dos elementos que esto na pgina/tema. Neste ficheiro voc pode definir tamanhos, cores, margens, etc, sempre usando css. Se quer aprender css ou melhorar os seus conhecimentos, um dos melhores sites o W3Schools que tem uma categoria destinada ao CSS: www.w3schools.com/css/.
Como fazer
Primeiro comeamos por criar um novo ficheiro e guardamos na pasta do tema com o nome style.css. Depois comeamos a definir os atributos de cada elemento da pgina. Ns criamos um com uma personalizao muito simples e bsica e que funciona com os ficheiros que criamos na primeira parte do tutorial. Repare que adicionamos um comentrio no inicio do ficheiro, a informao que voc escrever nesta parte ser usada na pgina de ativao do tema:
Este o nosso CSS, se quiser pode usa-lo. Copie e cole no seu style.css:
0/* 0Theme Name: WPTotal 1
Theme URI: http://www.wptotal.com/
0 0Description: WPTotal 2Author: WPTotal 0Author URI: http://www.wptotal.com/ 0 */ 3 0 0html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote 4,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,
samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,for
0m,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font0family:inherit;font-size:100%;font-style:inherit;fontweight:inherit;outline:0;vertical-align:baseline;margin:0;padding:0;} 5 0 0ol,ul{list-style:none;} 6
:focus{outline:0;}
table{border-collapse:separate;border-spacing:0;}
0caption,th,td{font-weight:normal;text-align:left;} 0 7blockquote:before,blockquote:after,q:before,q:after{content:"";} 0 0b,strong{font-weight:bold;} 8

small{font-size:10px;} i,em{font-style:italic;}
0 big{font-size:16px;} 0 9a img{border:0;} 0article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav, section{display:block;} 1 0h1,h2,h3,h4,h5,h6{font-weight:bold;}
0a:link,a:visited{color:#0066cc;text-decoration:none;outline:0;} 1 a:hover,a:active{color:#0055a9;text-decoration:none;outline:0;} 1
body{background:#f4f4f4;font:normal 13px/150% Arial, Helvetica, sans-
0serif;color:#363636;} 1 2 0 1margin:20px auto; 3

width:960px; #corpo{
0 background:#fff; 1 4} 0 1#header{ 5
width:940px;
0 1margin:10px; 6float:left; 0} 1 7 0 1font-size:24px; 8 0} 1 9 0#header h2{ 2font-size:18px; 0

margin-bottom:20px; #header h1{
margin-bottom:10px;
0 2} 1 0#nav{ 2 2width:940px; 0
}
2 3
#nav li{
0 display:inline; 2 4margin-right:30px; 0} 2 5
#conteudo{
0 2width:940px; 6margin:10px; 0float:left; 2 } 7 0 2#artigos{ 8
width:630px;
0float:left; 2 9} 0 3.artigo{ 0
width:630px;
0 3margin-bottom:30px; 1float:left; 0} 3 2 0 3font-size:20px; 3 0} 3 4 0.artigo h2{ 3

.artigo h1{
margin-bottom:10px;
5font-size:16px; 0margin-bottom:10px; 3} 6 0 3.artigo p{ 7margin-bottom:10px; 0} 3 8 0 3width:300px; 9

float:right; #sidebar{
0 } 4 0 0.widget{ 4width:300px; 1
margin-bottom:20px;
0 4} 2 0.widget h3{ 4 3font-size:14px; 0 4} 4

margin-bottom:10px;
0 #footer{ 4 5width:940px; 0margin:10px; 4font-size:11px; 6

text-align:center;
0 4}
7 0 4 8 0 4 9 0 5 0 0 5 1 0 5 2 0 5 3 0 5 4 0 5 5 0 5 6 0 5 7 0 5 8 0 5
9 0 6 0 0 6 1 0 6 2 0 6 3 0 6 4 0 6 5 0 6 6 0 6 7 0 6 8 0 6 9 0 7 0 0 7
1 0 7 2 0 7 3 0 7 4 0 7 5 0 7 6 0 7 7 0 7 8 0 7 9 0 8 0 0 8 1 0 8 2 0 8
3 0 8 4 0 8 5 0 8 6 0 8 7 0 8 8 0 8 9 0 9 0 0 9 1 0 9 2 0 9 3 0 9 4 0 9
5 0 9 6 0 9 7 0 9 8 0 9 9 1 0 0 1 0 1 1 0 2 1 0 3 1 0 4 1 0 5 1 0 6 1 0
7 1 0 8
Este ser o resultado:
header.php
Com o style.css j pronto, vamos abrir o ficheiro header.php que criamos na primeira parte deste tutorial. Neste ficheiro ficam algumas tags que so importantes para o tema e alguns plugins funcionarem. Estas linhas de cdigo devem de ser adicionadas entre as tags <head> e </head> (apague as duas linhas de cdigo que esto l):
1
<link rel="profile" href="http://gmpg.org/xfn/11" /> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type');
2?>; charset=<?php bloginfo('charset'); ?>" /> 3<title><?php wp_title(''); ?></title> 4

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
5<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> 6<?php if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' ); wp_head(); ?>
Cada linha de cdigo faz uma coisa diferente, aqui est a explicao de cada linha:

linha 1: indica ao browser como o mark-up deve de ser usado; linha 2: indica o tipo de contedo e o conjunto de caracteres que est a ser usado; linha 3: a tag wp_title vai gerar um ttulo diferente para cada pgina. Esta tag pode ser mais trabalhada, mas falamos nisso noutro artigo; linha 4: insere automaticamente o stylesheet criado anteriormente (style.css). O wordpress deteta a sua localizao e insere o url do ficheiro; linha 5: gera o url de pingback, no obrigatrio mas convm usar; linha 6: ativa o suporte a comentrios com vrios nveis e tambm tem a tag wp_head que serve para inserir outras linhas de cdigo nesta zona do tema ( uma tag muito usada pelos plugins)
Ainda no header.php, umas linhas mais a baixo, temos j o corpo da pgina onde podemos adicionar 3 outras tags: uma para o ttulo (nome do site), uma para a descrio e outra tag para listar as categorias no menu. Aqui opcional: voc pode escrever manualmente, pode usar tags php do wordpress ou usar uma imagem para o logotipo. Ns vamos usar as tags do wordpress para o ttulo e descrio do blog (o texto que aparece aqui pode ser alterado em Opes > Geral). As tags para mostrar o nome e descrio so estas:
1<?php bloginfo('name'); ?> 2<?php bloginfo('description'); ?>
S tem que copiar cada uma e substituir dentro das tags <h1> e <h2> que esto na div header:
1<h1><?php bloginfo('name'); ?></h1> 2<h2><?php bloginfo('description'); ?></h2>
Mais em baixo temos o menu e mais uma vez uma escolha sua. Pode criar o menu manualmente usado html, usar alguma tag do wordpress para listar as categorias (o mais usado) ou usar os menus personalizados do wordpress que permitem adicionar ou remover links do menu atravs do painel de administrao.
Ns optamos por mostrar as categorias, por isso vamos usar o seguinte cdigo:
1<?php wp_list_cats('sort_column=name'); ?>
Se voc preferir mostrar as pginas em vez das categorias, use a seguinte tag:
1<?php wp_list_pages('title_li='); ?>
No fim destas alteraes todas temos o seguinte cdigo no nosso header.php:

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 02
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
03xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
04
<head>
05 06 07
<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); 08?>; charset=<?php bloginfo('charset'); ?>" />
09
<title><?php wp_title(''); ?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php
10bloginfo( 'stylesheet_url' ); ?>" />
11<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> 12<?php if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' ); wp_head(); ?>
13 14 15
</head> <body>
16<div id="corpo"> 17 18 19 20 21
<ul id="nav"> <div id="header"> <h1><?php bloginfo('name'); ?></h1> <h2><?php bloginfo('description'); ?></h2>
22
<?php wp_list_cats('sort_column=name'); ?> </ul> </div>
Depois de guardar todas as alteraes, o seu header.php est pronto e podemos passar para as outras partes do tema.
Download dos ficheiros

Download dos ficheiros style.css e header.php Download de todos os ficheiros criados at agora

Na terceira parte desta srie de artigos que ensina a criar templates wordpress desde o zero, vamos desenvolver os nossos index.php e archive.php (homepage e pgina de arquivos, respectivamente). Para acompanhar o nosso raciocnio desde o inicio, recomendamos que leia os dois artigos publicados antes deste:

Como criar um Template WordPress Parte 1- Introduo Como criar um Template WordPress Parte 2 Style.css e Header.php
index.php
O index.php o ficheiro onde fica todo o contedo mostrado na homepage. Este ficheiro usado tambm quando algum ficheiro responsvel pela parte do contedo est em falta (single.php, archive.php, etc). No nosso index.php (criado na primeira parte do tutorial download dos ficheiros aqui) temos o seguinte cdigo:
01<?php get_header(); ?> 02 03
<div id="conteudo"> <div id="artigos">
04 05 06 07 08 09
<div class="artigo"> <h2>Titulo do artigo 1</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div>
<div class="artigo">
10 11 12 13 14 15 16 17 18 19
<h2>Titulo do artigo 2</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> </div>
<?php get_sidebar(); ?> </div>
<?php get_footer(); ?>
Como este cdigo ainda html, o wordpress no sabe em que parte deve de mostrar o contedo, por isso temos que usar o chamado loop. Para quem no sabe, o loop responsvel pela mostragem do contedo na pgina inicial e pginas de arquivo do blog e tambm mostrar mensagens ao usurio no caso de no existir artigos para ser mostrados ou mostrar os links de navegao pelo arquivo. Vamos usar este cdigo para criar o loop do nosso index.php, a explicao sobre cada linha de cdigo est mais em baixo.
1<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 2 3<?php endwhile?> 4 5<?php else: ?> 6
7<?php endif; ?>
Para entenderem o que cada linha faz, traduzimos para portugus:

linha 1: se houver posts, ento mostrar posts (depois desta linha fica toda a div do post); linha 2: os posts j foram mostrados (at ao limite que est definido em Opes > Leitura) por isso no deve de mostrar mais posts (depois disto fica a navegao do blog); linha 3: no caso exista posts, ento mostrado o contedo que estiver depois desta linha (pode ser um simples pargrafo dizendo no existem posts); linha 4: como os posts ou a mensagem a informar que no existem posts j foram mostrados, o wordpress termina o loop aqui.
Como aplicar este cdigo no index.php
O loop fica dentro da div do contedo, neste caso a nossa div <div id=artigos>. Dentro do loop fica a div do post (<div class=artigo> ) depois da primeira linha de cdigo. Resultado:
01<?php get_header(); ?> 02 03 04 05 06 07 08
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="artigo"> <div id="conteudo"> <div id="artigos">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <p>Postado por <?php the_author() ?> em <?php
09the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentrios', 10edit_post_link('(Editar)'); ?></p> 11 12 13 14 15

<?php else: ?> '1 Comentrio', '% Comentrios', 'comments-link', ''); ?> <?php
<p><?php the_content(); ?></p> </div> <?php endwhile?>
16 17 18 19 20 21
<?php get_sidebar(); ?> </div> <?php get_footer(); ?> </div> <?php endif; ?>
Agora falta preencher o resto do loop. Depois da linha <?php endwhile?>, colocamos a navegao. Aqui podemos usar um plugin como o WP-PageNavi que mostra uma navegao numerada (como aqui no wptotal) ou usar um cdigo que mostra os links anterior e seguinte. Se usar o plugin:
1<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
Se no usar o plugin (vamos optar por isto neste tutorial). Note que adicionamos cdigo html ao nas tags para que elas fiquem lado a lado no tema.
<div class="navegacao">
1
<div class="recentes"><?php next_posts_link('« Artigos
2Anteriores') ?></div> 3 4
<div class="anteriores"><?php previous_posts_link('Artigos Recentes »') ?></div> </div>
Este o CSS para o segundo cdigo, copie e cole em qualquer parte do style.css:
01.navegacao{ 02 03 04 05 06.recentes{
width:630px; float:left; }
07 08 09 10 11 12
float:left; }
.anteriores{ float:right; }
E agora depois do <?php else: ?> fica a mensagem que aparece no caso de no existirem posts. Optamos por usar a mesma div do artigo mas com uma mensagem personalizada. Assim at quando existir um erro, a forma como a mensagem vai aparecer ser a mesma que um post:
1<div class="artigo"> 2 3 4
<h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas no foram encontrados artigos.</p>
5</div>
Todo o loop est pronto mas ainda falta automatizar o contedo que vai aparecer como artigo. Vamos usar 7 tags:

tag 1: mostra o ttulo tag 2: insere o link da pgina onde o artigo est tag 3: mostra o nome do autor do artigo tag 4: mostra a data em que o artigo foi publicado tag 5: mostra o numero de comentrios e adiciona o link para os comentrios do artigo tag 6: mostra um texto Editar com o link para a pgina de edio do artigo. S aparece a usurios com o login feito e com permisses para editar posts. tag 7: mostra o contedo do artigo.
01<?php the_title(); ?> 02 03<?php the_permalink() ?> 04 05<?php the_author() ?> 06
07<?php the_time('d/M/Y') ?> 08 09<?php comments_popup_link('Sem Comentrios', '1 Comentrio', '%

Comentrios', 'comments-link', ''); ?>
10 11 12 13<?php the_content(); ?>

<?php edit_post_link('(Editar)'); ?>
Vamos agora colocar estas tags na div do artigo. Fica assim:

1 2
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?>
3- <?php comments_popup_link('Sem Comentrios', '1 Comentrio', '%

Comentrios', 'comments-link', ''); ?> <?php 4edit_post_link('(Editar)'); ?></p>
<p><?php the_content(); ?></p>
</div>
Neste momento o nosso index.php est pronto e a funcionar. Este o cdigo final:
01<?php get_header(); ?> 02 03 04 05the_post(); ?> 06 07 08
<?php if ( have_posts() ) : while ( have_posts() ) : <div id="conteudo"> <div id="artigos">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentrios', 09 '1 Comentrio', '% Comentrios', 'comments-link', ''); ?> <?php 10edit_post_link('(Editar)'); ?></p>
11 12 13 14
<p><?php the_content(); ?></p> </div> <?php endwhile?> <div class="navegacao"> <div class="recentes"><?php
15next_posts_link('« Artigos Anteriores') ?></div> 16 17 18 19 20 21 22 23 24 25 26 27 28

<?php get_sidebar(); ?> </div> <?php get_footer(); ?> </div> artigos.</p> </div> <?php endif; ?> <div class="anteriores"><?php previous_posts_link('Artigos Recentes »') ?></div> </div> <?php else: ?> <div class="artigo"> <h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas no foram encontrados
Esta imagem mostra a nossa homepage com 2 posts e a navegao a funcionar:
archive.php
Depois de termos o index.php pronto, vamos criar a pgina que responsvel por mostrar os arquivos do blog. Existem vrias pginas que podem fazer isto, at o index.php faz esse trabalho caso no exista nenhum ficheiro de arquivo, mas vamos usar um ficheiro que o default para todas as pginas de arquivo (categorias, tags, links, data, autores, etc): o archive.php Para esta pgina, vamos usar o cdigo do index.php e adicionar um hack que basicamente vai informar ao usurio qual o contedo esto a ver. Comece por criar um archive.php ou se fez o download dos ficheiros da segunda parte do tutorial, abra o ficheiro. Copie todo o cdigo do index.php e cole no archive.php (substitua todo o contedo caso exista algum). Este o hack que devemos de adicionar antes do loop:
01<?php $post = $posts[0]; // Hack. Set $post so that the_date() works.
?>
02
<?php /* If this is a category archive */ if (is_category()) { ?>
03 04 05
Arquivo da Categoria "<?php echo single_cat_title(); ?>"
<?php /* If this is a daily archive */ } elseif (is_day()) { ?> Arquivo de <?php the_time('j \d\e F \d\e Y'); ?>
06<?php /* If this is a monthly archive */ } elseif (is_month()) { ?> 07

Arquivo de <?php the_time('F \d\e Y'); ?>
08<?php /* If this is a yearly archive */ } elseif (is_year()) { ?> 09 10 11

Arquivo de <?php the_time('Y'); ?>
<?php /* If this is an author archive */ } elseif (is_author()) { ?> Arquivo do Autor
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged'])
12&& !empty($_GET['paged'])) { ?> 13

Arquivo do Blog
14<?php } ?>
Este conjunto de ifs mostra uma mensagem diferente em cada tipo de arquivo. Explicao de cada if:

1 if: mostra uma mensagem na pgina das categorias 2 if: mostra uma mensagem na pgina de arquivo diario 3 if: mostra uma mensagem na pgina de arquivo mensal 4 if: mostra uma mensagem na pgina de arquivo anual
5 if: mostra uma mensagem na pgina de arquivo do autor 6 if: mostra uma mensagem generica caso no seja um arquivo dos anteriores
Como a ideia desta srie de tutoriais ensinar o mais importante e no complicar muito as coisas, no adicionamos nenhum estilo a esta mensagem, mas podem faz-lo. Fica a vosso critrio. Este o resultado final do nosso archive.php:
01<?php get_header(); ?> 02 03 04 05the_date() works. ?> 06 07
Arquivo da Categoria "<?php echo single_cat_title(); <?php $post = $posts[0]; // Hack. Set $post so that <div id="conteudo"> <div id="artigos">
<?php /* If this is a category archive */ if (is_category()) { ?>
08?>" 09 10 11 12 13 14(is_year()) { ?> 15 16 17 18 19 20 21 22

<?php if ( have_posts() ) : while ( have_posts() ) : Arquivo de <?php the_time('Y'); ?> <?php /* If this is a daily archive */ } elseif (is_day()) { ?> Arquivo de <?php the_time('j \d\e F \d\e Y'); ?>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?> Arquivo de <?php the_time('F \d\e Y'); ?> <?php /* If this is a yearly archive */ } elseif
<?php /* If this is an author archive */ } elseif (is_author()) { ?> Arquivo do Autor
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> Arquivo do Blog <?php } ?>
23the_post(); ?> 24 25 26
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentrios', 27'1 Comentrio', '% Comentrios', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p>
28 29
<p><?php the_content(); ?></p> </div>
30 31 32 33
<?php endwhile?> <div class="navegacao">
<div class="recentes"><?php next_posts_link('« Artigos Anteriores') ?></div> <div class="anteriores"><?php
34previous_posts_link('Artigos Recentes »') ?></div> 35 36 37 38 39 40artigos.</p> 41 42 43

</div> </div> <?php endif; ?> </div> <?php else: ?> <div class="artigo"> <h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas no foram encontrados
<?php get_sidebar(); ?> </div> <?php get_footer(); ?>
Ao entrar numa pgina de arquivo a mensagem aparece e muda conforme o arquivo que est a ver:

Download dos ficheiros index.php e archive.php Download de todos os ficheiros criados at agora

Nesta quarta parte da srie de artigos sobre a criao de templates para wordpress vamos falar de 3 ficheiros que fazem parte da base de um tema: o single.php, o page.php e o 404.php. Para poder perceber como tudo funciona e feito importante que leia os 3 artigos que j foram publicados:

Como criar um Template WordPress Parte 1- Introduo Como criar um Template WordPress Parte 2 Style.css e Header.php Como criar um Template WordPress Parte 3 Index.php e Archive.php
single.php
O ficheiro single.php usado para gerar o contedo da pgina de cada post. Assim como o index.php e archive.php criados da terceira parte desta srie de artigos, o single.php tambm tem um loop e o seu trabalho mostrar o post, os comentrios e uma mensagem de erro caso a pgina no seja encontrada (neste caso o wordpress usa normalmente o 404.php). Como o objectivo apenas ensinar a criar templates, vamos fazer manter esta pgina simples e usar as mesmas divs/cdigo que usamos na homepage (index.php), mas nos seus temas pode adicionar outras coisas como widgets de partilha, um local para as tags, adicionar os posts relacionados, etc.
Vamos ento criar o nosso single.php (ou usar o que est disponvel para download) e apagar todo o cdigo que est nele. Vamos usar o cdigo base do index.php, com algumas alteraes: aqui no vamos precisar de uma pginao/navegao e temos que adicionar a tag que vai chamar o ficheiro responsvel pela parte dos comentrios (comments.php). Comeamos por adicionar a tag dos comentrios que vai ficar depois da div do artigo (<div class=artigo> </div>):
1<?php comments_template(); ?>
Depois alteramos parte do loop que na homepage iria mostrar a navegao. Como no precisamos de uma navegao na pgina do post, substitui-mos isto:
1 2
<?php endwhile?> <div class="navegacao"> <div class="recentes"><?php next_posts_link('« Artigos
3Anteriores') ?></div> 4 5 6
<div class="anteriores"><?php previous_posts_link('Artigos Recentes »') ?></div> </div>
<?php else: ?>
por esta linha de cdigo:

1<?php endwhile; else: ?>
E este o cdigo final:

01 02
<div id="artigos"> <?php get_header(); ?> <div id="conteudo">
03 04
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 05
06 07 08
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1> <p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentrios',
09'1 Comentrio', '% Comentrios', 'comments-link', ''); ?> <?php

edit_post_link('(Editar)'); ?></p>
10 11 12 13 14 15 16 17 18 19artigos.</p> 20 21 22 23 24 25 26
</div>
<p><?php the_content(); ?></p> </div>
<?php comments_template(); ?>
<?php endwhile; else: ?> <div class="artigo"> <h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas no foram encontrados
</div> <?php endif; ?>
Alm da tag dos comentrios e da alterao no loop, fizemos uma alterao que importante em termos de SEO: no ttulo usamos uma tag <h1> em vez da <h2>. Esta alterao importante porque devemos dizer aos motores de busca que aquele o principal assunto/ttulo da pgina. Por agora no tem que se preocupar com isto, mas depois seria bom que optimizasse melhor o SEO do tema. Saiba o que deve de fazer e porqu lendo o artigo Dicas SEO que faz parte da srie Como Criar um Blog de Sucesso.
page.php
Para o contedo que no deve de fazer parte do blog (pgina de contacto, sobre ns, etc), h as pginas estticas. Estas pginas so mostradas com base no ficheiro page.php e as diferenas entre este ficheiro e o single.php so poucas, normalmente removemos o seguinte:
informaes sobre a pgina (data em que foi publicada, autor, categoria, etc); comentrios; widgets de partilha e outras coisas que no sejam necessrias nestas pginas.
Vamos usar o cdigo do single.php neste ficheiro, s preciso apagar duas linhas de cdigo: informao do post e comentrios.
<p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> <?php comments_popup_link('Sem Comentrios', '1 Comentrio', '% 1 Comentrios', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p>
1<?php comments_template(); ?>
Com estas alteraes, temos este cdigo:

01<?php get_header(); ?> 02 03 04 05the_post(); ?> 06 07 08 09 10 11 12 13 14 15 16 17 18
</div> artigos.</p> </div> <?php endif; ?> <?php if ( have_posts() ) : while ( have_posts() ) : <div id="conteudo"> <div id="artigos">
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1> <p><?php the_content(); ?></p> </div> <?php endwhile; else: ?> <div class="artigo"> <h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas no foram encontrados
19 20 21 22
404.php
Este ficheiro o template das pginas de erro 404 (no encontrado). Se algum tenta aceder a uma pgina ou ficheiro que no existe ou no foi encontrado, vai ver esta pgina por isso ela importante para que voc no perca essa visita. Primeiro comece por informar o usurio que o que ele procura no foi encontrado e que lamenta por isso. Depois coloque ferramentas para que ele possa navegar por outras pginas do blog, alguns exemplos:

formulrio de pesquisa (busca) para que ele tente encontrar o que procura uma listagem das categorias ou arquivo por data link para a sua pgina de contacto para que ele possa falar consigo
importante que a pgina seja simples e fcil de ler, no se esquea que o usurio est frustrado por no conseguir ver o que procurava. Para manter este tutorial simples, vamos adicionar apenas uma mensagem a informar o que aconteceu, mas num tema que vai ser usado num site recomendamos seguir as sugestes anteriores. Como no h nenhum artigo ou pgina para mostrar, no precisamos de usar um loop. Vamos apenas pegar na div do artigo, tirar as tags php e escrever manualmente a nossa mensagem:
01<?php get_header(); ?> 02 03 04 05 06encontrado.</p> 07 08 09
</div> </div> <div id="conteudo"> <div id="artigos"> <div class="artigo"> <h1>Erro 404 - No Encontrado</h1> <p>Lamentamos, mas o que voc procura no foi
10 11 12
E o nosso 404.php est pronto!


Download dos ficheiros single.php, page.php e 404.php Download de todos os ficheiros criados at agora

Na quinta parte da srie de artigos sobre como criar um wordpress template, vamos aprender a criar comments.php, o ficheiro que responsvel por mostrar todos os comentrios dos artigos e pginas e tambm por deixar os usurios comentarem. Recomendamos que siga este tutorial desde o inicio para acompanhar o nosso raciocnio:

Como criar um Template WordPress Parte 1- Introduo Como criar um Template WordPress Parte 2 Style.css e Header.php Como criar um Template WordPress Parte 3 Index.php e Archive.php Como criar um Template WordPress Parte 4 Single.php, Page.php e 404.php
comments.php
Os comentrios so parte fundamental de um blog porque o espao onde os utilizadores podem exprimir as suas opinies sobre os artigos e sobre o seu trabalho. O wordpress suporta comentrios e o ficheiro responsvel por mostrar os comentrios e o formulrio para comentar o comments.php. Este ficheiro chamado pela tag <?php comments_template(); ?> que adicionamos no nosso single.php (ver parte 4 do tutorial). O cdigo que vamos usar contem um loop que faz vrias verificaes e mostra os comentrios. Ele funciona desta maneira:
ver se h comentrios e mostra-los;
verificar se os comentrios ainda esto abertos e mostrar/no mostrar o formulrio dos comentrios; depois de submeter o comentrio ele guarda o comentrio na base de dados.
Para comear abra o seu comments.php ou crie um ficheiro com esse nome e depois use o seguinte cdigo:
<?php
01
// Do not delete these lines
02
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) 03
04 05 06
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?> <p class="nocomments">Este artigo est protegido por
07password. Insira-a para ver os comentrios.</p> 08 09 10 11 12 13

<div id="comments"> <h3><?php comments_number('0 Comentrios', '1 Comentrio', '% ?> } <?php return;
14Comentrios' );?></h3> 15 16 17 18 19 20 21
<?php if ($wp_query->max_num_pages > 1) : ?> <ol class="commentlist"> <?php wp_list_comments('avatar_size=64&type=comment'); ?> </ol> <?php if ( have_comments() ) : ?>
22
<div class="pagination">
23
<ul>
24 25
<li class="older"><?php previous_comments_link('Anteriores'); ?></li> <li class="newer"><?php next_comments_link('Novos');
26?></li> 27 28 29 30
<?php endif; ?> </div> <?php endif; ?> </ul>
31 32 33 34 35 36 37 38 39 40 41
<p>Autentificado como <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo 42 $user_identity; ?></a>. <a href="<?php echo wp_logout_url(); ?>" 43title="Sair desta conta">Sair desta conta »</a></p> <form action="<?php echo get_option('siteurl'); ?>/wpcomments-post.php" method="post" id="commentform"> <fieldset> <?php if ( $user_ID ) : ?> <div id="respond"> <h3>Deixe o seu comentrio!</h3> <?php if ( comments_open() ) : ?>
44 45 46 47
<label for="author">Nome:</label> <input type="text" name="author" id="author" <?php else : ?>
48value="<?php echo $comment_author; ?>" /> 49 50

<label for="email">Email:</label> <input type="text" name="email" id="email"
51value="<?php echo $comment_author_email; ?>" /> 52 53 54 55 56 57 58 59 60 61

<input type="submit" class="commentsubmit" value="Enviar Comentrio" /> 62 <label for="comment">Mensagem:</label> <?php endif; ?> <label for="url">Website:</label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" />
<textarea name="comment" id="comment" rows="" cols=""></textarea>
63 64 65 66 67
</form> <p class="cancel"><?php cancel_comment_reply_link('Cancelar 68Resposta'); ?></p> <?php comment_id_fields(); ?> <?php do_action('comment_form', $post->ID); ?> </fieldset>
69 70 71
</div>
</div> <?php else : ?> <h3>Os comentrios esto fechados.</h3>
<?php endif; ?>
Estilo dos Comentrios:
Com este template os nossos comentrios esto prontos e a funcionar, mas a aparencia e organizao no so as melhores por isso vamos adicionar estas linhas de css ao style.css do tema:
01#comments{
02 03 04 05 06
width:630px; float:left; border-top:1px solid #bebebe; }
#comments h3{
07
font-size:14px;
08 09 10
margin:20px 0; }
11ol.commentlist{ 12 13 14 15ol.commentlist li{ 16 17 18

ol.commentlist ul{ margin-bottom:30px; } list-style:none; }
19
margin:0px;
20 21 22 23 24 25
ol.commentlist ul li{ margin:20px 20px 20px 40px; }
26#respond{ 27 28
margin:0 0 30px 0; clear:both;
29 30
31#respond form label{ 32 33 34

text-align:right; float:left; clear:left; width:60px;
35 36 37
margin-right:10px; }
38#respond form input{ 39 40 41 42 43 44 45

width:400px; #respond form textarea{ float:left; float:left; width:250px; margin-bottom:10px; }
46 47 48 49
height:100px; margin-bottom:10px; }
50#respond form input.commentsubmit{ 51 52 53 54 55

float:left; margin-left:70px; }
56 57
Este estilo no o perfeito, se estiver a criar um tema mesmo para usar recomendamos que personalize ainda mais todos os atributos existentes para tirar o mximo dos comentrios. Como este cdigo e estilo os comentrios ficam assim:

Download dos ficheiros comments.php e style.css Download de todos os ficheiros criados at agora

Nesta 6 e ltima parte da srie sobre a criao de wordpress themes vamos falar nos 3 ficheiros que faltam ser criados para que o tema fique pronto: o sidebar.php, o functions.php e o footer.php. As outras partes desta srie podem ser encontradas nos seguintes links:

Como criar um Template WordPress Parte 1- Introduo Como criar um Template WordPress Parte 2 Style.css e Header.php Como criar um Template WordPress Parte 3 Index.php e Archive.php Como criar um Template WordPress Parte 4 Single.php, Page.php e 404.php Como criar um Template WordPress Parte 5 Comments.php
sidebar.php
O ficheiro sidebar.php responsvel pelo contedo da sidebar (lateral) do blog. A sua utilizao no obrigatria, mas como a maioria dos templates para wordpress tm duas colunas e o tema que estamos a criar tambm tem (contedo + barra lateral), vamos criar o nosso sidebar.php e adicionar o suporte a widgets.
Para que serve a sidebar?
Nesta srie de artigos temos recebido vrios comentrios e um deles perguntava qual era o uso que podemos dar a um espao ao lado do contedo. A resposta muito simples, a sidebar pode ser usada para colocar publicidade, um formulrio de pesquisa, as categorias, links de sites parceiros, etc.
O que so os widgets?
Os widgets permitem que voc adicione contedo numa parte do tema sem ter que editar o cdigo. Normalmente os widgets so usados nas sidebars, mas voc pode adicionar widgets em qualquer lugar.
Depois do tema estar preparado para trabalhar com widgets, v a Apresentao (Aparncia) > Widgets e s tem que arrastar os widgets para os espaos que o seu tema suporta.
Criando o sidebar.php
Agora que voc j sabe para que serve uma sidebar e o que so os widgets, vamos passar ao trabalho. Comece por criar um ficheiro chamado de sidebar.php ou abra o ficheiro que criamos na primeira parte do tutorial. Se ainda no fez o download dos ficheiros, faa-o aqui. Como algumas pessoas no sabem o que so os widgets e como que eles funcionam, fizemos este vdeo onde pode acompanhar toda a criao da sidebar e tambm a preparao do tema para receber widgets. A explicao em texto e todos os cdigos esto depois do vdeo. Comeamos por abrir o sidebar.php, este o cdigo que temos:
01 02 03
<h3>Widget</h3> <div id="sidebar"> <ul class="widget">
04 05 06 07 08 09 10 11 12 13 14
<li><a href="#">Pgina 1</a></li> <li><a href="#">Pgina 2</a></li> <li><a href="#">Pgina 3</a></li> <li><a href="#">Pgina 4</a></li> </ul>
<ul class="widget"> <h3>Widget</h3> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 2</a></li> <li><a href="#">Categoria 3</a></li> <li><a href="#">Categoria 4</a></li>
15 16 17
</ul>
</div>
Para comear vamos remover todo o cdigo que est dentro da div sidebar e substituir por este:
1
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?><?php endif; ?>
Este cdigo faz uma verificao para saber se o tema suporta widgets. Se suportar, ento ele vai mostrar os widgets da zona/rea com o nome Sidebar. E este o nosso sidebar.php final:
1<div id="sidebar"> 2
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?><?php endif; ?>
3</div>
O prximo passo registar esta zona para que o wordpress consiga guardar e mostrar os widgets no template. Isso feito no ficheiro functions.php.
functions.php
Este um dos ficheiros mais importantes num tema e usado para adicionar muitas funcionalidades a um wordpress theme. O functions.php pode ser usado para definir muita informao, adicionar suporte para vrias funcionalidades e at alterar a forma como o wordpress trabalha. Para um tema suportar widgets, preciso dizer ao wordpress que o tema tem um ou mais espaos que suportam widgets. neste ficheiro que temos que adicionar um cdigo que faz esse trabalho. A explicao do cdigo:

linha 1: inicio do cdigo php; linha 4: se a funo register_sidebar existir (se o wordpress suportar widgets), ento faz o que estiver entre as { } (linhas 5 e 13); linha 5: inicio do registo de uma zona para widgets; linha 7: define o nome da zona de widgets; linha 8: define o cdigo que fica antes do inicio do widget; linha 9: define o cdigo que fica no fim do widget; linha 10: define o cdigo que aparece antes de um ttulo (caso o widget tenha um ttulo); linha 11: define o cdigo que fica depois do ttulo; linha 12: termina o registo da zona; linha 13: termina o trabalho iniciado na linha 4; linha 15: termina o cdigo php.
01<?php
02/* WIDGETS */ 03 04if (function_exists('register_sidebar')) 05 06 07 08 09 10 11

)); { register_sidebar(array( 'name' => 'Sidebar', => '<div class="widget">', => '</div>', => '<h3>', => '</h3>',
'before_widget' 'after_widget' 'before_title' 'after_title'
12
}
13 14 15
?>
Neste caso no necessrio ter mais do que uma sidebar, mas se est interessado em saber como faz para ter duas ou mais zonas com suporte a widgets veja o vdeo em cima. Depois tem que guardar o fichiero e o nosso tema j suporta widgets:
footer.php
O footer.php o ficheiro responsvel pelo rodap do site e nele fica uma tag que insere alguns scripts no tema. Esta tag wp_footer importante e necessria para que alguns plugins funcionem. Em condies normais no h nenhuma alterao visvel no design quando temos esta tag no cdigo do tema. S tem que copiar e colar em qualquer parte do footer.php:
1<?php wp_footer(); ?>
Ns optamos por colocar a tag por baixo da linha dos crditos do site, por isso o footer.php final este:
1 2 3 4 5 6</div> 7
<div id="footer"> <p>© 2012 - Todos os Direitos Reservados</p> <?php wp_footer(); ?> </div>
8</body> 9</html>
E agora no h mais ficheiros para terminar, todo o nosso tema est pronto para funcionar!

Download dos ficheiros sidebar.php, functions.php e footer.php Download de todos os ficheiros criados at agora
Concluso e Dicas Finais
Neste momento o seu tema est pronto para ser usado online. Recomendamos que faa o download deste pdf que contm uma lista de tags que podem ser usadas nos seus temas. Pode tambm encontrar muita informao no WordPress Codex, um site onde pode encontrar todas as informaes necessrias para criar, melhorar e entender melhor os temas, plugins e o prprio wordpress. Esta srie est agora terminada e nos prximos artigos sobre cdigo, que esto disponveis na categoria Cdigo e Hacks, vamos ensinar a adicionar funcionalidades avanadas num tema. Para no perder esses artigos, recomendamos que nos siga nas nas redes sociais ou subscreva a newsletter gratuita para receber os artigos por email:

Como Criar Um WordPress Theme

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como Criar Um WordPress Theme

Enviado por

Direitos autorais:

Formatos disponíveis

Como Criar um WordPress Theme Parte 1

Ferramentas e Conhecimentos Necessrios

O que devo colocar em cada um destes ficheiros:

1</a></li> 2</a></li> 3</a></li> 4</a></li>

1</a></li> 2</a></li> 3</a></li> 4</a></li>

Separando a pgina HTML em partes

1</a></li> 2</a></li> 3</a></li> 4</a></li>

1</a></li> 2</a></li> 3</a></li> 4</a></li>

Como chamar outras partes dos temas

Download dos ficheiros do tutorial

Download dos ficheiros do tutorial

Como Criar um WordPress Theme Parte 2

0 0Description: WPTotal 2Author: WPTotal 0Author URI: http://www.wptotal.com/ 0 */ 3 0 0html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote 4,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,

0caption,th,td{font-weight:normal;text-align:left;} 0 7blockquote:before,blockquote:after,q:before,q:after{content:"";} 0 0b,strong{font-weight:bold;} 8

0 big{font-size:16px;} 0 9a img{border:0;} 0article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav, section{display:block;} 1 0h1,h2,h3,h4,h5,h6{font-weight:bold;}

0serif;color:#363636;} 1 2 0 1margin:20px auto; 3

0 1margin:10px; 6float:left; 0} 1 7 0 1font-size:24px; 8 0} 1 9 0#header h2{ 2font-size:18px; 0

0 2width:940px; 6margin:10px; 0float:left; 2 } 7 0 2#artigos{ 8

0 3margin-bottom:30px; 1float:left; 0} 3 2 0 3font-size:20px; 3 0} 3 4 0.artigo h2{ 3

5font-size:16px; 0margin-bottom:10px; 3} 6 0 3.artigo p{ 7margin-bottom:10px; 0} 3 8 0 3width:300px; 9

0 4} 2 0.widget h3{ 4 3font-size:14px; 0 4} 4

0 #footer{ 4 5width:940px; 0margin:10px; 4font-size:11px; 6

Este ser o resultado:

2?>; charset=<?php bloginfo('charset'); ?>" /> 3<title><?php wp_title(''); ?></title> 4

No fim destas alteraes todas temos o seguinte cdigo no nosso header.php:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); 08?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title(''); ?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php

10bloginfo( 'stylesheet_url' ); ?>" />

<?php wp_list_cats('sort_column=name'); ?> </ul> </div>

Como Criar um WordPress Theme Parte 3

<?php get_sidebar(); ?> </div>

<?php get_footer(); ?>

7<?php endif; ?>

Para entenderem o que cada linha faz, traduzimos para portugus:

Como aplicar este cdigo no index.php

09the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentrios', 10edit_post_link('(Editar)'); ?></p> 11 12 13 14 15

<p><?php the_content(); ?></p> </div> <?php endwhile?>

01<?php the_title(); ?> 02 03<?php the_permalink() ?> 04 05<?php the_author() ?> 06

07<?php the_time('d/M/Y') ?> 08 09<?php comments_popup_link('Sem Comentrios', '1 Comentrio', '%

10 11 12 13<?php the_content(); ?>

Vamos agora colocar estas tags na div do artigo. Fica assim:

3- <?php comments_popup_link('Sem Comentrios', '1 Comentrio', '%

<p><?php the_content(); ?></p>

<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

15next_posts_link('&laquo; Artigos Anteriores') ?></div> 16 17 18 19 20 21 22 23 24 25 26 27 28

Esta imagem mostra a nossa homepage com 2 posts e a navegao a funcionar:

Arquivo da Categoria "<?php echo single_cat_title(); ?>"

06<?php /* If this is a monthly archive */ } elseif (is_month()) { ?> 07

08<?php /* If this is a yearly archive */ } elseif (is_year()) { ?> 09 10 11

<?php /* If this is an author archive */ } elseif (is_author()) { ?> Arquivo do Autor

<?php /* If this is a paged archive */ } elseif (isset($_GET['paged'])

12&& !empty($_GET['paged'])) { ?> 13

<?php /* If this is a category archive */ if (is_category()) { ?>

08?>" 09 10 11 12 13 14(is_year()) { ?> 15 16 17 18 19 20 21 22

<?php /* If this is an author archive */ } elseif (is_author()) { ?> Arquivo do Autor

<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

<p><?php the_content(); ?></p> </div>

<?php endwhile?> <div class="navegacao">

<div class="recentes"><?php next_posts_link('&laquo; Artigos Anteriores') ?></div> <div class="anteriores"><?php

34previous_posts_link('Artigos Recentes &raquo;') ?></div> 35 36 37 38 39 40artigos.</p> 41 42 43

<?php get_sidebar(); ?> </div> <?php get_footer(); ?>

Download dos ficheiros

Como Criar um WordPress Theme Parte 4

<?php else: ?>

15next_posts_link('« Artigos Anteriores') ?></div> 16 17 18 19 20 21 22 23 24 25 26 27 28

<div class="recentes"><?php next_posts_link('« Artigos Anteriores') ?></div> <div class="anteriores"><?php

34previous_posts_link('Artigos Recentes »') ?></div> 35 36 37 38 39 40artigos.</p> 41 42 43