typo template
Vi recentemente um tutorial de grande qualidade no NetTuts, exemplificando de forma extremamente simples e sucinta, como criar um template WordPress de raíz. Procedi então à tradução de todo o tutorial para trazê-lo aos leitores do WordPress-Love que se sentem com imaginação suficiente para trabalhar um template e/ou customizarem o seu próprio theme do seu blog.
A ESTRUTURA DE UM TEMPLATE WORDPRESS
A estrutura de um template WordPress é na verdade extremamente simplista. Iremos começar por analisar o ficheiro CSS que dá cor e forma ao template. Esse ficheiro detalha praticamente tudo o que o seu template WordPress irá utilizar. Depois teremos de desenvolver um ficheiro 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.

template

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.

template

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.

template

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.

template

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.
template

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.

template

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:

template

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:

template

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.

template
ANALIZANDO O TEMPLATE – FUNCIONA?
Neste momento temos 4 ficheiros desenhados para o template, e assumindo que você não se esqueceu de actualizar o ficheiro index.php, o template deverá funcionar perfeitamente bem.
template

SUBSCREVA o WordPress-Love para mais tutoriais e novidades do mundo WordPress!