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!

Endereço de Email:

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!

Endereço de Email:

Até Já!