Como Criar um WordPress Theme – Parte 1

• 
  
  
  
• Email

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!

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

• 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.