Tutorial: Como criar um template Wordpress de raíz (parte 1)
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!
|
|
37 Comentarios a “Tutorial: Como criar um template Wordpress de raíz (parte 1)”
Deixar resposta
|
Patrocinadores
Simples, fácil até para aqueles que não conhece HTML
Excelente tutorial, aguardarei a continuação e, para não perder as dicas, já me inscrevi no feed.
Abraços
Marcus Aragão
Muito bom, deveria colocar os codigos pra baixar tambem!
Parece tão fácil; até chegar à criatividade…!?
abraços!
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
ÓTIMO POST, PORÉM SÓ COM UM ERRINHO DE PORTUGUÊS RAIZ NÃO TEM ACENTO…
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
Adicionado código-fonte para download.
Paulo Faustino publicou um post sobre..Lançamento do Website Grande-Ecrã.com
Valeu muito obrigado.
Glauber Bandeira publicou um post sobre..Google oferecerá web via satélite a 3 bilhões de pessoas
Poxa , não entendi onde eu pego esses HTMLS !
Ola gostaria de saber como mudar aquela função More do site, quando nós precisamos dividir o post em um determinado momento
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
Se você não souber HTML In_Darkness acesse guanabara.info lá tem video aulas de HTML BASICO
Olá daniel, utilize < "!--more--">, sem as aspas.
Paulo Faustino publicou um post sobre..Lançamento do Website Grande-Ecrã.com
[...] Todas estas opções poderão e deverão ser utilizadas aquando da criação de um template para Wordpress. Se não sabe criar temas para Wordpress, considere ler o nosso artigo de Como criar um template wordpress de raíz (parte 1). [...]
[...] Hoje vamos leccionar a segunda parte de um conjunto de dois tutoriais sobre como criar um template Wordpres de raíz. Se por ventura não leu a primeira parte, aconselho-o a fazê-lo: Como criar um template wordpress de raiz (parte 1). [...]
[...] capacidade para criarem templates originais a partir do zero, embora existam tutoriais que explicam como criar um template wordpress de raíz. Quando isso acontece e você pretende atribuir um look próprio ao seu projecto, como fazer? [...]
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
¬¬”
Muito bom esse post!!! Parabéns foi de grande valia!
[...] um template (theme) para WordPress – Parte 1 – Parte [...]
Parabéns pelas dicas..estou pensando sinceriamente mudar o meu Site http://www.vejaso.info para Wordpress..Valeu!
ola gostaria de saber se há algum tutorial exemplificando este tipo de assunto , grato
Criei blog dentro do site wordpress. Como instalo um novo template?
[...] com ele e já to fazendo outro (porque o anterior não me agradou), enfim vale a pena conferir! Parte 1 – Header, Footer, Index e Style.css Parte 2 – Sidebar, Comentários e [...]
[...] Hoje vamos leccionar a segunda parte de um conjunto de dois tutoriais sobre como criar um template Wordpres de raíz. Se por ventura não leu a primeira parte, aconselho-o a fazê-lo: Como criar um template wordpress de raiz (parte 1). [...]
Vlw pela tradução do tutorial muito bom wordpress e uma ferramenta e excelente,vlw pelo post
[...] Como criar um template Wordpress de raíz (Parte I) [...]
Legal!
Vou ver no que vai dar.
Vou tentar um aki.
Valeu!
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?
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
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.
Mto bom cara… essa era a base que precisava pra começar a montar meu template.
Vlw pelos esclarecimentos. abs..
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 !
fiz um tema, mais fiz m resolução 1024x 768. Mais queria fazer um jeito de colocar resolução automatica.Teria como?
Olá,
apesar de ter colocado os comments no style.css como foi falado, o tema nao aparece no amdmin do site. alguma ideia?
obrigada.
Gostei imenso do tutorial, simples e eficaz.
Como estava para fazer um template Wordpress estes tutorias dão-me uma boa base.
Obrigado.
Sinceramente…
preciso de ajuda!
nao conheco direito o wordpress
se alguem puder me ajudar!!!
beijos