Este tutorial é uma tradução livre do Web Designer Wall, com algumas observações minhas adicionadas. Vamos começar?

Assim como quando comecei a trabalhar com WordPress, notei que muitas pessoas também têm dificuldade em criar ou editar um tema e infelizmente ainda há uma carência muito grande de tutoriais em português que realmente ensinam como criar seu próprio tema em WP.

Este tuto irá ensinar como construir um tema personalizado. Embora o Codex forneça um bom conteúdo sobre como criar um tema, acho muito complicado para um iniciante, além de ser todo em inglês. Neste tutorial, irei explicar as noções básicas de como funciona um tema e mostrar como converter um código HTML em um tema. Não é necessário conhecimento em PHP, mas será preciso usar o Photoshop e ter conhecimentos básicos sobre CSS.

Você também irá precisar de um editor de texto, eu indico o Notepad++, que é ótimo e gratuito. Clique aqui para fazer o download deste software.

OBS: Não copie e cole os códigos do tutorial, copie os das páginas, para não dar erro com as aspas.

Tenha calma para criar seu tema e faça tudo com bastante atenção e cuidado. Um pequeno descuido poderá arruinar todo o tema e é bem provável que não funcione logo na primeira tentativa, mas não enlouqueça, isso é normal. O tema do Cute Things foi criado à partir deste tuto (que li todo em inglês) e achei que seria útil traduzi-lo. Ajudarei sempre que possível, mas não sou expert em CSS (ele me odeia), para mais auxílio uma “googlada” é sempre bem-vinda!

Antes de começar, vamos dar uma olhada no tema padrão do WordPress e ver como ele está estruturado. Observe os elementos (cabeçalho, título da postagem, formulário de busca, navegação, rodapé, etc.)

(página principal index.php)

(página interna de post single.php)

Observando os exemplos abaixo, crie seu tema utilizando o Photoshop. O tema usado aqui é o modelo GlossyBlue, você pode fazer o download deste tema clicando aqui. O PSD do tema está incluso.

Depois que o layout em PSD estiver pronto, crie um arquivo em HTML com CSS para cada página (index e single). Você também pode usar os arquivos do modelo GlossyBlue para criar seu tema. Abra o arquivo e dê uma olhada nas páginas index.html, single.html e page.html, elas serão convertidas em PHP para criamos nosso tema.

Por que criar um arquivo HTML primeiro?

Porque será muito mais fácil desenvolver seu tema primeiro em HTML. Primeiro precisamos criar o modelo em HTML, desenvolver o CSS, testar nos navegadores para ver se estão ok, aí sim converter os arquivos para criar o tema. Isso evita erros em partes cruciais no processo de conversão do tema.

Ao observar o tema padrão do WordPress (wp-content/themes/default em seu FTP), você verá vários arquivos em PHP e um chamado style.css. Ao abrir a página, o WordPress “puxa” várias páginas internas para exibir o website/blog no navegador: index.php, sidebar.php, footer.php e etc.

Para maiores detalhes acesse Site Architecture e Template Hierarchy na página Codex em wordpress.org.

Copie a pasta em HTML GlossyBlue para a pasta wp-content/themes. Então, vá na pasta do tema padrão (default), e copie os arquivos comments.php e searchform.php para a pasta GlossyBlue.

Vá na pasta do tema padrão do WordPress (default) e abra o arquivo style.css. Copie o código comentado na parte superior e cole-o no arquivo style.css do tema GlossyBlue. Altere o nome do tema e as informações do autor como desejar.

Agora você precisa dividir o arquivo em vários outros arquivos: header.php, sidebar.php e footer.php. A imagem abaixo mostra uma versão simplificada do arquivo base e como as divisões devem ser feitas.

Abra o arquivo index.html. Corte de cima até onde o cabeçalho <!–/header –> termina, cole-o em um arquivo novo, e salve-o como header.php.

Ainda com a página header.php nova aberta, vá na pasta do tema padrão (default) e abra o arquivo header.php. Copie e substitua as tags onde se exigem código PHP: <title>, <link> stylesheet, <h1> e <div class=description>.

zoom

Menu de Navegação (wp_list_pages)

Substitua as tags <li> em <ul id=nav> por:

<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?>

Referência: wp_list_pages

Volte para o arquivo index.html, corte de onde começa <form id=searchform> até onde fecha <div id=sidebar>, cole em um arquivo novo e salve-o como sidebar.php.

- Substitua <form id=searchform> por:
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>.

- Substitua as tags de categorias <li> por:
<?php wp_list_categories(’show_count=1&title_li=’); ?>

- Substitua as tags de arquivos <li> por:
<?php wp_get_archives(‘type=monthly’); ?>

Referências: wp_list_categories e wp_get_archives.

Volte para o arquivo index.html, corte da tag <div id=footer> até o final em </html>, cole em um novo arquivo e salve-o como footer.php.

Posts Recentes

Para exibir os cinco posts mais recentes foi utilizado este código, conhecido como query_post:

Comentários Recentes

Para exibir os comentários mais recentes foi utilizado o plugin Simple Recent Comments que está incluso no download do tema:

Agora seu arquivo index.html deverá ter apenas o código <div id=content>. Salve o arquivo como index.php e insira as linhas: get_header, get_sidebar e get_footer na mesma ordem de estrutura do seu layout.

A imagem abaixo mostra como o loop funciona. O Loop é usado para exibir os posts no blog e também lhe permite controlar o que deseja mostrar. Basicamente, o Loop verifica se há posts em seu blog, se existirem eles serão exibidos, mas se não houver nenhum post irá aparecer a mensagem “Página Não Encontrada”.

Vá até a pasta do tema padrão (default) e abra o arquivo index.php. Copie o loop da página e cole entre <div id=content>..</div>. Então substitua os textos estáticos pelas tags do WordPress: post date, title, category, comments, próximos links e links anteriores.

zoom

Parabéns! Você já fez a primeira página (a parte principal do tema). Passe a pasta do tema para seu FTP em wp-content -> themes. Agora, faça o login no seu painel de administração do WordPress -> Design para visualizar os temas disponíveis, ative o tema GlossyBlue e acesse a página inicial do seu blog/site para visualizar o tema.

OBS 1: Recomendo que, antes de ativar o tema você faça um backup do banco de dados. Você pode utilizar o plugin WordPress Database Backup.

OBS 2: Para que seus visitantes não vejam seu blog antes de ficar totalmente pronto e verem possíveis erros, recomendo o plugin Maintenance Mode, que ao ser ativado irá exibir uma página de manutenção padrão para seus visitantes enquanto você edita seu tema (se estiver logado, você verá seu tema normalmente).

Agora iremos criar a página single.php. Se desejar pode fazer o mesmo processo da index.php (cortando e colando os códigos), mas acho mais fácil usar a página pronta index.php que criamos e salvá-la como single.php.

Abra o arquivo single.php do tema padrão (default), copie as tags do template (que estão em destaque na imagem abaixo) e cole no arquivo novo do seu tema. Em seguida, inclua a tag comments_template para que os comentários apareçam.

O arquivo single.php é o responsável por exibir seus posts separadamente quando o visitante clicar no título do post.

O arquivo page.php é o responsável por exibir suas páginas internas (as páginas, não os posts).

Abra o arquivo single.php que você acabou de criar, remova a data da postagem, a tag para os comentários, os links dos próximos posts e posts anteriores e salve como page.php.

Exclua todos os aqruivos em HTML da pasta GlossyBlue. Tecnicamente isso é o suficiente para que um tema em WordPress funcione. Como pode notar, há outros arquivos em PHP na pasta do tema padrão. Estes arquivos não são necessários caso queira um tema mais simples. Por exemplo, se as páginas search.php e 404.php não existirem no seu tema, o WordPress irá usar automaticamente a página index.php para visualizá-las. Para obter mais detalhes acesse: Template Hierarchy

Último exemplo… Irei mostrar como usar o modelo de página para criar uma página de arquivo, onde irá aparecer uma lista com todos os posts do seu blog/site (ideal para sitemap). Copie o arquivo archives.php da pasta do tema padrão (default). Remova o código que não será utilizado. Irá ficar mais ou menos assim:

Aqui estou usando um query_post (showposts=-1 significa que irá exibir todos os posts) para exibir uma lista com todos os posts:

Agora crie uma nova página em seu painel WordPress e nomeie como Arquivos. Lembrando que a criação desta página é opcional e não irá interferir no seu tema.

Para incrementar seu tema conheça os mais variados Plugins para WordPress. Para saber mais sobre códigos avançados acesse WordPress Theme Hacks.

Este tutorial é uma tradução do original, que você encontra aqui em inglês. Créditos para Web Designer Wall. A cópia deste tutorial traduzido sem minha prévia autorização é totalmente proibida.