Como criar templates wordpress é uma das perguntas mais comuns que recebemos. Muitas pessoas percebem de html e css, mas quando chega a hora de fazer alterações ou de criar um tema não sabem como fazer, por isso decidimos criar uma série de artigos que vos vai ensinar a criar wordpress themes de raiz. Vamos dar a informação mais importante e explicar como tudo deve de ser feito.

Se esta informação interessa-lhe, pode receber todos os artigos no seu email através da newsletter gratuita. Se ainda não subscreveu, faça-o agora!

Escreva o seu Nome e Email e clique em "Subscrever".


Série Sobre Criar um Template WordPress

Nesta série de artigos sobre a construção de um wordpress theme vamos tentar falar na informação mais importante, usando sempre uma linguagem simples para que todos possam entender.

Vamos seguir a seguinte ordem:

  • Introdução aos WordPress Themes
  • style.css e header.php
  • index.php, archive.php
  • single.php, page.php, 404.php
  • comments.php
  • sidebar.php e footer.php
  • Melhorar a aparencia do tema (css)
  • Funcionalidades Extras: Thumbails
  • Funcionalidades Extras: Menus Personalizados

Ferramentas e Conhecimentos Necessários

Para poder seguir este tutorial e conseguir criar o seu tema, deve de:

  • Ter um browser (de preferência o Firefox com o addon firebug instalado
  • Conta de hospedagem online ou servidor local (Wamp (Windows), MAMP (Mac) e LAMP (Linux).
  • Editor de texto à sua preferência. (Recomendamos o NotePad++ para Windows, TextWrangler para Mac e o Bluefish para Linux
  • Última versão do WordPress - faça o download em wordpress.org
  • Saber trabalhar com o WordPress
  • Conhecimento em HTML e CSS - Se perceber PHP, melhor ainda

A Estrutura do WordPress

O WordPress é um gestor de conteúdo que no inicio pode fazer alguma confusão as muitas pastas e ficheiros que tem, mas você só tem que se preocupar com 2 coisas: o ficheiro wp-config.php e a pasta wp-content.

O ficheiro wp-config.php contém toda a informação necessária para o WordPress se ligar a base de dados (banco de dados) e funcionar normalmente. Já a pasta wp-content é onde ficam os temas e os plugins.

Como neste tutorial vamos aprender a fazer temas, é importante que você saiba onde ele tem que ser colocado para poder ser usado no seu site. Como dissemos anteriormente, os temas e os plugins ficam dentro da pasta wp-content. Dentro desta pasta existem outras duas chamadas de "plugins" e themes. Nós vamos trabalhar dentro da pasta "themes" (wp-content/themes).

Depois do tema estar pronto, você tem transferir a pasta do tema para dentro desta pasta "themes". Só assim você vai conseguir ativa-lo e usar-lo online.

A Estrutura de um Tema

Antes de começar a criar um template é preciso saber como ele funciona. Um tema para wordpress é basicamente uma página normal feita em HTML, mas dividida em partes. A parte que diz respeito ao cabeçalho fica num ficheiro, a parte do código que diz respeito ao conteúdo fica noutro e assim por diante.

As partes/ficheiros básicos e essenciais de um tema são os seguintes:

  • header.php: local onde fica o código do cabeçalho
  • sidebar.php: local onde fica o código da lateral
  • footer.php: local onde fica o código do rodapé
  • index.php: código que mostra os artigos na página inicial
  • single.php: código que mostra o artigo na sua própria página
  • page.php: código que mostra o conteúdo de uma página estática
  • archive.php: igual ao index.php, o código nesta parte vai mostrar os artigos que estão no arquivo, nas categorias, tags, etc
  • functions.php: local onde ficam algumas funções que adicionam mais capacidades aos temas
  • 404.php: igual ao index.php, em vez de mostrar um artigo deverá de mostrar um texto a avisar que o conteúdo não foi encontrado
  • style.css: ficheiro onde fica o stylesheet do tema

O que devo colocar em cada um destes ficheiros:

Já explicamos em cima o que deve de colocar em cada parte, mas para que não restem dúvidas criamos uma página normal em HTML e vamos ensinar a separar cada parte.

É importante que antes de começar criar o seu wordpress theme, já tenha as páginas feitas em HTML. Depois só precisa de dividir essas páginas pelos vários ficheiros do tema e usar php para que funcione bem.

Este código é de uma simples página HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<title>Página de HTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<div id="corpo">
	<div id="header">
		<h1>Titulo do Site</h1>
		<h2>Descrição do site</h2>
		
		<ul id="nav">
			<li><a href="#">Página 1</a></li>
			<li><a href="#">Página 2</a></li>
			<li><a href="#">Página 3</a></li>
			<li><a href="#">Página 4</a></li>
		</ul>
	</div>
	
	<div id="conteudo">
		<div id="artigos">
			<div class="artigo">
				<h2>Titulo do artigo 1</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
			
			<div class="artigo">
				<h2>Titulo do artigo 2</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
		</div>
		
		<div id="sidebar">
			<ul class="widget">
				<h3>Widget</h3>
				<li><a href="#">Página 1</a></li>
				<li><a href="#">Página 2</a></li>
				<li><a href="#">Página 3</a></li>
				<li><a href="#">Página 4</a></li>
			</ul>
		
			<ul class="widget">
				<h3>Widget</h3>
				<li><a href="#">Categoria 1</a></li>
				<li><a href="#">Categoria 2</a></li>
				<li><a href="#">Categoria 3</a></li>
				<li><a href="#">Categoria 4</a></li>
			</ul>
		</div>
	</div>
	
	<div id="footer">
		<p>&copy; 2012 - Todos os Direitos Reservados</p>
	</div>
	
</div>
	
</body>
</html>

Separando a página HTML em partes

Vamos começar de cima para baixo, ou seja, no header.php (cabeçalho). Comece por criar um novo ficheiro no seu bloco de notas, copiar o código deste o inicio até ao fim da div "header" e colar no bloco de notas. Depois grave com o nome header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<title>Página de HTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<div id="corpo">
	<div id="header">
		<h1>Titulo do Site</h1>
		<h2>Descrição do site</h2>
		
		<ul id="nav">
			<li><a href="#">Página 1</a></li>
			<li><a href="#">Página 2</a></li>
			<li><a href="#">Página 3</a></li>
			<li><a href="#">Página 4</a></li>
		</ul>
	</div>

Depois do cabeçalho, passamos a div onde o conteúdo (artigos e sidebar) é mostrado. Então nos ficheiros index.php, single.php, page.php, archive.php e search.php, colamos toda a div "conteudo" com excepção da parte da sidebar. O código é este:

	<div id="conteudo">
		<div id="artigos">
			<div class="artigo">
				<h2>Titulo do artigo 1</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
			
			<div class="artigo">
				<h2>Titulo do artigo 2</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
		</div>
		
		<!--o código da sidebar ficava aqui-->
	</div>

Não colocamos o código da sidebar no passo anterior, porque esse código deve de ficar no sidebar.php, um ficheiro que contém todo o conteúdo da sidebar.

		<div id="sidebar">
			<ul class="paginas">
				<li><a href="#">Página 1</a></li>
				<li><a href="#">Página 2</a></li>
				<li><a href="#">Página 3</a></li>
				<li><a href="#">Página 4</a></li>
			</ul>
		
			<ul class="categorias">
				<li><a href="#">Categoria 1</a></li>
				<li><a href="#">Categoria 2</a></li>
				<li><a href="#">Categoria 3</a></li>
				<li><a href="#">Categoria 4</a></li>
			</ul>
		</div>

Neste momento toda a parte do conteúdo também está pronta. Vamos passar ao que falta, ou seja, ao rodapé do tema. Vamos usar para isso o footer.php, o ficheiro onde deve de ficar a nossa div "footer" e o código restante.

	<div id="footer">
		<p>&copy; 2012 - Todos os Direitos Reservados</p>
	</div>
	
</div>
	
</body>
</html>

Agora toda a página HTML que tínhamos no inicio está dividida em partes.

Como "chamar" outras partes dos temas

O próximo passo é adicionar algumas tags para que o wordpress, quando usar o tema, possa "juntar" todas as partes e mostrar todas as partes do tema.

Para fazer isto, vamos usar 3 tags que servem para ir chamar/incluir outras partes do tema. Numa página como o index.php, precisamos de "chamar" o cabeçalho (header.php), lateral (sidebar.php) e o rodapé (footer.php):

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Cada uma destas tags devem de ser colocadas no lugar onde o código das outras páginas deve de ser incluído. Por exemplo, no index.php precisamos de incluir o header.php logo no inicio, o sidebar.php no lugar onde antes estava o código da sidebar e no fim da página, temos que incluir o footer.php.

Então os ficheiros index.php, single.php, page.php, archive.php e search.php ficam assim:

<?php get_header(); ?>
	<div id="conteudo">
		<div id="artigos">
			<div class="artigo">
				<h2>Titulo do artigo 1</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
			
			<div class="artigo">
				<h2>Titulo do artigo 2</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
		</div>
		
		<?php get_sidebar(); ?>
	</div>
<?php get_footer(); ?>

Como pode ver, as tags foram adicionas em 3 lugares diferentes, a primeira chama o header, a segunda chama a sidebar e a terceira chama o footer.

Estes são os primeiro passos para a criação de um tema. Depois temos que adicionar várias tags, criar o loop que vai fazer com que os artigos e páginas sejam mostradas e também criar um stylesheet para que o tema fique apresentável nos navegadores de internet. Tudo isto será falado nos próximos artigos.

Download dos ficheiros do tutorial

Conclusão

Neste primeiro artigo demos os primeiros passos na criação de um template para wordpress. Começamos por saber onde é que os temas estão, como são organizados, quantos ficheiros tem um tema, aprendemos a separar uma página HTML pelos vários ficheiros do tema e também introduzimos pela primeira vez PHP nas páginas para "chamar" outras partes do tema. O mais básico está feito.

No próximo artigo vamos falar no stylesheet e também no header.php por isso fique atento! Se ainda não acompanha o wptotal, recomendamos que passe pela página de subscrição para saber como nos pode seguir 🙂

Se tiver alguma dúvida, deixe um comentário. 😉

Este post faz parte de uma série de artigos sobre a criação de wordpress themes: