Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

WP Total Inicio Templates 2 Colunas 3 Colunas Magazine Galeria Minimalistas Temas Premium Outros Cdigo / Hacks Plugins Artigos Dicas e Sugestes WordPress Ganhar Dinheiro Motores de Busca Redes Sociais Alojamento Web Design Outros Notcias Passatempos Reviews Sobre Ns Contacto Wordpress Total > Artigos > Wordpress > Como Criar um WordPress Theme Parte 1

Como Criar um WordPress Theme Parte 1

Publicado a 18 de Janeiro de 2012 - Cdigo / Hacks, Wordpress - 83 Comentrios
131
Gosto Enviar

49
Tweet

33

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 alteraes ou de criar um tema no sabem como fazer, por isso decidimos criar uma srie de artigos que vos vai ensinar a criar wordpress themes de raiz. Vamos dar a informao mais importante e explicar como tudo deve de ser feito. Se esta informao interessa-lhe, pode receber todos os artigos no seu email atravs da newsletter gratuita. Se ainda no subscreveu, faa-o agora! Escreva o seu email e clique em "subscrever":

1 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

Srie Sobre Criar um Template WordPress

Nesta srie de artigos sobre a construo de um wordpress theme vamos tentar falar na informao mais importante, usando sempre uma linguagem simples para que todos possam entender. Vamos seguir a seguinte ordem: Introduo 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 Necessrios

Para poder seguir este tutorial e conseguir criar o seu tema, deve de: Ter um browser (de preferncia 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 preferncia. (Recomendamos o NotePad++ para Windows, TextWrangler para Mac e o Bluefish para Linux ltima verso do WordPress - faa 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 contedo que no inicio pode fazer alguma confuso 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 contm toda a informao necessria 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.

2 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

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. Ns 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 comear a criar um template preciso saber como ele funciona. Um tema para wordpress basicamente uma pgina normal feita em HTML, mas dividida em partes. A parte que diz respeito ao cabealho fica num ficheiro, a parte do cdigo que diz respeito ao contedo fica noutro e assim por diante. As partes/ficheiros bsicos e essenciais de um tema so os seguintes: header.php: local onde fica o cdigo do cabealho sidebar.php: local onde fica o cdigo da lateral footer.php: local onde fica o cdigo do rodap index.php: cdigo que mostra os artigos na pgina inicial single.php: cdigo que mostra o artigo na sua prpria pgina page.php: cdigo que mostra o contedo de uma pgina esttica archive.php: igual ao index.php, o cdigo nesta parte vai mostrar os artigos que esto no arquivo, nas categorias, tags, etc functions.php: local onde ficam algumas funes 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 contedo no 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 no restem dvidas criamos uma pgina normal em HTML e vamos ensinar a separar cada parte. importante que antes de comear criar o seu wordpress theme, j tenha as pginas feitas em HTML. Depois s precisa de dividir essas pginas pelos vrios ficheiros do tema e usar php para que funcione bem.

3 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

Este cdigo de uma simples pgina HTML. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xh <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphpro <head> <title>Pgina 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>Descrio do site</h2> <ul id="nav"> <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina </ul> </div> 1</a></li> 2</a></li> 3</a></li> 4</a></li>

<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="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina </ul>

1</a></li> 2</a></li> 3</a></li> 4</a></li>

<ul class ="widget"> <h3>Widget</h3> <li><a href="#">Categoria <li><a href="#">Categoria <li><a href="#">Categoria <li><a href="#">Categoria </ul> </div> </div>

1</a></li> 2</a></li> 3</a></li> 4</a></li>

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

4 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

Separando a pgina HTML em partes

Vamos comear de cima para baixo, ou seja, no header.php (cabealho). Comece por criar um novo ficheiro no seu bloco de notas, copiar o cdigo deste o inicio at ao fim da div "header" e colar no bloco de notas. Depois grave com o nome header.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xh <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphpro <head> <title>Pgina 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>Descrio do site</h2> <ul id="nav"> <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina </ul> </div> 1</a></li> 2</a></li> 3</a></li> 4</a></li>

Depois do cabealho, passamos a div onde o contedo (artigos e sidebar) mostrado. Ento nos ficheiros index.php, single.php, page.php, archive.php e search.php, colamos toda a div "conteudo" com excepo da parte da sidebar. O cdigo este: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <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 cdigo da sidebar ficava aqui--> </div>

No colocamos o cdigo da sidebar no passo anterior, porque esse cdigo deve de ficar no sidebar.php, um ficheiro que contm todo o contedo da sidebar. 1 2 3 4 5 6 7 8 9 10 11 <div id="sidebar"> <ul class ="paginas"> <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina <li><a href="#">Pgina </ul>

1</a></li> 2</a></li> 3</a></li> 4</a></li>

<ul class ="categorias"> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 2</a></li>

5 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

12 13 14 15

<li><a href="#">Categoria 3</a></li> <li><a href="#">Categoria 4</a></li> </ul> </div>

Neste momento toda a parte do contedo tambm 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 cdigo restante. 1 2 3 4 5 6 7 8 <div id="footer"> <p>&copy; 2012 - Todos os Direitos Reservados</p> </div> </div> </body> </html>

Agora toda a pgina HTML que tnhamos no inicio est dividida em partes.

Como "chamar" outras partes dos temas

O prximo 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 pgina como o index.php, precisamos de "chamar" o cabealho (header.php), lateral (sidebar.php) e o rodap (footer.php): 1 2 3 4 5 <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

Cada uma destas tags devem de ser colocadas no lugar onde o cdigo das outras pginas deve de ser includo. Por exemplo, no index.php precisamos de incluir o header.php logo no inicio, o sidebar.php no lugar onde antes estava o cdigo da sidebar e no fim da pgina, temos que incluir o footer.php. Ento os ficheiros index.php, single.php, page.php, archive.php e search.php ficam assim: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?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.

6 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

Estes so os primeiro passos para a criao de um tema. Depois temos que adicionar vrias tags, criar o loop que vai fazer com que os artigos e pginas sejam mostradas e tambm criar um stylesheet para que o tema fique apresentvel nos navegadores de internet. Tudo isto ser falado nos prximos artigos.

Download dos ficheiros do tutorial

Download dos ficheiros do tutorial

Concluso
Neste primeiro artigo demos os primeiros passos na criao de um template para wordpress. Comeamos por saber onde que os temas esto, como so organizados, quantos ficheiros tem um tema, aprendemos a separar uma pgina HTML pelos vrios ficheiros do tema e tambm introduzimos pela primeira vez PHP nas pginas para "chamar" outras partes do tema. O mais bsico est feito. No prximo artigo vamos falar no stylesheet e tambm no header.php por isso fique atento! Se ainda no acompanha o wptotal, recomendamos que passe pela pgina de subscrio para saber como nos pode seguir Se tiver alguma dvida, deixe um comentrio. Este post faz parte de uma srie de artigos sobre a criao de wordpress themes: Como criar um Template WordPress - Introduo Como criar um Template WordPress - Style.css e Header.php Como criar um Template WordPress - Index.php e Archive.php Como criar um Template WordPress - Single.php, Page.php e 404.php Como criar um Template WordPress - Comments.php Como criar um Template WordPress - Sidebar.php, Functions.php e Footer.php

Receba os Artigos via Email Ao subscrever a nossa newsletter, passa a receber os novos artigos por email e informaes sobre os nossos passatempos. gratuito e sem Spam.

Escrito por Sara Vieira Eu sou uma Webdesigner e programadora baseada em espinho com uma paixo pelas novas vertentes do webdesign como o Wordpress, HTML5 e CSS3. Artigos Relacionados:

Como configurar o wp-config.php

7 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

Como Mostrar uma Mensagem Automtica num Determin()

Como Escolher o Editor HTML por defeito

Como Criar um WordPress Theme Parte 4

8 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

83 comentrios

Recente

Comunidade

Partilhar

Cornlio Jos Wiedmann

legal ein cara

Cornlio Jos Wiedmann

bacana n, eu tb curti

Cornlio Jos Wiedmann

tu tb curtiu? eu tb cara

Cornlio Jos Wiedmann

Que legal, me add no skype ou face corneliocjw ou procura no face "Cornlio Jos Wiedmann" Abrao a todos

Jurandir Batista

HEUSHEUSHEAUHSAEUAHSEUAHESUAHEAESAUEHSUHEAUHASUHEAE me, tow no print

Edgar Ferreira

abriu a mente :) Obrigado! Tudo que no sabemos fazer, parece ser um monstro terrvel e assustador, ao entendermos como funciona, descobrimos que trata-se de uma verdadeira 'mo na roda' hehehe, bora estudar mais e acompanhar a WP Total (y)

Stephannie Suzart

Parabns!! Estou "tentando" criar o meu prprio site, e graas a vocs estou entendendo muito mais o wordpress... :)

Jocelio

Cara Parabns pelo artigo ja estou ancioso para ver os proximos artigos.
9 de 11 16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

RSS Feed Twitter Facebook Google Plus Subscreva a Newsletter:

Temas Premium em Destaque:

Sries de Artigos:

Apoio:

10 de 11

16/09/2013 12:38

Como Criar um Template Wordpress - Parte 1

http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/

Sobre Ns: O WP Total um blog criado em janeiro de 2009 e que se dedica a partilha de contedo e informao til para todos os que usam o WordPress... continue a ler. Links: Temas Premium Como Criar um Tema Como Criar um Blog CDN:

2009 - 2013 WP Total Arquivo Contacto Termos e Condies

11 de 11

16/09/2013 12:38