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.
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.
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: - Imprime o tipo de linguagem para a tag – 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.phpCrie um ficheiro com o nome footer.php e copie tudo da template a partir da secção 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 (index.phpEste é 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. Neste momento temos 4 ficheiros desenhados para o 
index.php, o template deverá funcionar perfeitamente bem.
template" DOWNLOAD: Descarregar código fonte do template.
Assinar:
Postar comentários (Atom)
0 comentários:
Postar um comentário