Há algum tempo que desejávamos iniciar esta série de artigos, a partir da qual esperamos ajudá-lo a aprender como criar um template WordPress. Esta série irá analisar passo-a-passo todas as diferentes fases do desenvolvimento de um template para WordPress, e para que você consiga analisar e implementar todas elas, decidimos partir esta ideia em vários artigos mais simples de assimilar e explorar. No final da série, certamente conseguirá criar seu template WordPress!
Os templates wordpress são hoje em dia cada vez mais procurados e podem ser facilmente criados com o intuito de serem vendidos em mercados como a Theme Forest ou a Mojo Themes. Qualquer pessoa que deseje entrar neste mundo fascinante do desenvolvimento de templates para wordpress, pode posteriormente comercializá-los nesses mercados e começar a ganhar dinheiro produzindo templates de qualidade.
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Vejamos algumas das competências do template que vamos desenvolver ao longo dos próximos artigos:
- Otimização para motores de busca
- Marcação com suporte Microformato da Google
- Semântica da estrutura de marcação válida e lógica que pode ser usada em qualquer template
- Layouts de CSS inteligentes
- Classes dinâmicas para o corpo, postagens e comentários
- Trackbacks e comentários em árvore separados
- 2 áreas para widgets que desaparecem quando não estão ocupadas
- Tudo o resto que é normal num template WordPress
No final desta série de tutoriais, com o código feito e pronto a ser implementado, você poderá fazer praticamente tudo aquilo que desejar com ele. Você pode inclusive olhar para o resultado final como a sua framework WordPress de trabalho.
CRIANDO A ESTRUTURA HTML DO TEMPLATE WORDPRESS
A estrutura HTML do seu Template WordPress é fundamental para o trabalho que iremos desenvolver ao longo das próximas sessões. Tendo em conta que consideramos que já tem o seu ambiente de trabalho criado e pronto a trabalhar, vamos iniciar-nos no desenvolvimento da estrutura HTML do Template WordPress.
OS OBJETIVOS DE QUALQUER ESTRUTURA HTML
Quando você pretende criar/codar um determinado website você deverá ter em mente 2 objetivos: pouco código e código significativo. Isso é, usando o mínimo de marcações (HTML tags) possível e ao mesmo tempo ter a certeza de que essas marcações são significativas, usando classes semânticas e nomes de ID que apontam para o conteúdo (class=”widget-area” ao invés de class=”sidebar-left”).
Agora, quando iniciarmos a programação do Template WordPress (ou qualquer outro template para outro CMS) é necessário existir um equilíbrio entre pouco código, com muito pouca estrutura, incluindo elementos div desnecessários, e código que seja significativo e importante.
Você provavelmente já viu a tag div no passado se por ventura olhou para o código de um site ou de um template WordPress. Pense nelas como recipientes para o código HTML — recipientes que são fáceis de manusear para manipular código HTML com CSS. Obviamente, iremos ter algumas também. Mas não queremos muitas ou que não façam sentido. E queremos estrutura suficiente — usando a tag div — de forma a podermos reutilizar o nosso código para múltiplos blogs e layouts. Nós queremos programar algo que nos possa ser útil no futuro também.
ESTRUTURA HTML PARA O SEU TEMPLATE WORDPRESS
Vamos dar uma vista de olhos à estrutura HTML que iremos utilizar para o corpo (body) do nosso Template WordPress.
<html> <head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!– #branding –> <div id="access"> </div><!– #access –> </div><!– #masthead –> </div><!– #header –> <div id="main"> <div id="container"> <div id="content"> </div><!– #content –> </div><!– #container –> <div id="primary" class="widget-area"> </div><!– #primary .widget-area –> <div id="secondary" class="widget-area"> </div><!– #secondary –> </div><!– #main –> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!– #site-info –> </div><!– #colophon –> </div><!– #footer –> </div><!– #wrapper –> </body> </html>
Copie e cole este código para o seu editor de texto e guarde-o num local seguro e onde saiba que o volta a encontrar. Iremos utilizá-lo mais tarde quando construir o ficheiro de estrutura do nosso Template WordPress. Mas antes de o fazermos, existem algumas coisas importantes a analisar primeiro.
UM PEQUENO GUIA SOBRE O HTML DO SEU TEMPLATE WORDPRESS
Primeiro, o atributo de classe no wrapper (invólucro) intitulado hfeed. A classe hfeed faz parte do esquema de microformato. Em linguagem simples, isto significa que adicionando a classe hfeed à nossa página, ela irá dizer a qualquer máquina que leia o nosso site (como por exemplo os robots dos motores de busca ou outros serviços) que o nosso site publica conteúdo sindicado, como por exemplo artigos/postagens. Você irá ver uma série de classes deste género à medida que formos avançando.
Na área central do nosso HTML irá reparar que temos duas áreas para widgets que surgem depois da nossa área de conteúdos. E provavelmente também reparou que o nosso conteúdo está envolvido numa div container (invólucro). Estes pontos são chave. Isto faz com que o nosso conteúdo seja carregado antes das barras laterais aos olhos dos motores de busca (e dos leitores) mas usando uma técnica de CSS com margens negativas poderemos tornar este template num template de 1, 2, ou 3 colunas com pouco código CSS. Interessante?
Esta estrutura HTML poderá ser utilizada para os seus Templates WordPress futuros e dá-lhe a oportunidade de criar coisas bem interessantes com CSS.
CONSEGUIU ACOMPANHAR? TEM DÚVIDAS?
Este segundo artigo tem como objetivo deixar a nossa estrutura HTML preparada para posteriormente começarmos a trabalhar em cima. O mais importante neste momento é que você compreenda os passos que vamos dando e caso tenha dúvidas, poderá colocá-las sem problema. Contamos com a sua participação e as suas dúvidas. Participe com seus comentários!
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Até Já!
jcmartim
Muito bom o tutorial, só acho que poderia ter esmiuçado mais o código para que possamos entender a função de cada “id”, como “masthead”, “branding”, “access” etc.
Paulo Faustino
Olá jcmartim, obrigado pelo comentário! Iremos falar de todos os IDs nas próximas postagens da série. Esta foi meramente introdutória quanto à estrutura do HTML do template, mas ao longo das postagens, especialmente aquelas em que começarmos a trabalhar no CSS, explicarmos passo-a-passo o que faz e para que serve cada um desses IDs.
Abraço
Jeferson Ivo
Parabéns Paulo!!!! Continue assim.
Só uma dúvida e já aproveitando o bond do amigo “jcmartim”, esses “ids” serão listados via CSS depois correto?
Valeu!
Paulo Faustino
Olá Jeferson, obrigado pelo comentário! Esses IDs serão listados em CSS sim, e como referi ao colega “jcmartim” serão todos eles explicados ao longo da série
dr.williams
Boa noite, Paulo Faustino.
Excelente iniciativa esta sua, o que me faz pensar como arruma tempo para escrever tantos tópicos em tantos sites que você tem; a respeito deste tópico em si, creio que seja o essencial para quem está começando a mexer com este tipo de programação.
Parabéns…
Williams Mampian Macedo
P.S.: Se depois você quiser partilhar a sua estratégia de trabalho para dar a atenção que tantos blogs-sites precisam, vou gostar de saber.
Abraços
Paulo Faustino
Olá Dr. Williams, obrigado pelo comentário! Fico contente de conseguir ajudar outros profissionais e blogueiros a melhorarem suas competências técnicas, principalmente porque sinto que existe muita falta de informação de qualidade em português
Quanto à minha capacidade de trabalho, penso que está alicerçada em dois aspectos muito importantes: 1º porque trabalho a tempo inteiro como blogueiro e 2º porque sou apaixonado por aquilo que faço e sou bastante exigente comigo mesmo em matéria de objetivos e produção de conteúdos de qualidade. Mas esse assunto provavelmente dará um bom artigo na Escola Dinheiro
Abraços
Marcelo Souza
Aproveitando a deixa do jcmartim, eu também gostaria de saber a função exata de cada id, assim fica bem mais facil compreender como e porque estamos colocando cada pedaço do codigo.
Mas com esse segundo tutorial ja deu pra ver que vem coisa interessante pela frente.
E claro, eu também gostaria muito de saber qual é a sua estrategia para escrever em tantos sites e ao mesmo tempo.
Paulo Faustino
Olá Marcelo, obrigado pelo comentário! Penso que a resposta a suas duas questões está respondida em cima aos comentários de nossos colegas
Pode ficar tranquilo que estaremos explicando tudo passo-a-passo para que não fiquem dúvidas 
Lucas Santana
Muito legal o artigo, eu costumo criar a estrutura do template com o programa Artisteer, mais ele atribui nomes não muito amigaveis para as DIV’s, agora estou começando a fazer essa estrutura por conta própria, graças ao Paulo Faustino.
Eu não sou pucha-saco, mais esse site tranformou minha vida e minha carreira, obrigado Paulo!
Abraços.
Guilherme
Oi Paulo, excelente iniciativa. Uma sugestao boa, seria de criar uma página com um índice com link para todos os posts. Para facilitar a vida de quem nao conseguiu acompanhar desde o inicio.
Abracos!
Lorena de Souza
Parabéns pela iniciativa.
Procurei materiais sobre wp e infelizmente tudo que achei foi mandando consultar o codex. Não que ele não seja boa alternativa, mas ter outras referências e com visão de outra pessoa é sempre bom para o aprendizado.
Vou acompanhar e já vai cair direto no meu email.
Muito Obrigada Paulo.
Abraço.