Escolar Documentos
Profissional Documentos
Cultura Documentos
Tutorial - Como Criar Um Template para Wordpress - Parte1
Tutorial - Como Criar Um Template para Wordpress - Parte1
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.
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.
1 de 4 21/05/2010 10:05
Tutorial: Como criar um template Wordpress de raíz (parte 1) | Templat... http://www.wordpress-love.com/2008/09/tutorial-como-criar-um-templ...
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.
2 de 4 21/05/2010 10:05
Tutorial: Como criar um template Wordpress de raíz (parte 1) | Templat... http://www.wordpress-love.com/2008/09/tutorial-como-criar-um-templ...
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:
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.
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:
3 de 4 21/05/2010 10:05
Tutorial: Como criar um template Wordpress de raíz (parte 1) | Templat... http://www.wordpress-love.com/2008/09/tutorial-como-criar-um-templ...
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.
4 de 4 21/05/2010 10:05