index.php, que é simplesmente o ficheiro do template que faz uso de tags PHP e inclui o código de chamada dos ficheiros header.php e footer.php. Neste momento são poucos os templates WordPress a utilizarem somente 4 ficheiros, pelo que existe um enorme potencial ao utilizar mais ficheiros e opções multiplicadas pelo seu blog. Existem os layouts pré-definidos, como o archives.php e o single.php. Existe ainda a possibilidade de ser você a criar uma página e um ficheiro completamente diferentes, tanto em nome como em formato e estilo.Este tutorial é a primeira parte de um conjunto de dois, sendo que neste é abordada a criação de um template simples em HTML e CSS, e no segundo iremos analisar técnicas mais avançadas como por exemplo a criação e implementação de sidebars.
O objectivo deste tutorial é passar o template ”Typography Paramount” da Six Shooter Media num template extremamente simples para WordPress. Experimente.
PASSO 1 – CRIAR O FICHEIRO STYLE.CSS
O ficheiro de estilos é o ficheiro de definições do seu template WordPress. Existem uma série de coisas simples que deverá fazer. O primeiro é renomear o seu ficheiro principal para style.css, sendo que de seguida é necessário adicionar-lhe informação.
Este código é o chamado comentário da folha de estilos do seu template. Ele não influenciará em nada o comportamento do template, e serve unicamente para dar ao nome ao mesmo e crédito ao autor. Tenha em atenção que deverá colocar os dados no topo da folha de estilos e sem espaços a dividi-los. Não traduza os primeiros dados que indicam “Theme Name”, “Theme URI”, “Description”, etc., coloque apenas os seus dados pessoais na frente.
Renomei o ficheiro de estilos que vinha no template original, e chamei-lhe 1.css. Aproveitei e criei também uma nova pasta intitulada typography-paramount que será a que irei carregar para a pasta de templates do meu blog WordPress. Coloque a folha de estilos dentro da raíz dessa pasta, caso contrário o wordpress não será capaz de ler o ficheiro.
PASSO 2 – CRIAR O HEADER E FOOTER
Neste passo vamos criar ambos os ficheiros header.php e footer.php. Embora ambos sejam utilizados recorrentemente em templates WordPress, a verdade é que podem não ser utilizados se assim o desejar. Todavia, são ambos muito simples de trabalhar.
header.php
Começando pelo header, crie um ficheiro dentro da pasta do template, com o nome header.php, e de seguida abra o ficheiro index.html e copie o seguinte código lá para dentro. Este será o header e será aplicado em todas as páginas do site. Tenha isso em mente quando desenvolver templates próprios.
De seguida vamos colocar as tags do WordPress no ficheiro header.php. Estas tags dizem ao WordPress onde deverá injectar os vários tipos de conteúdos presentes. Lembre-se também de alterar aquele link para a folha de estilos.
Adicionámos imenso código neste altura, mas na verdade o processo é muito simples. Todas as tags inseridas, estão devidamente documentadas no WordPress Codex. Ainda assim, vamos analisar algumas das funcionalidades:
language_attributes()- Imprime o tipo de linguagem para a tag<html>.bloginfo()– Usado para imprimir informação acerca do site. Os parâmetros estão disponíveis no Codex. A tag ’name’ retorna o título do blog.wp_title()– Simplesmente retorna o título da página do blog.wp_head()- Imprime os links javascript e outras opções do header.get_option()– Retorna um valor da base de dados de Opções.wp_list_pages()- Lista os links para as páginas do site. Os parâmetros ordenam as páginas correctamente e acabam com a impressão do título por defeito que vem no WordPress.
footer.php
Crie um ficheiro com o nome footer.php e copie tudo da template a partir da secção <div id="footer"> e cole no novo ficheiro. Um footer dinâmico que inclua o nome do blog, e informação adicional está regularmente presente, portanto, vamos adicionar um.
Alterei o footer para apresentar o ícon de copyright, seguido do ano corrente (<?php the_time('Y'); ?>) e do nome do site (<?php bloginfo('name'); ?>). Depois na linha seguinte coloco uma referência ao rss feed (<?php bloginfo('rss2_url'); ?>).
wp_footer() é a tag de chamada que o WordPress utiliza para colocar coisas no fundo do site.
PASSO 3 – CRIAR O FICHEIRO PRINCIPAL
De seguida vamos criar o ficheiro index.php
index.php
Este é um dos dois ficheiros necessários para o template WordPress funcionar na perfeição. O outro é o style.css. Portanto vamos começar. Crie o ficheiro e coloque-o juntamente com os restantes. De seguida coloque o seguinte nele:
Isto simplesmente diz ao WordPress onde incluir os ficheiros header.php e footer.php. Como isto é uma série de dois artigos, iremos incluir a integração de uma sidebar na sua versão. Coloque o seguinte no meio de ambas as tags:
Isto é o que o WordPress chama de WordPress Loop. A primeira linha de código PHP inicia o loop, endwhile é o fim dele. O WordPress corre o loop para qualquer artigo que este no blog, e se não existir nenhum, ele apresenta a mensagem ”Woops…”. Adicionei também um link de navegação que irá colocar links para mais artigos, de forma aos visitantes puderem ler conteúdo mais antigo sem terem de visitar os arquivos do blog.
No próximo artigo iremos reescrever o ficheiro single.php. Isto é o que um visitante irá ler se clicar num título de um artigo. Ele irá incluir o sistema de comentários, ao contrário do index.php.
index.php, o template deverá funcionar perfeitamente bem.
SUBSCREVA o WordPress-Love para mais tutoriais e novidades do mundo WordPress!
In_Darkness
Simples, fácil até para aqueles que não conhece HTML
Marcus Aragão
Excelente tutorial, aguardarei a continuação e, para não perder as dicas, já me inscrevi no feed.
Abraços
Marcus Aragão
Wagner Reis
Muito bom, deveria colocar os codigos pra baixar tambem!
Gattune!
Parece tão fácil; até chegar à criatividade…!?
abraços!
Leandro
finalmente alguém abre as portas pra ensinar a criar templates.
vlw Paulo, abraços
Leandro publicou um post sobre..“Estrada para Redenção” (Road to Redemption) chega ao Brasil
mATHEUS
ÓTIMO POST, PORÉM SÓ COM UM ERRINHO DE PORTUGUÊS RAIZ NÃO TEM ACENTO…
leonardo
Muito bom o tutorial. Achei bem fácil.
E concordo com o Wagner, poderia disponibilizar os arquivos para download.
Abraço.
leonardo publicou um post sobre..Carol Castro – Playboy de Agosto/2008
Paulo Faustino
Adicionado código-fonte para download.
Paulo Faustino publicou um post sobre..Lançamento do Website Grande-Ecrã.com
Glauber Bandeira
Valeu muito obrigado.
Glauber Bandeira publicou um post sobre..Google oferecerá web via satélite a 3 bilhões de pessoas
Edu
Poxa , não entendi onde eu pego esses HTMLS !
daniel nunes
Ola gostaria de saber como mudar aquela função More do site, quando nós precisamos dividir o post em um determinado momento
daniel nunes
Ola, gostaria e saber como mudar a opção more. aquela que colocamos quando precisamos dividir o post, aquela para não ficar muito grande
Lucas Corrêa
Se você não souber HTML In_Darkness acesse guanabara.info lá tem video aulas de HTML BASICO
Paulo Faustino
Olá daniel, utilize < "!--more--">, sem as aspas.
Paulo Faustino publicou um post sobre..Lançamento do Website Grande-Ecrã.com
viviane
queria saber c posso fazer isso tudo no bloco de notas..
?
EU SEI Q VCS USARAM O WORDPRESS
MAS EU NAO TO CONSEGUINDO BAIXAR E INSTALAR ELE
¬¬”
Fernando Damasceno
Muito bom esse post!!! Parabéns foi de grande valia!
adritec
Parabéns pelas dicas..estou pensando sinceriamente mudar o meu Site http://www.vejaso.info para WordPress..Valeu!
gustavo garcia sanches
ola gostaria de saber se há algum tutorial exemplificando este tipo de assunto , grato
Marcio Andre Santann
Criei blog dentro do site wordpress. Como instalo um novo template?
Alexandre Broggio
Vlw pela tradução do tutorial muito bom wordpress e uma ferramenta e excelente,vlw pelo post
Karrero
Legal!
Vou ver no que vai dar.
Vou tentar um aki.
Valeu!
Ghigi
Adorei o seu Tuto, ficou mto legal, eu estou saindo do blogrspot, e querendo vir para o o wordpress, já faço templates para blogs ha 4 anos, mas para o wordpress nunca fiz, por isso estou vendo alguns tutos, para q eu antes de entrar no wordpress, eu possa saber se terei como personalizar meu template e até mesmo usar as mesmas imagens q já é conhecida, gostaria de mais informações, será q poderia me ajudar? Como faço para ter um blog no wordpress? como carrego um arquivo PHP e onde? comoi faço para ver o HTML do blog theme?
Gerson Bastos
Bem bacana a forma simples de lidar com wordpress. Sinceramente achava que era um pouco mais complicado.
O que deixa complicado é nossa mente que não deixa a gente tentar…
abraços
pwrx@uol.com.br
Parabéns , o conhecimento é assim : você tem muito , passa e continua com mais – só quem passa conhecimento é quem tem grande capacidade de adquirir muito mais !!
parabéns por estas informações que , com certeza , alcançam pessoas as mais intrigantes possíveis, em termos de possibilidade de adquirir conhecimento.
Jefferson Romano
Mto bom cara… essa era a base que precisava pra começar a montar meu template.
Vlw pelos esclarecimentos. abs..
Fabricio
Não são apenas html ,se eu n me engano ,pq eu n li td ,ele apenas trabalhou com css e php ,onde definiu a folha de estilos ,onde vc pode definir o estilo dos links ,do hover ,que eh quando vc passa o mouse por cima do link ,active .. e td mais .. entao procure aprender sobre css e depois vc ja vai sair por ai aprendendo mto mais conteudos sobre wordpress !
Cleber
fiz um tema, mais fiz m resolução 1024x 768. Mais queria fazer um jeito de colocar resolução automatica.Teria como?
Keyth
Olá,
apesar de ter colocado os comments no style.css como foi falado, o tema nao aparece no amdmin do site. alguma ideia?
obrigada.
[T]uGa [M]aSter
Gostei imenso do tutorial, simples e eficaz.
Como estava para fazer um template WordPress estes tutorias dão-me uma boa base.
Obrigado.
Daniela
Sinceramente…
preciso de ajuda!
nao conheco direito o wordpress
se alguem puder me ajudar!!!
beijos
Wagner Amaro
Parabéns muito bom mesmo!
Diogo
Cara achei complicado esse tutorial, acho que deveria especificar mais, ter mais detalhes, daria mas trabalho para o editor mas decharia o tutorial mas claro. Logo no início, renomear a folha de estilo, depois criar uma com o nome 1 e tal… criar uma pasta raiz e tal…. muito complicado e nada de clareza…
se no ficheiro original vem uma folha de estilo style.css para que renomear?
depois colocar uma com o nome 1??
cara eu posso tá equivocado ou ter entendido errado, falta clareza nisso
mas de qualquer forma, valeu!
abraço
Rodrigo
Olá,
Podem ajudar-me ou dar-me dicas para a seguinte questão?
Eu gostáva de criar um site WordPress mas puder adaptá-lo da seguinte forma:
Queria além do Blog, puder criar páginas estáticas sem o autor, as tags ou comentários! Como fazer isto?
Depende dos templates?
Obrigado.
TopTec.net.br
gostei muito deste tutorial
parabéns
TIAGO
Olá querido amigo,quero antes de mais nada lhe dar os parabens por este maravilhoso Blog e dizer que sou teu fã que aqui em teu Blog tem muito conteúdo de qualidade que as vezes nem comprando agente consegue por ai,eu estou com uma duvida e gostaria de saber se pode me responder,é que estou fazendo um curso de web design,e pretendo trabalhar nesta area,só que estou vendo uma possibilidade através do word press pois com ele alguns dos meus clientes poderão atualizar seus própios sites certo? então eu vamos supor que um cliente me encomende um site eu posso pegar um template do word press gratuuito modificar e vende-lo? seria justo? é uma boa né,pois para criar um sistema de atulizaçao de site gastaria uma milha de linha de código php concorda? gostaria de saber seu ponto de vista sobre isso ok,abraço e obrigado pela atenção!
João Silva
Olá Paulo, excelente tutorial!
Seria possivel voltar a fazer upload dos códigos? O link não está a funcionar!
Obrigado.
JediArt
Show de bola, eu já estava aprendendo a criar temas wordpress, mas com essas dicas fica mais facil ainda.
Obrigado!
JediMasterHous
Leonardo Laporte
Um parte de base do Yahoo! também usa WordPress!
Fabiano
Olá, muito boa a explicação.
Obrigado por compartilhar!
Tiago
Olá Paulo!
Ótimo post, mas tem um detalhe. O link para baixar o código fonte tá quebrado. concerta aí!
Obrigado
Luis Carlos
E a parte 2 do tutorial, já tem? Qual o link? Não achei ela…
Tiago
Aqui está o link da parte 2:
http://www.escolawp.com/2008/09/tutorial-como-criar-um-template-wordpress-de-raiz-comentarios-sidebar-e-arquivos-parte-2/
No final de cada post você encontra os links das continuações.
Sucesso!
rogerio
gostei
Alexsandro
Como que eu faço para atualizar meu tema, e ele aparecer lá no wp escrito atualizar?
Juliana
Não consigo baixar
Nech
Olá,
Me diga uma coisa como se cria blocos dentro de um templa já feito destes free. Me refiro a area contente, ao inves de ficar o blog ali alinhado criar blcos para destaque de categorias?
Nao sei se me expliquei
Cara muito bom o blog parabéns!
Abraço
Freitas
Olá, gostaria de saber se o wordpress possui quickstarts como joomla, em que você instala o tema e por mais complexo que seja ele instala corretamente.