Wordpress Templates

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes
Criar Conta
HOME
Recuperar Password
Entrar na Conta
TEMPLATES WORDPRESS
11 ALUNOS ONLINE \\ ESCOLAS
PLUGINS WORDPRESS
HOSPEDAGEM
SUBSCREVER
ARQUIVOS
SOBRE
CONTACTOS
Home / Tutorials Wordpress /Como Criar Um Template WordPress Parte
Como Criar um Template WordPress

Parte I
28
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
Pesquisar...
09-11-2010, em Tutorials Wordpress, por Paulo Faustino
Subscreva a Newsletter:
Subscrever!
Ol Visitante! Se novo por aqui, talvez queira subscrever o

nosso RSS Feed para actualizaes dirias.
H algum tempo que desejvamos iniciar esta srie de artigos, a partir da qual esperamos
12
ajud-lo a aprender como criar um template WordPress. Esta srie ir analisar passo-a-
tweets
passo todas as diferentes fases do desenvolvimento de um template para WordPress, e para
retweet
que voc consiga analisar e implementar todas elas, decidimos partir esta ideia em vrios artigos mais
simples de assimilar e explorar. No final da srie, certamente conseguir criar seu template
WordPress!
Os templates wordpress so hoje em dia cada vez mais procurados e podem ser facilmente criados
com o intuito de serem vendidos em mercados como a Theme Forest ou a Mojo Themes. Qualquer
pessoa que deseje entrar neste mundo fascinante do desenvolvimento de templates para wordpress,
pode posteriormente comercializ-los nesses mercados e comear a ganhar dinheiro produzindo
templates de qualidade.
Se no deseja perder pitada desta nova srie sobre Como criar um Template WordPress, considere
assinar a nossa newsletter e receber todos os prximos artigos por email e comodamente. grtis!
Endereo de Email:
Subscrever!
http://www.escolawp.com/2010/11/como-criar-um-template-wordpress/[30/11/2010 10:35:00]
Pesquisar
Vejamos algumas das competncias do template que vamos desenvolver ao longo dos prximos
artigos:
Otimizao para motores de busca
Templates Populares:
Marcao com suporte Microformato da Google

Semntica da estrutura de marcao vlida e lgica que pode ser usada em qualquer template
Layouts de CSS inteligentes
Classes dinmicas para o corpo, postagens e comentrios
Trackbacks e comentrios em rvore separados
2 reas para widgets que desaparecem quando no esto ocupadas
Tudo o resto que normal num template WordPress
No final desta srie de tutoriais, com o cdigo feito e pronto a ser implementado, voc poder fazer
praticamente tudo aquilo que desejar com ele. Voc pode inclusive olhar para o resultado final como a
sua framework WordPress de trabalho.
Artigos Populares este Ano

168
20 sites incrveis que usam WordPress

e ningum imagina!
88
10 novidades fantsticas do novo

WordPress 3.0
FERRAMENTAS DE DESENVOLVIMENTO
Antes de comear a construir nosso template WordPress, necessrio que tenhamos todas as nossas
ferramentas mo. Neste primeiro artigo, iremos analisar e recomendar as melhores ferramentas
para construir um ambiente de trabalho e de testes do qual voc ficar orgulhoso.
prprio computador. No entanto, para o fazer voc precisa tornar seu computador num servidor
local, aproximando-o ao mximo a um servidor de internet (Apache, MySQL e PHP). Isto significa que
voc poder instalar o WordPress em seu prprio computador.
50
10 coisas para fazer depois de

instalar o WordPress
SERVIDOR DE TESTES LOCAIS: XAMP OU MAMP

A melhor forma de desenvolver seu novo template WordPress fora da internet, a partir do seu
75
Os 150 melhores Templates

WordPress grtis de Janeiro a
Agosto
45 pginas de erro 404

incrveis e criativas
10 cheat sheets (fichas de
cdigo) para o ajudar com
WordPress
48
46
Instalar estes softwares de servidor pode ser uma tarefa relativamente complicada, mas felizmente
existem alguns softwares automticos que realizam essas tarefas automaticamente por ns. Se voc
Entrar
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 verso do WordPress e instal-la corretamente
em nosso servidor de testes. Se instalou o XAMP e por ventura tiver dvidas a instalar o WordPress
localmente, siga estas instrues. Se estiver a usar o MAMP siga estas instrues.
CONTEDO DE TESTES
Escola Wordpress no Facebook

Voc curte isto.Curtir
(desfazer)Pgina do
Curtir administradorErroVoc curte
isto.Curtir (desfazer)Pgina
do administradorErro
120119 pessoas curtiram Escola
Wordpress

A sua instalao do WordPress ir necessitar de contedo para testes. No seu painel de administrao,
v no menu Ferramentas > Importar e escolha a opo WordPress da listagem. Agora apenas
iremos necessitar de informao em formato WXR.
Eis algumas opes do mercado:
Os Mais Comentadores do Ms
Escola Dinheiro (40)
Web Feeds Brasil (17)
junichi_y (15)
The Theme Development Checklist test data

The Sandbox Dummy Content
Obviamente que estas opes de contedo de testes tm os seus prs e contras. Obviamente que
quanto mais contedo voc conseguir importar melhor. Dessa forma voc garante que nenhuma das
funcionalidades esquecida. Se desejar, poder tambm criar o seu prprio contedo de testes.
Quando achar que est tudo OK, use a navegao por postagens para pesquisar atravs de cada um
dos posts que acabou de importar/criar. Verifique tambm os arquivos mensais e anuais, bem como
os arquivos de categoria. Se faltar alguma coisa, poder sempre tentar adicionar.
UM EDITOR DE TEXTO
Voc no necessita de nenhum software visualmente atrativo e com grficos para criar um template
WordPress. Voc precisa apenas de um Editor de Texto. Mas como em tudo na vida, uns so melhores
que os outros. Para Windows, voc pode experimentar o Notepad++. grtis e open-source. Para
Mac, recomendo vivamente o Text Wrangler que o editor que uso, embora o Smultron seja muito
bom tambm. 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 dvida o Firefox. Especial com dois plugins que tornam a sua vida
bem mais fcil quando se pretende desenvolver templates WordPress. O plugin Web Developer
adiciona uma toolbar que lhe oferece uma srie de funcionalidades para inspeccionar e remover erros
de cdigo do seu template, desde desabilitar todos os estilos CSS validao local do HTML. O plugin
Firebug tambm ele indispensvel. Com o Firebug ligado voc pode clicar em qualquer elemento da
janela de seu browser e ver como ele se parece ao nvel de cdigo 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 tambm a leitura deste tutorial para aprender HTML5. Embora o Tutorial no
lhe ensine tudo aquilo que ir precisar, tanto a nvel de HTML como de CSS, sempre uma boa
primeira abordagem
PHP
Relativamente ao PHP, tambm ele importante no desenvolvimento de um template wordpress. No
entanto iremos criando a nossa srie de artigos de forma didtica para que no tenha qualquer tipo de
problema no desenvolvimento de seu template WordPress. Para conseguir realizar esta srie de artigos
com eficincia, voc apenas necessita do bsico do PHP, embora estejamos c para ajud-lo em tudo
o que for necessrio.
EST PREPARADO PARA COMEAR?

Este primeiro artigo tem como objetivo deixar tudo preparado para que possamos ento avanar com
o desenvolvimento de nosso Template WordPress. Contamos com a sua participao e as suas
dvidas. Participe com seus comentrios!
Informao Virtual (8)

Felipe (5)
Marcelo Souza (5)
Alessander Raker (4)
Carambola Digital (3)
Claudio Gomes (3)
Design Anhembi (3)
Temas
Dicas de Segurana
Icons para Blogs
Notcias
Plugins Wordpress
Showcase
Themes BuddyPress
Themes Wordpress
Truques e Dicas
Tutorials Wordpress
Verses Wordpress
Amigos e Parceiros
Apostas Online
Casino Online
Classificados Animais
Diretrio Artigos
Diretrio Blogs
Futebol em Directo
Ganhar Dinheiro
Meteorologia
Motos Usadas
Mundo BTT
Ofertas

Psicologia
Vagas de Emprego
Widescreen Wallpapers
Endereo de Email:
Templates Wordpress Premium

Subscrever!
At J!
Voc curte Como Criar um Template
Autor: Paulo Faustino

Blog do Autor | Artigos do Autor: Paulo Faustino
Paulo Faustino foi o fundador da Escola Dinheiro e Escola Wordpress. um
empreendedor e blogueiro que dedica a sua vida produo e partilha de
contedos de grande qualidade, contando j com alguns dos mais
reconhecidos blogs de Portugal e do Brasil.
Templates Wordpress que Recomendamos:
Gostou deste artigo? Ento torne-se f do Blog no Facebook!

Entrar

Voc curte Escola Wordpress.Curtir (desfazer)Pgina do
Curtir administradorErroVoc curte isto.Curtir (desfazer)Pgina do
administradorErro
120119 pessoas curtiram Escola Wordpress
Artigos Recomendados
Como Criar um Template WordPress Parte
II
Como criar um Template Wordpress Parte V
Como criar um Template Wordpress Parte

IV
III
Comentrios dos Alunos
Ol Paulo.
Ricardo Silva
Isto vai ser uma excelente srie de artigos. Irei seguir atentamente de
09.11.2010
forma a no perder pitada.
Estou a pensar em modificar novamente a minha template e com isso

preciso de umas lies. Criar uma de raiz era o ideal. Agora sim, vou
aprender alguma coisa.
Um abrao
15 Templates Wordpress incrveis do
Marketplace Mojo-Themes
RESPONDER
Ol Ricardo, obrigado pelo comentrio e pelos elogios. No final da

srie, acredito que teremos explicado de forma prtica e simples
como criar um template WordPress. Estamos entusiasmados com o
progresso e espero que sinceramente que a srie seja um sucesso!
Se est para modificar seu template ou criar um novo, ento a

FrameWork em que estamos a trabalhar vai-lhe ser bastante til
15 Plugins Premium Wordpress que

valem uma fortuna!
10 plugins profissionais para Wordpress
da CodeCanyon
10 Templates Wordpress grtis para
galerias
29 Novos Templates Wordpress
Profissionais a no perder
150 Melhores Templates Wordpress
Grtis (Janeiro-Agosto)
Abraos
5 Plugins para criar um site de ECommerce em Wordpress

Paulo Faustino
RESPONDER
18.11.2010
5 Plugins para criar um site de Emprego

em Wordpress
5 Plugins para criar um site de Games
Flash em Wordpress
Paulo, parabns viu!!! No vejo a hora de voc enviar a parte II para

podermos devorar esses artigos cada vez mais!!!!
Jeferson Ivo
Os 10 Wordpress Themes mais incrveis

da ThemeForest
20 Sites incrveis que usam Wordpress e
ningum imagina!

09.11.2010
Valeu
!!!!!!!
10 coisas para fazer depois de instalar o

Wordpress
espectaculares para criar blog
RESPONDER
10 Templates Wordpress para criar

pginas em construo
Ol Jeferson, obrigado pelo comentrio e por seu entusiasmo!
Espero que esta nova srie lhe seja muito til!
20 Templates de E-Commerce para

Wordpress
46 Novos Templates grtis para
Wordpress 3.0+
Obrigado pelo apoio!
10 Buddypress Themes Gratuitas

Paulo Faustino
RESPONDER
18.11.2010
+1000 cones de mdias sociais para

blogs
50 Templates Wordpress lanados em
Outubro 2010
Muito bom!
Vou acompanhar a srie para aprimorar ainda mais os meus
Alexandre
Kucarcz
Cordeiro
conhecimentos!
Assinar o Blog
Escolha os contedos a assinar:
Parabns!
10.11.2010
RESPONDER
RSS COMPLETO
RSS RESUMIDO
POR EMAIL
TWITTER
CATEGORIAS
NEWSLETTER
Ol Alexandre, obrigado pelo comentrio! Boa sorte com a

assimilao desta nova srie e tomara que possa aprender alguma
coisa nova com ela
Ficou Confundido? Clique aqui!
Abraos
Paulo Faustino
RESPONDER
18.11.2010
Estava esperando por algo assim. O codex do wordpress bom, mas

prefiro os exemplos prticos, pelo menos depois de ter lido a
Maicon Pinto
documentao fica mais fcil de entender algumas coisas.
10.11.2010
Assino a algum tempo o feed, mas tinha que agradecer por este
artigo. o que me faltava. Aguardando os prximos.
Valeu mesmo, e mais sucesso!
RESPONDER
Ol Maicon, obrigado pelo comentrio! De facto existe muito pouco

(ou nenhum) material de qualidade em portugus ensinando

passo-a-passo como criar um template WordPress. Espero que
esta srie seja uma mais-valia para todos os nossos leitores e
tambm para todos os futuros leitores que chegarem at ns!
Obrigado pelo apoio e pelos seus elogios!
Paulo Faustino
RESPONDER
18.11.2010
Poxa vida eu estava precisando exatamente disto e caiu como luva

para mim o seu tutorial. Estou ansioso para as proximas lies.
Alessander
Raker
Obrigado e parabns pelo post e iniciativa
10.11.2010
RESPONDER
Ol Alessander, obrigado pelo comentrio! Fico contente que

tenhamos comeado esta srie na hora certa e que a mesma lhe
possa ser muito til no futuro! Fico a torcer por isso
Obrigado por seu apoio e por seus elogios!
Paulo Faustino
RESPONDER
18.11.2010
Finalmente encontrei um tutorial em portugues sobre a criao de

templates, acho mesmo que estavamos precisando de algo do tipo. Eu
Marcelo Souza
15.11.2010
ainda no programo em php, mas tive algumas experiencias com C e

Perl, ento acho que no vai ser dificil. Espero que a serie seja muito
interessante e vou procurar aprender mais sobre php para poder
acompanhar
Marcelo Souza
O Cascateiro
RESPONDER
Ol Marcelo, obrigado pelo comentrio! Nossa srie explica tudo

passo-a-passo, para que todos aqueles que no entendem ainda
muito de PHP, CSS ou HTML, possam ficar compreendendo pelo
menos todo o funcionamento de um template WordPress. Estamos
bastante entusiasmados com esta srie, e penso que no final
valer bastante a pena!
Abraos
Paulo Faustino
RESPONDER
18.11.2010
finalmente encontrei um tutorial bakna, sobre criao de templates

do worpress, estava procurando faz tempo, at me inscrevi em um
Leandro
Ferreira
18.11.2010
evento sobre o wordpress que ocorrera dia 20/11 espero aprender

algo neste evento, pois estou pagando uma grana, caso tenha
novidades neste evento irei postar aqui para todos.
com certeza este tutorial vai me ajudar muito.
Parabens pela iniciativa.
Valeu. abs
RESPONDER
Ol Paulo, parabns pela iniciativa!
Emerson
Uma dvida
24.11.2010
Para desenvolver um template wp, necessrio trabalhar off-line?

Complica se eu trabalhar on-line?
Digo isso pois j tenho um wp instalado em um servidor fora do meu

pc.
Forte abrao.
RESPONDER
Ol Paulo,
comecei a estudar o seu Tutorial e percebi que na parte CONTEDO
Marcello
25.11.2010
DE TESTES os links no esto funcionando

The Theme Development Checklist test data
The Sandbox Dummy Content,
ou assim mesmo? Pelo que entendi, vc quer que pegue algum
contedo de blog para inserir. Seria Isto?
Parabns pela iniciativa.
RESPONDER
Comente o Artigo!
Nome
E-mail
URL (opcional)
Comentar!
Notificar-me de novas respostas aos comentarios!
Este site SEU, portanto, sempre que tiver

sugestes
de
melhorias,
recomendaes
contedos
ou
simplesmente
algum
tipo
de
TORNE-SE MEMBRO!
MEMBROS PREMIUM!
de
feedback para dar, ns gostaramos imenso de o

ouvir. Ajude-nos a melhorar! Ns tentaremos
comprometer-nos com esse objectivo!
FAZER SUGESTO
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
CRIADO POR MANOPLIA
HOSPEDADO POR PT WEB SERVICES

2008-2010 | TODOS OS DIREITOS RESERVADOS
Criando a Estrutura HTML do Template Wordpress | Templates e Wordpress Themes

Criar Conta
HOME
Recuperar Password
Entrar na Conta
TEMPLATES WORDPRESS
PLUGINS WORDPRESS
HOSPEDAGEM
SUBSCREVER
ARQUIVOS
SOBRE
CONTACTOS
Home / Tutorials Wordpress /Como Criar Um Template WordPress Parte II
Como Criar um Template WordPress

Parte II
17
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
Pesquisar...
Subscrever!
PeixeUrbano.com.br/Cadastre -se
Anncios Google

tweets
retweet
WordPress!
Endereo de Email:
Subscrever!
http://www.escolawp.com/2010/11/criando-estrutura-html-do-template-wordpress/[30/11/2010 10:36:20]
Pesquisar
artigos:


168

e ningum imagina!
88

WordPress 3.0
CRIANDO A
WORDPRESS
ESTRUTURA
HTML
DO
TEMPLATE
A estrutura HTML do seu Template WordPress fundamental para o trabalho que iremos desenvolver
ao longo das prximas sesses. 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 cdigo e cdigo significativo. Isso , usando o mnimo de marcaes (HTML tags) possvel e ao
mesmo tempo ter a certeza de que essas marcaes so significativas, usando classes semnticas e
75

Agosto
50

WordPress
48
46
nomes de ID que apontam para o contedo (class=widget-area ao invs de class=sidebar-left).
Agora, quando iniciarmos a programao do Template WordPress (ou qualquer outro template para
Entrar
outro CMS) necessrio existir um equilbrio entre pouco cdigo, com muito pouca estrutura,
incluindo elementos div desnecessrios, e cdigo que seja significativo e importante.
Voc provavelmente j viu a tag div no passado se por ventura olhou para o cdigo de um site ou de
um template WordPress. Pense nelas como recipientes para o cdigo HTML recipientes que so
fceis de manusear para manipular cdigo HTML com CSS. Obviamente, iremos ter algumas tambm.
Mas no queremos muitas ou que no faam sentido. E queremos estrutura suficiente usando a tag
div de forma a podermos reutilizar o nosso cdigo para mltiplos blogs e layouts. Ns queremos
programar algo que nos possa ser til no futuro tambm.

(desfazer)Pgina do
Wordpress
ESTRUTURA
WORDPRESS
HTML
PARA
SEU
TEMPLATE
Vamos dar uma vista de olhos estrutura HTML que iremos utilizar para o corpo (body) do nosso
Template WordPress.
1
2
3
4
5
6
7
8
9
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
37
38
39
40
41
42
43
44
<html>
<head>
head>
<body>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding">
div>
<div id="access">
div>
div>
div>
<div id="main">
<div id="container">
<div id="content">
div>
div>
<div id="primary" class="widget-area">

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

div>
div>
<div id="footer">
<div id="colophon">
<div id="site-info">
div>
div>
div>
div>
body>
html>
Copie e cole este cdigo 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
junichi_y (15)
Felipe (5)
Marcelo Souza (5)
Claudio Gomes (3)
Design Anhembi (3)
Temas
Dicas de Segurana
Icons para Blogs
Notcias
Plugins Wordpress
Showcase
Themes BuddyPress
Themes Wordpress
primeiro.
Truques e Dicas
UM PEQUENO GUIA SOBRE O HTML DO SEU TEMPLATE

WORDPRESS
Tutorials Wordpress
Verses Wordpress
Primeiro, o atributo de classe no wrapper (invlucro) intitulado hfeed. A classe hfeed faz parte do
esquema de microformato. Em linguagem simples, isto significa que adicionando a classe hfeed
nossa pgina, ela ir dizer a qualquer mquina que leia o nosso site (como por exemplo os robots dos
motores de busca ou outros servios) que o nosso site publica contedo sindicado, como por exemplo
artigos/postagens. Voc ir ver uma srie de classes deste gnero medida que formos avanando.
Amigos e Parceiros
Apostas Online
Casino Online
Na rea central do nosso HTML ir reparar que temos duas reas para widgets que surgem depois da
nossa rea de contedos. E provavelmente tambm reparou que o nosso contedo est envolvido
numa div container (invlucro). Estes pontos so chave. Isto faz com que o nosso contedo seja
carregado antes das barras laterais aos olhos dos motores de busca (e dos leitores) mas usando uma
tcnica de CSS com margens negativas poderemos tornar este template num template de 1, 2, ou 3
colunas com pouco cdigo 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.
CONSEGUIU ACOMPANHAR? TEM DVIDAS?

Este segundo artigo tem como objetivo deixar a nossa estrutura HTML preparada para posteriormente
comearmos a trabalhar em cima. O mais importante neste momento que voc compreenda os
Diretrio Artigos
Diretrio Blogs
Futebol em Directo
Ganhar Dinheiro
Meteorologia
Motos Usadas
Mundo BTT
Ofertas

passos que vamos dando e caso tenha dvidas, poder coloc-las sem problema. Contamos com a
sua participao e as suas dvidas. Participe com seus comentrios!
Psicologia
Vagas de Emprego
Se no deseja perder pitada desta nova srie sobre Como criar um Template WordPress,
considere assinar a nossa newsletter e receber todos os prximos artigos por email e comodamente.
grtis!

Endereo de Email:
Subscrever!
At J!
Voc curte Criando a Estrutura HTML do


Entrar

administradorErro
Como Criar um Template Wordpress Parte I

IV
III
Muito bom o tutorial, s acho que poderia ter esmiuado mais o

cdigo para que possamos entender a funo de cada id, como
jcmartim
masthead, branding, access etc.
11.11.2010
RESPONDER
Ol jcmartim, obrigado pelo comentrio! Iremos falar de todos os

IDs nas prximas postagens da srie. Esta foi meramente
introdutria quanto estrutura do HTML do template, mas ao longo
das postagens, especialmente aquelas em que comearmos a
trabalhar no CSS, explicarmos passo-a-passo o que faz e para que
serve cada um desses IDs.
valem uma fortuna!
Abrao

da CodeCanyon
Paulo Faustino
RESPONDER
18.11.2010

galerias
Parabns Paulo!!!! Continue assim.

S uma dvida e j aproveitando o bond do amigo jcmartim, esses
Jeferson Ivo

ids sero listados via CSS depois correto?
Valeu!

em Wordpress
12.11.2010

Flash em Wordpress
RESPONDER
Ol Jeferson, obrigado pelo comentrio! Esses IDs sero listados

da ThemeForest
ningum imagina!

em CSS sim, e como referi ao colega jcmartim sero todos eles
explicados ao longo da srie
Paulo Faustino
18.11.2010
RESPONDER

Wordpress
pginas em construo
Wordpress
Boa noite, Paulo Faustino.
dr.williams
Excelente iniciativa esta sua, o que me faz pensar como arruma tempo
12.11.2010
para escrever tantos tpicos em tantos sites que voc tem; a respeito
deste tpico em si, creio que seja o essencial para quem est
comeando a mexer com este tipo de programao.

Wordpress 3.0+
blogs
Parabns
Outubro 2010
Williams Mampian Macedo
P.S.: Se depois voc quiser partilhar a sua estratgia de trabalho para

dar a ateno que tantos blogs-sites precisam, vou gostar de saber.
Assinar o Blog
Abraos
RESPONDER
Ol Dr. Williams, obrigado pelo comentrio! Fico contente de

conseguir ajudar outros profissionais e blogueiros a melhorarem
suas competncias tcnicas, principalmente porque sinto que
existe muita falta de informao de qualidade em portugus
Quanto minha capacidade de trabalho, penso que est alicerada

em dois aspectos muito importantes: 1 porque trabalho a tempo
inteiro como blogueiro e 2 porque sou apaixonado por aquilo que
fao e sou bastante exigente comigo mesmo em matria de
objetivos e produo de contedos de qualidade. Mas esse assunto
provavelmente dar um bom artigo na Escola Dinheiro
Abraos
Paulo Faustino
RESPONDER
18.11.2010
Aproveitando a deixa do jcmartim, eu tambm gostaria de saber a

funo exata de cada id, assim fica bem mais facil compreender como
Marcelo Souza
e porque estamos colocando cada pedao do codigo.
15.11.2010
Mas com esse segundo tutorial ja deu pra ver que vem coisa
interessante pela frente.
RSS COMPLETO
RSS RESUMIDO
POR EMAIL
TWITTER
CATEGORIAS
NEWSLETTER

E claro, eu tambm gostaria muito de saber qual a sua estrategia
para escrever em tantos sites e ao mesmo tempo.
RESPONDER
Ol Marcelo, obrigado pelo comentrio! Penso que a resposta a

suas duas questes est respondida em cima aos comentrios de
nossos colegas
Pode ficar tranquilo que estaremos explicando
tudo passo-a-passo para que no fiquem dvidas
Paulo Faustino
18.11.2010
RESPONDER
Comente o Artigo!
Nome
E-mail
URL (opcional)
Comentar!

sugestes
de
melhorias,
recomendaes
contedos
ou
simplesmente
algum
tipo
de
TORNE-SE MEMBRO!
MEMBROS PREMIUM!
de

FAZER SUGESTO
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
CRIADO POR MANOPLIA

Estrutura do Template e Diretrio Wordpress | Templates e Wordpress Themes

Criar Conta
HOME
Recuperar Password
Entrar na Conta
TEMPLATES WORDPRESS
PLUGINS WORDPRESS
HOSPEDAGEM
SUBSCREVER
ARQUIVOS
SOBRE
CONTACTOS
Como criar um Template WordPress

Parte III
13
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
Pesquisar...
Subscrever!
Anncios Google

tweets
retweet
WordPress!
Endereo de Email:
Subscrever!
http://www.escolawp.com/2010/11/estrutura-do-template-e-diretorio-wordpress/[30/11/2010 10:38:10]
Pesquisar
artigos:


168

e ningum imagina!
88

WordPress 3.0
ESTRUTURA DO TEMPLATE E DIRETRIO

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 slido.
75

Agosto
50

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 seutemplate mas ele pode tomar o nome que voc desejar e crie tambm os seguintes ficheiros no

seu diretrio (no se preocupe que eles ficaro em branco at aos prximos passos).
index.php

WordPress
48
46
header.php
sidebar.php
footer.php
Entrar
functions.php
style.css
Agora, vamos abrir o ltimo ficheiro que crimos, o style.css, num editor de texto. A primeira coisa
que necessitamos fazer adicionar uma seco no topo do ficheiro na qual iremos colocar os
comentrios do CSS (algo do tipo: /* e */). aqui que necessitamos de colocar a informao que diz
ao WordPress onde est seu ficheiro de estilos do seu template. Sem isso, seu template tambm no
ir aparecer no painel de administrao do seu blog WordPress.
1
2
3
4
/*
Theme Name: Seu Template
Theme URI: http://exemplo.com/exemplo/
Description: Um Template WordPress otimizado para buscadores.

(desfazer)Pgina do
Wordpress

5
6
7
8
9
10
11
12
13
14
15
16
Author: Escola WordPress

Author URI: http://www.escolawp.com/
Version: 1.0
Tags: separadas por vrgulas 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. Srio, voc precisa apenas do nome do Template.
Mas se alguma vez tiver como inteno lanar seu template ao pblico, ou est a desenvolver um
template para algum, voc provavelmente ir desejar ter toda a informao. Assim que tiver isso
realizado, poder ativar seu template e comear a correr a verso de testes. E tcharam, um template
branquinho! Agora que as coisas vo comear a aquecer!
junichi_y (15)
Felipe (5)
Marcelo Souza (5)
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-lio sobre WordPress e Templates. O WordPress necessita apenas de 1
ficheiro de template, o index.php. Ns podemos, e iremos adicionar uma srie de templates que

Claudio Gomes (3)
Design Anhembi (3)
podem ser usadas alm do index.php em determinadas situaes (artigos singulares, pginas de
categorias, etc.), mas no incio, o index.php tudo o que precisamos.
Agora, o index.php e todas as suas irms e irmos (que iremos usar tambm) criam as pginas que
vemos em nosso browser. Estes so ficheiros com HTML e PHP mas no final de contas servem para
criar pginas visuais.
Temas
Dicas de Segurana
Icons para Blogs
Notcias
Vamos imaginar as pginas web como histrias, algo com um princpio, 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 princpio como no fim. provvel que
estejamos constantemente refazendo o nosso meio mas ao mesmo tempo estaremos criando o
princpio e fim em simultneo.
HEADER.PHP E FOOTER.PHP
Agarre na estrutura HTML que construmos 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
head>
<body>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding">
div>
<div id="access">
div>
div>
div>
<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 gnero:
1
2
3
4
5
6
7
8
9
10
11
12
13
div>
<div id="footer">
<div id="colophon">
<div id="site-info">
div>
div>
div>
div>
body>
html>
Plugins Wordpress
Showcase
Themes BuddyPress
Themes Wordpress
Truques e Dicas
Tutorials Wordpress
Verses Wordpress
Amigos e Parceiros
Apostas Online
Casino Online
Diretrio Artigos
Diretrio Blogs
Futebol em Directo
Ganhar Dinheiro
Meteorologia
Motos Usadas
Mundo BTT
Ofertas
INDEX.PHP
Psicologia
Aposto que entretanto j sabe o que vamos fazer de seguida. Copie toda a estrutura HTML do meio
onde est includa a div #main para o seu ficheiro index.php. Ele dever ficar algo deste gnero:
Vagas de Emprego
1
2
3
4
5
6
7
8
9
10
11
12
<div id="container">
<div id="content">
div>
div>
<div id="primary" class="widget-area">

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

div>
Com apenas duas adies pequenas teremos um Template WordPress perfeitamente invlido mas
estamos certamente no bom caminho. Temos tambm de chamar o cabealho (header.php) e o
rodap (footer.php) no nosso template.
No topo do ficheiro index.php, antes de todo o cdigo l existente, adiciona a seguinte tag de
template.
1
Parece-nos perfeitamente bvio o que esta tag faz. Ela puxa e carrega o cabealho do site. Mas j
que estamos aqui, aproveite para olhar melhor para esta tag PHP. Gostava que percebesse algumas
coisas. Primeiro, a nossa funo PHP a chamada get_header() e comea com <?php e termina
com ?>. Segundo, embora a nossa chamada seja muito curta (apenas uma linha) ela termina com um
ponto e vrgula. Pequeno, mas muito importante.
Quer adivinhar qual a funo que vamos colocar agora no fundo do nosso ficheiro index.php?
1
Isso mesmo! Agora temos o nosso ficheiro principal que o WordPress estava procurando, o nosso
index.php. Ele contm todos miolos do meio, e tambm um princpio e um fim. Recarregue sua
pgina no browser e verifique o cdigo fonte (Ver > Cdigo-Fonte da Pgina, no Firefox). A est o seu
cdigo!
Estamos cada vez mais prximos de criar nosso Template WordPress! Fique connosco e participe!
EST ACOMPANHANDO? TEM DVIDAS?

Este terceiro artigo teve como base a criao de nossos ficheiros mais importantes, nomeadmente o
index.php, o header.php e o footer.php. O mais importante neste momento que voc compreenda
os passos que vamos dando e caso tenha dvidas, poder coloc-las sem problema. Contamos com a
sua participao e as suas dvidas. Est gostado? Participe com seus comentrios!
grtis!
Endereo de Email:
Subscrever!
At J!
Voc curte Estrutura do Template e


Entrar

administradorErro
valem uma fortuna!
da CodeCanyon
galerias
IV
II

em Wordpress
Flash em Wordpress
da ThemeForest

ningum imagina!
Wordpress

Muito bom o seu tutorial, Paulo, estou acompanhando desde o
primeiro e estou gostando bastante,apesar de no ter muita noo de
Felipe
PHP, acredito que irei saber at um pouco mais no fim deste tutorial!

pginas em construo
Wordpress
16.11.2010
Parabns pela iniciativa!

Wordpress 3.0+
RESPONDER

blogs
Ol Felipe, obrigado pelo comentrio! Estamos tentando explicar

Outubro 2010
passo-a-passo cada uma das funes que estamos usando, de

forma a tentar ajudar todos aqueles que entendem um pouco
menos de PHP, CSS ou HTML. Com calma e algum estudo, acredito
que conseguir montar tudo certinho
Assinar o Blog
Obrigado por seus elogios e pelo seu feedback!
Paulo Faustino
RESPONDER
RSS COMPLETO
RSS RESUMIDO
POR EMAIL
TWITTER
CATEGORIAS
NEWSLETTER
18.11.2010
Muito legal! Obrigada

Ana
16.11.2010
RESPONDER
Ol Ana, obrigado pelo comentrio!
Paulo Faustino
RESPONDER
18.11.2010
Ol Paulo Faustino.
Tenho acompnahdo uma a uma suas dicas, que podem ser
Dr.williams
16.11.2010
perfeitamente nomeadas aulas, e tenho gostado muito.

Espero que ao final destes tpicos eu consiga desenvolver algo a meu
gosto, para fugir destes templates clichs prontos, igual de todo
mundo.
Obrigado mesmo, Abraos.
Williams Mampiam Macedo
RESPONDER
Ol Dr. Williams, obrigado pelo comentrio! Fico muito contente

que esteja gostando da srie e espero que durante as prximas
postagens possamos melhorar ainda mais sua forma de
desenvolver templates WordPress. Infelizmente ainda muitos
blogueiros usam templates gratuitos que praticamente todo o
mundo usa, e como voc disse e bem, necessrio livrar-mo-nos
deles e procurar ter um template nico e marcante
Boa sorte com seus trabalhos de desenvolvimento.

Obrigado ns por seu feedback!
Paulo Faustino
18.11.2010
RESPONDER
Os tutoriais continuam melhores a cada dia, parabens
Marcelo Souza
19.11.2010
RESPONDER
Comente o Artigo!
Nome
E-mail
URL (opcional)
Comentar!

sugestes
de
melhorias,
recomendaes
contedos
ou
simplesmente
algum
tipo
de
TORNE-SE MEMBRO!
MEMBROS PREMIUM!
de

ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
FAZER SUGESTO
119
119
4439
CRIADO POR MANOPLIA

Construindo o cabealho (header.php) do Template Wordpress | Templates e Wordpress Themes

Criar Conta
HOME
Recuperar Password
Entrar na Conta
TEMPLATES WORDPRESS
PLUGINS WORDPRESS
HOSPEDAGEM
SUBSCREVER
ARQUIVOS
SOBRE
CONTACTOS

Parte IV
11
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
Pesquisar...
Subscrever!
Anncios Google

tweets
retweet
WordPress!
Endereo de Email:
Subscrever!
http://www.escolawp.com/2010/11/construindo-o-cabecalho-do-template-wordpress/[30/11/2010 10:40:24]
Pesquisar
artigos:


168

e ningum imagina!
88

WordPress 3.0
CONSTRUINDO O CABEALHO
TEMPLATE WORDPRESS
(HEADER.PHP)
DO
Nesta lio iremos abordar a construo de nosso ficheiro header.php e encontrar a forma correta de
validar nosso template com um Doctype HTML. Esta lio est recheada de cdigo PHP mas no se
assuste
que
iremos
explicar
tudo
passo-a-passo
para
que
possa
compreender
todas as
funcionalidades. Iremos introduzir tambm dois truques de otimizao para buscadores ao mesmo
tempo que vamos procurando construir e melhor nosso ficheiro functions.php.
A SECO HEAD
Neste momento seu template WordPress em branco invlido. Isso acontece porque ele no tem um
Doctype definido, dizendo ao browser como interpretar o HTML que ele est lendo. Iremos usar um
75

Agosto
50

WordPress
48
46
XHTML Transitional Doctype para validar nosso template. Existem outras opes disponveis, mas um
XHTML transitional certamente o melhor para um template WordPress.
Entrar
Abra seu ficheiro header.php criado na lio anterior e cole l dentro o seguinte cdigo, antes de todo
o cdigo que j l se encontra.
1
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Vamos adicionar tambm alguns atributos nossa tag HTML que iro tornar o nosso tipo de pgina
mais aparente e concreto para os browsers. Troque a tag <html> no seu ficheiro header.php com a
seguinte linha de cdigo.
1
"http://www.w3.org/1999/xhtml" >
Agora vamos avanar para dentro da nossa seco <head> de nosso template WordPress. A seco

(desfazer)Pgina do
Wordpress

<head> contm a meta-informao sobre nossa pgina web. Informao tpica como o ttulo do
documento que se consegue ver e ler no cabealho 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 funo para nos ajudar em
alguns aspectos, especialmente quando estivermos para criar nosso ttulo de documento. Ela vai-nos
dar um nmero de pgina que poderemos adicionar ao ttulo.
junichi_y (15)
Inicie seu ficheiro functions.php com:
Marcelo Souza (5)
e 2 linhas abaixo (gostamos de deixar algumas linhas de separao nas funes) cole as seguintes 2
funes PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Felipe (5)
// Tornar o template disponvel para traduo

// A traduo 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 nmero de pgina

function get_page_number() {
if ( get_query_var('paged') ) {
print ' | ' . __( 'Page ' , 'seu-template') . get_query_var('paged');
}
} // end get_page_number

Claudio Gomes (3)
Design Anhembi (3)
Temas
Dicas de Segurana
Icons para Blogs
A primeira funo diz ao WordPress que queremos que nosso template esteja disponvel para traduo
e que os ficheiros de traduo 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
tradues. Voc nunca sabe quando que algum ir necessitar de traduzir seu template para outra
linguagem.
Na nossa funo seguinte, get_the_page_number(), voc ir ver algum texto que pode ser traduzido.
Algo deste gnero:
1
__( 'Page ' , 'your-theme')
O texto preparado para traduo o Page seguido do nome de diretrio do nosso template; neste
caso, seu-template. Esta opo de traduo relativamente simples de implementar, mas existem
muitas outras formas de o fazer. Iremos analisar isso mais frente nesta srie de artigos.
Consegue adivinhar o que a funo get_page_number() est ali fazendo? Se voc analisar bem essa
funo, voc ir perceber que estamos a usar um if para verificar se estamos numa pgina
numerada ou no. Isso acontece quando clicamos em older posts ou postagens mais antigas, em
templates WordPress. Se estivermos numa pgina numerada, esta funo mostra uma barra
Notcias
Plugins Wordpress
Showcase
Themes BuddyPress
Themes Wordpress
Truques e Dicas
Tutorials Wordpress
Verses Wordpress
Amigos e Parceiros
Apostas Online
Casino Online
separadora e o nmero de pgina.

Se voc est comeando a tentar compreender PHP pelas primeiras vezes, ento queremos cham-lo
ateno para um outro aspecto importante. Tudo aquilo que est depois do duplo travesso //
ignorado no cdigo e usado apenas como comentrio, ou seja, usando dois travesses desse tipo,
voc pode deixar imensos comentrios em seu cdigo para perceber o que est programando e o que
faz cada funo. Voc ir ver isso muitas vezes.
Diretrio Artigos
Diretrio Blogs
Futebol em Directo
Ganhar Dinheiro
Bem, voltando nossa seco <head> de nosso ficheiro header.php. Troque as tags <head></head>
pelo seguinte cdigo:
Meteorologia
Motos Usadas
1
2
3
4
5
6
7
"http://gmpg.org/xfn/11">
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 ' .
Mundo BTT
Ofertas

8
9
10
11
12
13
14
15
16
17
wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
else { bloginfo('name'); wp_title('|'); get_page_number(); }
?>
"content-type" content="; charset=" />
"stylesheet" type="text/css" href="" />
if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
"alternate" type="application/rss+xml" href="" title="" />

"alternate" type="application/rss+xml" href="" title="" />
"pingback" href="" />
Neste cdigo realizamos uma srie de tarefas, nomeadamente meta-informao sobre o contedo de
nossa pgina, seguido de um link para a nossa folha de estilos, depois uma chamada de um script
para usarmos comentrios em forma de rvore quando criarmos o nosso sistemas de comentrios, um
truque para plugins e outras coisas relacionadas com o WordPress e por fim um link para nossos RSS
feeds e pingbacks.
Inclumos tambm uma title tag otimizada para motores de busca que mostra apenas o ttulo da
postagem em postagens simples e pginas.
A SECO HEADER
Agora iremos acrescentar informao sobre o ttulo de nosso blog, que ir funcionar como um link
para a nossa homepage, uma descrio de nosso blog, e por fim um menu.
No ficheiro header.php desa at div #branding. aqui que iremos acrescentar nosso ttulo e
descrio do blog. Mas iremos fazer algo um pouco diferente da maioria dos templates wordpress.
Voc encontra em muitos templates wordpress cdigo que diz aos buscadores que o mais importante
de tudo o ttulo do blog em cada uma das pginas e postagens desse mesmo blog. Essas templates
fazem isso usando tags h1; uma tag que diz isto o que esta pgina tem de importante. No
entanto, aquilo que mais importante nesta pgina de nosso blog, por exemplo, no Escola
WordPress mas sim Como criar um Template WordPress Parte IV. Esta a razo desta postagem
e o que ela realmente trata.
Iremos usar as tags condicionais do WordPress e algum cdigo HTML para criar nosso ttulo e
descrio do blog, com o intuito de fazermos aquilo que so as boas prticas. Vejamos ento como
esse cdigo se apresenta:
1
2
3
4
5
6
7
8
"branding">
"blog-title">"/" title="" rel="home">'name' ) ?>

if ( is_home() || is_front_page() ) { ?>
"blog-description">'description' ) ?>
else { ?>
"blog-description">'description' ) ?>
Portanto, o texto ncora do ttulo de nosso blog definido usando uma tag div. A descrio de nosso
blog criada usando uma declarao if em PHP e algumas tags condicionais do WordPress.
Para iniciantes, esta uma boa altura para olhar um pouco para trs e tentar compreender como as
coisas esto sendo criadas e funcionando. No cdigo 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 descrio do mesmo. Ele puxa essa informao e a mostra em seu
template. Compreendendo isto, voc compreende todos os templates WordPress. Ns pegamos uma
estrutura HTML e chamamos uma tag WordPress com PHP para realizar essa tarefa. Simples. tudo
uma questo de voc se habituar a ver tags de templates WordPress juntamente com declaraes if
e alguns ciclos de PHP.
Agora desa para sua div #access. Iremos colocar um link para pular para que os usurios no tenha
de estar visualizando o nosso menu ou cabealho e possam pular diretamente para os contedos.
Psicologia
Vagas de Emprego
class="skip-link">"#content" title="">'Skip to content', 'seu-template' ) ?>
e iremos adicionar o nosso menu de pgina, usando apenas uma tag wordpress, com apenas 1
argumento:
1
'sort_column=menu_order' ); ?>
Fcil, correto? Portanto, sua div #access dever parecer-se com isto:
1
2
3
4
"access">
class="skip-link">"#content" title="">'Skip to content', 'seu-template' ) ?>

'sort_column=menu_order' ); ?>
Est feito! O seu template de cabealho WordPress est programado e otimizado corretamente para
buscadores!

Este quarto artigo teve como base a programao de nosso cabealho header.php e sua devida
otimizao para buscadores. O mais importante neste momento que voc compreenda os passos
que vamos dando e caso tenha dvidas, poder coloc-las sem problema. Contamos com a sua
participao e as suas dvidas. Est gostado? Participe com seus comentrios!
grtis!
Endereo de Email:
Subscrever!
At J!

valem uma fortuna!
Voc curte Construindo o cabealho


da CodeCanyon
galerias

em Wordpress
Flash em Wordpress
da ThemeForest
ningum imagina!
Wordpress


pginas em construo
Wordpress
Entrar

administradorErro

Wordpress 3.0+
blogs
Outubro 2010
Assinar o Blog
III
II
RSS COMPLETO
RSS RESUMIDO
POR EMAIL
TWITTER
CATEGORIAS
NEWSLETTER

Promoo: $250 de templates, plugins e
ebooks por apenas $30!
Freshblog template wordpress grtis
Paulo estou gostando muito do post. Tenho didas sbre a linguagem

PHP. Gostaria de alguma sugesto sua de livros em PHP e tutoriais. Se
Alessander
Raker
possvel algo em PT ou PT-br . Valeu
17.11.2010
RESPONDER
Muito bom essa srie, j estou inscrito na Newsletter e vou

acompanhar at o final!
Felipe
18.11.2010
Tbm tenho bastante dvidas sobre o PHP, e peo assim como o

Alessander, se possvel, voc sugerir algum livro/tutorial pra gente.
Ah, apenas uma observao, o tabindex do email pro website est

desconfigurado, do email leva pro sistema de busca, acho que fica
melhor fazer do website para a busca.

No aguardo do captulo 5!
RESPONDER
Ol Paulo Faustino.
Boa tarde.
Dr. williams
18.11.2010
Logo no incio do post, quando voc manda colar o cdigo abaixo no

head, aqui em sua pgina est aparecendo uma barra de rolagem
horizontal.
Fiquei perdido.
Podes me dizer?
Grato, abraos.
RESPONDER
Me surgiu uma duvida, eu segui todos os procedimentos at aqui, e

mandei rodar o template dai apareceu esse erro: Fatal error: Call to
Leandro
Ferreira
18.11.2010
undefined function get_header() in

C:\Inetpub\wwwroot\Template_Novo\wpcontent\themes\primeiro_template\index.php on line 1, penso que
esse erro pq os codigos ainda no esto completo n, ou algo que
eu tenha feito mesmo?
Este o codigo da minha index.php:

***************************************************
***************************************************
Esto otimas suas aulas, Parabens.
obrigado.
RESPONDER
Sem duvida essa serie composta pelos tutoriais mais bem explicados
quando se trata de criar um template wordpress.
Marcelo Souza
19.11.2010
RESPONDER
quando uso na sidebar

Alasio
noticia
19.11.2010
capa
outras paginas
ele imprime capa em todas as paginas, ja quando uso a mesma

condio no title, por exemplo, ele exibe corretamente.
Quero exibir alguns dados nas pginas dos posts, e no exibi-los na
capa.
pode me ajudar?
RESPONDER
Comente o Artigo!
Nome
E-mail
URL (opcional)
Comentar!

sugestes
de
melhorias,
recomendaes
contedos
ou
simplesmente
algum
tipo
de
TORNE-SE MEMBRO!
MEMBROS PREMIUM!
de

FAZER SUGESTO
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
CRIADO POR MANOPLIA

Construindo o Index (index.php) do Template Wordpress | Templates e Wordpress Themes

Criar Conta
HOME
Recuperar Password
Entrar na Conta
TEMPLATES WORDPRESS
PLUGINS WORDPRESS
HOSPEDAGEM
SUBSCREVER
ARQUIVOS
SOBRE
CONTACTOS

Parte V
13
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
Pesquisar...
Subscrever!
H algum tempo que desejvamos iniciar esta srie de artigos, a partir da qual esperamos ajud-lo a
aprender como criar um template WordPress. Esta srie ir analisar passo-a-passo todas as
diferentes fases do desenvolvimento de um template para WordPress, e para que voc consiga
analisar e implementar todas elas, decidimos partir esta ideia em vrios artigos mais simples de
assimilar e explorar. No final da srie, certamente conseguir criar seu template WordPress!
Endereo de Email:
Subscrever!
artigos:

http://www.escolawp.com/2010/11/construindo-o-index-do-template-wordpress/[30/11/2010 10:42:53]
Pesquisar

CONSTRUINDO O INDEX (INDEX.PHP) DO TEMPLATE

WORDPRESS
O ficheiro Index.php provavelmente o ficheiro mais crucial de todo o seu template WordPress. No
apenas porque o WordPress necessita dele no caso de voc no estar usando nenhuma pgina irm
(como as pginas, 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
de programar).
O CICLO

Embora o ciclo esteja a meio do seu ficheiro, de uma forma metafrica, o index.php inicia e termina
com O Ciclo. Sem ele voc no 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
88

WordPress 3.0
Agosto
outros ficheiros mais rapidamente (excepto o ficheiro de comentrios que sempre muito complicado
168

e ningum imagina!

WordPress
75
50
48
46
uma tarefa sem dvida a mais complexa de todas. Mas ainda assim, poderemos torn-la simples e
acessvel.
Entrar
Experimente este ciclo para comear e ao longo dos artigos iremos trabalhar em cima dele. Coloque
esse cdigo dentro da sua div #content em seu ficheiro index.php.
<?php the_content(); ?>
<?php endwhile; ?>
O que que voc obtm com esse cdigo? Todas as suas postagens numa grande pilha. Mas
poderemos tornar isso diferente.
<ul>
<li>
<?php the_excerpt(); ?>
</li>

(desfazer)Pgina do
Wordpress

<?php endwhile; ?>
</ul>
Conseguiu perceber o que fizemos aqui? Agora voc ficou com uma lista no ordenada de todos os
excertos de suas postagens. (Agora tambm j consegue perceber o que as funes 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 informao de suas
postagens que se encontram dentro do ciclo, tal como a tag de template bloginfo() puxa a
informao das suas opes do WordPress, como vimos no ltimo artigo.
junichi_y (15)
Felipe (5)
Marcelo Souza (5)
Agora, vamos criar um ciclo realmente fantstico! Vamos iniciar com a nossa verso bsica. Mas
iremos fazer com que ela seja compatvel com a Tag More e a Tag Next Page. Iremos coloc-lo
tambm numa Div prpria e fazer com que o browser saiba que isso o contedo de suas postagens
usando a classe de micro-formato entry-content.

Claudio Gomes (3)
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav"></span>', 'yourtheme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' )
. '&after=</div>') ?>
</div><! .entry-content >
E o ttulo da postagem? Isso muito simples tambm. Iremos usar a tag the_title() para puxar o
ttulo da postagem e envolv-lo numa tag <a> que linke diretamente para o the_permalink() (esse
o link permanente para qualquer postagem). Iremos adicionar tambm um atributo para ttulos 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 cdigo 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 necessrio puxar a informao adicional sobre a sua postagem: quem escreveu o artigo, a
data em que foi publicado, a categoria onde foi inserido, tags, links para comentrios, etc. Gostaria de
quebrar esta fase em duas fases: as coisas relacionadas com meta dados (autor e data de publicao)
que colocamos antes do contedo da postagem, e as coisas relacionadas com utilidade (categorias,
tags e link para comentrios) que colocamos depois do contedo. E ambas as fases iro colocar a sua
postagem dentro de sua prpria div junto com o ttulo.
Design Anhembi (3)
Temas
Dicas de Segurana
Icons para Blogs
Notcias
Plugins Wordpress
Showcase
Themes BuddyPress
Themes Wordpress
Truques e Dicas
Tutorials Wordpress
Vamos dar uma olhada a todo o ciclo j programado. Inseri alguns comentrios no PHP para o ajudar
a compreender melhor o cdigo.
<?php /* O Ciclo com comentrios! */ ?>
<?php /* Criando uma div com um ID nico graas ao the_ID() e classes
semnticas com o post_class() */ ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php /* um ttulo h2 */ ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php
printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>"
rel="bookmark"><?php the_title(); ?></a></h2>
<?php /* Meta dados da postagem com possibilidade de traduo */ ?>
<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-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?
></abbr></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"metasep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
</div><! .entry-meta >
<?php /* O contedo da postagem */ ?>
<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:', 'yourtheme' ) . '&after=</div>') ?>
</div><! .entry-content >
<?php /* Categoria micro-formatada e links para tags junto com link para
comentrios */ ?>
<div class="entry-utility">
<span class="cat-links"><span class="entry-utility-prep entry-utilityprep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo
get_the_category_list(', '); ?></span>
<span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep
Verses Wordpress
Amigos e Parceiros
Apostas Online
Casino Online
Diretrio Artigos
Diretrio Blogs
Futebol em Directo
Ganhar Dinheiro
Meteorologia
Motos Usadas
Mundo BTT
Ofertas

entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ",
"</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a
comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'yourtheme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"metasep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?
>
</div><! #entry-utility >
</div><! #post-<?php the_ID(); ?> >
<?php /* Encerrar a div e terminar o ciclo com endwhile */ ?>
<?php endwhile; ?>
NAVEGAO
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 funes
no fazem aquilo que voc julga que fazem.
Tal como tudo o que est no index.php, a navegao de postagens tem de ser criada com alguns
cuidados porque um cdigo que iremos usar em praticamente todas as pginas de nosso template.
Uma coisa que tambm gostamos, colocar a navegao no topo e no final de cada postagem.
Uma coisa que queremos fazer tambm esconder a navegao caso no existam outros contedos
para navegar. Ou seja, se voc no tiver postagens antigas em seu blog, ns no queremos enviar o
cdigo de navegao para o browser. Para o fazer, envolvemos o nosso cdigo 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 nmero de postagens
superior a 1. Caso seja afirmativo, a navegao aparece em seu blog.
Eis o cdigo final que voc ir necessitar na sua navegao, para o topo e fundo da postagem, ou
seja, antes e depois do ciclo.
<?php /* Navegao para o Topo */ ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="metanav"></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 /* Navegao para o Fundo */ ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="metanav"></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-below >
<?php } ?>
E agora uma ltima coisa que vamos fazer em nosso index.php. Nas prximas postagens iremos
analisar como trabalhar com ele, mas para j vamos apenas colocar esta nova funo antes da nossa
get_footer().
<?php get sidebar(); ?>

Este quinto artigo teve como base a programao de nosso index.php e sua devida otimizao. O mais
importante neste momento que voc compreenda os passos que vamos dando e caso tenha dvidas,
poder coloc-las sem problema. Contamos com a sua participao e as suas dvidas. Est gostado?
Participe com seus comentrios!
grtis!
Psicologia
Vagas de Emprego
Endereo de Email:
Subscrever!
At J!
Voc curte Construindo o Index

Entrar

valem uma fortuna!
da CodeCanyon

administradorErro

galerias
em Wordpress

Flash em Wordpress

III

da ThemeForest

IV
II

ningum imagina!

Wordpress

pginas em construo
Wordpress
Wordpress 3.0+
Excelente tutorial e estou juntando as informaes para um dia

blogs
Outubro 2010
ganhar coragem e tentar fazer o meu

claudio gomes
23.11.2010
Assinar o Blog
RESPONDER

Ol Claudio, obrigado pelo comentrio! Ganhe coragem para fazer
pelo menos alguns testes! No custa nada e acredita que no final,
acabar por aprender sempre algo mais
Testar no custa, basta
RSS COMPLETO
RSS RESUMIDO
POR EMAIL
TWITTER
CATEGORIAS
NEWSLETTER
querer! Fora nisso!
Abraos
Paulo Faustino
RESPONDER
24.11.2010
Boas, tudo bem?
rui durao
mais uma serie de posts de qualidade, tambm vais fazer um manual
24.11.2010
parecido ao q fizeste para o: de Desconhecido a ProBloger?
RESPONDER
Ol Rui, obrigado pelo comentrio! No estvamos pensando nisso,

mas agora que falou, acha que seria uma ideia interessante? Ter
um manual de consulta mais fcil?
Abraos
Paulo Faustino
24.11.2010
RESPONDER
claro, eu fiz download o outro manual q tinham e achei

bastante interessante, sei que no vo parar na parta 5, e isso
a meu ver era muito interessante. Comparado com o sucesso
do outro, mais um adoante para os leitores.
Aproveito este post para perguntar como posso conseguir o

manual de exercicios para blogueiro.
Rui Durao
24.11.2010
RESPONDER
Ol novamente Rui. Vamos ento anotar essa dica e ver o

que podemos fazer no sentido de lanarmos um Ebook
prtico que contenha toda a srie sobre Como Criar um
Template WordPress.
Quanto a nosso Ebook de Exerccios para Blogueiros da

Escola Dinheiro, voc pode encontrar aqui:
http://www.escoladinheiro.com/ebook
Abraos
Paulo Faustino
RESPONDER
24.11.2010
Paulo, uma dvida, todo o cdigo exceto get_footer fica dentro da div
content ?
Felipe
24.11.2010
RESPONDER
Comente o Artigo!
Nome
E-mail
URL (opcional)
Comentar!

sugestes
de
melhorias,
recomendaes
contedos
ou
simplesmente
algum
tipo
de
TORNE-SE MEMBRO!
MEMBROS PREMIUM!
de

FAZER SUGESTO
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
1805
119
119
4439
CRIADO POR MANOPLIA

Wordpress Templates

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Wordpress Templates

Transféré par

Droits d'auteur :

Formats disponibles

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes

11 ALUNOS ONLINE \\ ESCOLAS

Como Criar um Template WordPress

09-11-2010, em Tutorials Wordpress, por Paulo Faustino

Ol Visitante! Se novo por aqui, talvez queira subscrever o

passo todas as diferentes fases do desenvolvimento de um template para WordPress, e para

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes

Otimizao para motores de busca

Marcao com suporte Microformato da Google

Artigos Populares este Ano

20 sites incrveis que usam WordPress

10 novidades fantsticas do novo

10 coisas para fazer depois de

SERVIDOR DE TESTES LOCAIS: XAMP OU MAMP

Os 150 melhores Templates

45 pginas de erro 404

Escola Wordpress no Facebook

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes

Eis algumas opes do mercado:

The Theme Development Checklist test data

EST PREPARADO PARA COMEAR?

Informao Virtual (8)

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes

Templates Wordpress Premium

Voc curte Como Criar um Template

Autor: Paulo Faustino

Templates Wordpress que Recomendamos:

Gostou deste artigo? Ento torne-se f do Blog no Facebook!

Escola Wordpress no Facebook

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes

Como criar um Template Wordpress Parte

Comentrios dos Alunos

forma a no perder pitada.

Estou a pensar em modificar novamente a minha template e com isso

Ol Ricardo, obrigado pelo comentrio e pelos elogios. No final da

Se est para modificar seu template ou criar um novo, ento a

15 Plugins Premium Wordpress que

5 Plugins para criar um site de ECommerce em Wordpress

5 Plugins para criar um site de Emprego

Paulo, parabns viu!!! No vejo a hora de voc enviar a parte II para

Os 10 Wordpress Themes mais incrveis

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes

10 coisas para fazer depois de instalar o

10 Templates Wordpress para criar

20 Templates de E-Commerce para

Obrigado pelo apoio!

10 Buddypress Themes Gratuitas

+1000 cones de mdias sociais para

Ol Alexandre, obrigado pelo comentrio! Boa sorte com a

Ficou Confundido? Clique aqui!

Estava esperando por algo assim. O codex do wordpress bom, mas

documentao fica mais fcil de entender algumas coisas.

Valeu mesmo, e mais sucesso!

Ol Maicon, obrigado pelo comentrio! De facto existe muito pouco

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes

Obrigado pelo apoio e pelos seus elogios!

Poxa vida eu estava precisando exatamente disto e caiu como luva

Obrigado e parabns pelo post e iniciativa

Ol Alessander, obrigado pelo comentrio! Fico contente que

Obrigado por seu apoio e por seus elogios!

Finalmente encontrei um tutorial em portugues sobre a criao de

ainda no programo em php, mas tive algumas experiencias com C e

Ol Marcelo, obrigado pelo comentrio! Nossa srie explica tudo

Como Criar um Template Wordpress - Parte I | Templates e Wordpress Themes