• Tweet
• Email

• Tweet
• Email

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.

ESTRUTURA DO TEMPLATE E DIRETÓRIO

Enquanto a grande maioria dos templates minimalistas para WordPress apenas necessitam de um ficheiro index.php e um ficheiro style.css, a grande maioria dos Templates WordPress necessitam de algo um pouco mais sólido.

O nosso template minimalista irá incluir um total de 6 ficheiros. Comece por criar uma pasta do tipo wp-content/themes/ para o seu template — neste tutorial iremos utilizar a nomenclatura “seu-template” mas ele pode tomar o nome que você desejar — e crie também os seguintes ficheiros no seu diretório (não se preocupe que eles ficarão em branco até aos próximos passos).

• index.php
• header.php
• sidebar.php
• footer.php
• functions.php
• style.css

Agora, vamos abrir o último ficheiro que criámos, o style.css, num editor de texto. A primeira coisa que necessitamos fazer é adicionar uma secção no topo do ficheiro na qual iremos colocar os comentários do CSS (algo do tipo: /* e */). É aqui que necessitamos de colocar a informação que diz ao WordPress onde está seu ficheiro de estilos do seu template. Sem isso, seu template também não irá aparecer no painel de administração do seu blog WordPress.

/*
Theme Name: Seu Template
Theme URI: http://exemplo.com/exemplo/
Description: Um Template WordPress otimizado para buscadores.
Author: Escola WordPress
Author URI: http://www.escolawp.com/
Version: 1.0
Tags: separadas por vírgulas para identificar seu template
.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.
 */

Algo a notar: uma grande parte disto é opcional. Sério, você precisa apenas do nome do Template. Mas se alguma vez tiver como intenção lançar seu template ao público, ou está a desenvolver um template para alguém, você provavelmente irá desejar ter toda a informação. Assim que tiver isso realizado, poderá ativar seu template e começar a correr a versão de testes. E tcharam, um template branquinho! Agora é que as coisas vão começar a aquecer!

CONSTRUINDO A SUA ESTRUTURA HTML

Agora é a altura em que vamos utilizar a nossa estrutura HTML criada na segunda parte deste tutorial. Mas primeiro uma mini-lição sobre WordPress e Templates. O WordPress necessita apenas de 1 ficheiro de template, o index.php. Nós podemos, e iremos adicionar uma série de templates que podem ser usadas além do index.php em determinadas situações (artigos singulares, páginas de categorias, etc.), mas no início, o index.php é tudo o que precisamos.

Agora, o index.php e todas as suas irmãs e irmãos (que iremos usar também) criam as páginas que vemos em nosso browser. Estes são ficheiros com HTML e PHP mas no final de contas servem para criar páginas visuais.

Vamos imaginar as páginas web como histórias, algo com um princípio, um meio, e um fim. Quando escrevemos o nosso ficheiro index.php (e mais tarde o single.php, category.php, etc.) iremos concentrar-nos apenas no meio. Mas! Iremos chamá-lo tanto no princípio como no fim. É provável que estejamos constantemente refazendo o nosso meio mas ao mesmo tempo estaremos criando o princípio e fim em simultâneo.

HEADER.PHP E FOOTER.PHP

Agarre na estrutura HTML que construímos na aula anterior e copie tudo incluindo a div <div id="main"> no seu header.php e guarde-o. No final deverá ficar algo deste tipo:

<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">

Agora, copie tudo o que está depois, incluindo a div </div><!-- #main --> para o seu ficheiro footer.php. Ele deverá ficar algo deste género:

	</div><!– #main –>

	<div id="footer">
		<div id="colophon">

			<div id="site-info">
			</div><!– #site-info –>

		</div><!– #colophon –>
	</div><!– #footer –>
	</div><!– #wrapper –>
</body>
</html>

INDEX.PHP

Aposto que entretanto já sabe o que vamos fazer de seguida. Copie toda a estrutura HTML do meio onde está incluída a div #main para o seu ficheiro index.php. Ele deverá ficar algo deste género:

		<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 –>

Com apenas duas adições pequenas teremos um Template WordPress perfeitamente inválido mas estamos certamente no bom caminho. Temos também de chamar o cabeçalho (header.php) e o rodapé (footer.php) no nosso template.

No topo do ficheiro index.php, antes de todo o código lá existente, adiciona a seguinte tag de template.

<?php get_header(); ?>

Parece-nos perfeitamente óbvio o que esta tag faz. Ela puxa e carrega o cabeçalho do site. Mas já que estamos aqui, aproveite para olhar melhor para esta tag PHP. Gostava que percebesse algumas coisas. Primeiro, a nossa função PHP é a chamada — get_header()— e começa com <?php e termina com ?>. Segundo, embora a nossa chamada seja muito curta (apenas uma linha) ela termina com um ponto e vírgula. Pequeno, mas muito importante.

Quer adivinhar qual a função que vamos colocar agora no fundo do nosso ficheiro index.php?

<?php get_footer(); ?>

Isso mesmo! Agora temos o nosso ficheiro principal que o WordPress estava procurando, o nosso index.php. Ele contém todos miolos do meio, e também um princípio e um fim. Recarregue sua página no browser e verifique o código fonte (Ver > Código-Fonte da Página, no Firefox). Aí está o seu código!

Estamos cada vez mais próximos de criar nosso Template WordPress! Fique connosco e participe!

ESTÁ ACOMPANHANDO? TEM DÚVIDAS?

Este terceiro artigo teve como base a criação de nossos ficheiros mais importantes, nomeadmente o index.php, o header.php e o footer.php. 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. Está gostado? 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á!