-
Srie Sobre Criar um Template WordPress
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.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21
22 23 24 25 26 27 28 29 30 31 32 33
Pgina de HTML Titulo do Site Descrio do site Pgina 1 Pgina 2
Pgina 3 Pgina 4 Titulo do artigo 1 Postado por administrador em
16/01/2012 Conteudo do artigo Titulo do artigo 2 Postado por
administrador em 16/01/2012
-
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
55 56 57 58 59 60 61 62 63 64
Conteudo do artigo Widget Pgina 1 Pgina 2 Pgina 3 Pgina 4 Widget
Categoria 1 Categoria 2 Categoria 3 Categoria 4 2012 - Todos os
Direitos Reservados
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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20
Pgina de HTML Titulo do Site Descrio do site Pgina 1 Pgina 2
Pgina 3 Pgina 4
-
21 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: 01 02 03 04 05 06 07 08
09 10 11 12 13 14 15 16 17
Titulo do artigo 1 Postado por administrador em 16/01/2012
Conteudo do artigo Titulo do artigo 2 Postado por administrador em
16/01/2012 Conteudo do artigo
No colocamos o cdigo da sidebar no passo anterior, porque esse
cdigo deve de ficar nosidebar.php, um ficheiro que contm todo o
contedo da sidebar. 01 02 03 04 05 06 07 08 09 10 11 12 13 14
15
Pgina 1 Pgina 2 Pgina 3 Pgina 4 Categoria 1 Categoria 2
Categoria 3 Categoria 4
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. 1 2 3 4 5 6 7 8
2012 - Todos os Direitos Reservados
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):
1 2 3 4 5
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:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19
Titulo do artigo 1 Postado por administrador em 16/01/2012
Conteudo do artigo Titulo do artigo 2 Postado por administrador em
16/01/2012 Conteudo do artigo
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
Concluso
-
Neste primeiro artigo demos os primeiros passos na criao de um
template para wordpress. Comeamos por saber onde que os temas esto,
como so organizados, quantos ficheiros tem um tema, aprendemos a
separar uma pgina HTML pelos vrios ficheiros do tema e tambm
introduzimos pela primeira vez PHP nas pginas para chamar outras
partes do tema. O mais bsico est feito.
No prximo artigo vamos falar no stylesheet e tambm no header.php
por isso fique atento! Se ainda no acompanha o wptotal,
recomendamos que passe pela pgina de subscrio para saber como nos
pode seguir
Se tiver alguma dvida, deixe um comentrio. 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 nomestyle.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: 001 002 003
/* Theme Name: WPTotal Theme URI: http://www.wptotal.com/
Description: WPTotal Author: WPTotal
-
004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019
020 021
Author URI: http://www.wptotal.com/ */
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,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;outline:0;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;} ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
i,em{font-style:italic;} b,strong{font-weight:bold;}
small{font-size:10px;} big{font-size:16px;} a img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
h1,h2,h3,h4,h5,h6{font-weight:bold;}
a:link,a:visited{color:#0066cc;text-decoration:none;outline:0;}
a:hover,a:active{color:#0055a9;text-decoration:none;outline:0;}
body{background:#f4f4f4;font:normal 13px/150% Arial, Helvetica,
sans-serif;color:#363636;} #corpo{ margin:20px auto; width:960px;
background:#fff; } #header{ width:940px; margin:10px; float:left;
}
-
022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037
038 039
#header h1{ font-size:24px; margin-bottom:10px; } #header h2{
font-size:18px; margin-bottom:20px; } #nav{ width:940px; } #nav li{
display:inline; margin-right:30px; } #conteudo{ width:940px;
margin:10px; float:left; } #artigos{ width:630px; float:left; }
.artigo{ width:630px;
-
040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055
056 057
margin-bottom:30px; float:left; } .artigo h1{ font-size:20px;
margin-bottom:10px; } .artigo h2{ font-size:16px;
margin-bottom:10px; } .artigo p{ margin-bottom:10px; } #sidebar{
width:300px; float:right; } .widget{ width:300px;
margin-bottom:20px; } .widget h3{ font-size:14px;
margin-bottom:10px; }
-
058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073
074 075
#footer{ width:940px; margin:10px; font-size:11px;
text-align:center; }
-
076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091
092 093
-
094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 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 e (apague as duas linhas de cdigo que esto l): 1 2 3
- 4 5 6
-
1 Se voc preferir mostrar as pginas em vez das categorias, use a
seguinte tag: 1 No fim destas alteraes todas temos o seguinte cdigo
no nosso header.php: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
16 17 18 19 20 21 22
-
Download dos ficheiros
! Download dos ficheiros style.css e header.php ! Download de
todos os ficheiros criados at agora
Concluso
Nesta segunda parte da srie de artigos onde ensinamos a criar
wordpress themes, comeamos j a trabalhar nos ficheiros individuais
que fazem parte de um tema. J temos a aparncia desenhada (no
style.css) e as tags mais importantes no cabealho (header.php).
No prximo artigo vamos falar em dois ficheiros que so
responsveis por mostrarem os artigos na pgina inicial e nas pginas
de arquivo (categorias, tags, etc). Se no quer perder nenhum
artigo, passe pela pgina de subscrio e esteja sempre atualizado
sobre o que publicamos aqui no wptotal. 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 02 03 04 05
06 07 08 09 10 11 12 13
Titulo do artigo 1 Postado por administrador em 16/01/2012
Conteudo do artigo Titulo do artigo 2 Postado por administrador em
16/01/2012 Conteudo do artigo
-
14 15 16 17 18 19
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 2 3 4 5 6
7
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 .
Dentro do loop fica a div do post ( ) depois da primeira linha de
cdigo.
Resultado:
-
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20
21
-
2 3 4
Este o CSS para o segundo cdigo, copie e cole em qualquer parte
do style.css: 01 02 03 04 05 06 07 08 09 10 11 12
.navegacao{ width:630px; float:left; } .recentes{ float:left; }
.anteriores{ float:right; }
E agora depois do 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 2 3 4 5
Nada Encontrado Erro 404 Lamentamos mas no foram encontrados
artigos.
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 02 03 04 05 06 07 08 09 10 11 12 13
Vamos agora colocar estas tags na div do artigo. Fica assim: 1 2
3 4 5
-
04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
25 26 27 28
-
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 02 03 04
05 06 07 08 09 10 11 12 13 14
Arquivo da Categoria "" Arquivo de Arquivo de Arquivo de Arquivo
do Autor Arquivo do Blog
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 02 03 04 05 06
07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Arquivo da Categoria "" Arquivo de Arquivo de Arquivo de Arquivo
do Autor Arquivo do Blog
-
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
Nada Encontrado Erro 404 Lamentamos mas no foram encontrados
artigos.
Ao entrar numa pgina de arquivo a mensagem aparece e muda
conforme o arquivo que est a ver:
Download dos ficheiros
! Download dos ficheiros index.php e archive.php ! Download de
todos os ficheiros criados at agora
-
Concluso
Neste momento j temos 4 ficheiros prontos: style.css,
header.php, index.php e archive.php. No prximo artigo vamos falar
em trs ficheiros que tambm so muito importantes: single.php,
page.php, 404.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 ( ): 1 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 3 4 5 6
por esta linha de cdigo: 1
-
E este o cdigo final: 01 02 03 04 05 06 07 08 09 10 11 12 13 14
15 16 17 18 19 20 21 22 23 24 25 26
-
Alm da tag dos comentrios e da alterao no loop, fizemos uma
alterao que importante em termos de SEO: no ttulo usamos uma tag em
vez da . 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. 1
Postado por em - 1 Com estas alteraes, temos este cdigo: 01 02 03
04 05 06 07 08 09 10 11
-
12 13 14 15 16 17 18 19 20 21 22
Erro 404 Lamentamos mas no foram encontrados artigos.
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 02 03
-
04 05 06 07 08 09 10 11 12
Erro 404 - No Encontrado Lamentamos, mas o que voc procura no
foi encontrado.
E o nosso 404.php est pronto! 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 ocomments.php. Este ficheiro chamado pela tag 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: 01 02 03 04 05 06 07
Este artigo est protegido por password. Insira-a para ver os
comentrios.
-
08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 30 31 32 33 34 35 36
return; } ?> Deixe o seu comentrio!
-
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
58 59 60 61 62 63 64 65
Autentificado como
-
66 67 68 69 70 71 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 02 03
04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19
#comments{ width:630px; float:left; border-top:1px solid
#bebebe; } #comments h3{ font-size:14px; margin:20px 0; }
ol.commentlist{ list-style:none; } ol.commentlist li{
margin-bottom:30px; } ol.commentlist ul{ margin:0px; }
-
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48
ol.commentlist ul li{ margin:20px 20px 20px 40px; } #respond{
margin:0 0 30px 0; clear:both; } #respond form label{ float:left;
clear:left; width:60px; text-align:right; margin-right:10px; }
#respond form input{ float:left; width:250px; margin-bottom:10px; }
#respond form textarea{ float:left; width:400px; height:100px;
margin-bottom:10px; } #respond form input.commentsubmit{
-
49 50 51 52 53 54 55 56 57
float:left; margin-left:70px; }
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:
-
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 04 05 06 07 08
Widget Pgina 1 Pgina 2 Pgina 3 Pgina 4
-
09 10 11 12 13 14 15 16 17
Widget Categoria 1 Categoria 2 Categoria 3 Categoria 4
Para comear vamos remover todo o cdigo que est dentro da div
sidebar e substituir por este: 1 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 2 3
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 02 03 04 05 06 07 08 09 10
11 12 13 14 15
-
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 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
2012 - Todos os Direitos Reservados
-
7 8 9
E agora no h mais ficheiros para terminar, todo o nosso tema est
pronto para funcionar!
Download dos ficheiros
! 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 odownload 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: