Como Criar um WordPress Theme - Parte 2 http://www.wptotal.

com/como-criar-um-wordpress-theme-parte-2/

WP Total

Inicio
Templates
2 Colunas
3 Colunas
Magazine
Galeria
Minimalistas
Temas Premium
Outros
Código / Hacks
Plugins
Artigos
Dicas e Sugestões
WordPress
Ganhar Dinheiro
Motores de Busca
Redes Sociais
Alojamento Web
Design
Outros
Notícias
Passatempos
Reviews
Sobre Nós
Contacto

Wordpress Total > Artigos > Wordpress > Como Criar um WordPress Theme – Parte 2

Como Criar um WordPress Theme – Parte 2

Publicado a 6 de Fevereiro de 2012 - Código / Hacks, Wordpress - 30 Comentários
19
13 11
Gosto

Enviar Tweet

Depois do primeiro artigo onde fizemos uma introdução sobre como criar templates para wordpress, começamos a
trabalhar nos ficheiros individuais que fazem parte do tema. Seguindo a ordem definida no inicio, na segunda parte desta
série de artigos vamos falar nos ficheiros style.css e header.php.

Se esta informação é do seu interesse, subscreva a nossa newsletter para receber os artigos no seu email e ainda participar
no nosso passatempo mensal onde oferecemos vários prémios. Escreva o seu email e clique em "subscrever":

Escreva o seu email e clique em "subscrever":

1 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

style.css
No ficheiro style.css fica todo o código css que é responsável pela a aparência dos elementos que estão na página/tema.
Neste ficheiro você pode definir tamanhos, cores, margens, etc, sempre usando css.

Se quer aprender css ou melhorar os seus conhecimentos, um dos melhores sites é o W3Schools que tem uma categoria
destinada ao CSS: www.w3schools.com/css/.

Como fazer
Primeiro começamos por criar um novo ficheiro e guardamos na pasta do tema com o nome style.css. Depois começamos
a definir os atributos de cada elemento da página.

Nós criamos um com uma personalização muito simples e básica e que funciona com os ficheiros que criamos na primeira
parte do tutorial. Repare que adicionamos um comentário no inicio do ficheiro, a informação que você escrever nesta parte
será usada na página de ativação do tema:

Este é o nosso CSS, se quiser pode usa-lo. Copie e cole no seu style.css:

1 /*
2 Theme Name: WPTotal
3 Theme URI: http://www.wptotal.com/
4 Description: WPTotal
5 Author: WPTotal
6 Author URI: http://www.wptotal.com/
7 */
8
9 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acr
10 :focus{outline:0;}
11 ol,ul{list-style:none;}
12 table{border-collapse:separate;border-spacing:0;}
13 caption,th,td{font-weight:normal;text-align:left;}
14 blockquote:before,blockquote:after,q:before,q:after{ content:"";}
15 i,em{font-style:italic;}
16 b,strong{font-weight:bold;}
17 small{font-size:10px;}
18 big{font-size:16px;}
19 a img{border:0;}
20 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
21 h1,h2,h3,h4,h5,h6{font-weight:bold;}
22 a:link,a:visited{color:#0066cc;text-decoration:none;outline:0;}
23 a:hover,a:active{color:#0055a9;text-decoration:none;outline:0;}

2 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

24 body{background:#f4f4f4;font:normal 13px/150% Arial, Helvetica, sans-serif;color

25
26 #corpo{
27 margin:20px auto;
28 width:960px;
29 background:#fff;
30 }
31
32 #header{
33 width:940px;
34 margin:10px;
35 float:left;
36 }
37
38 #header h1{
39 font-size:24px;
40 margin-bottom:10px;
41 }
42
43 #header h2{
44 font-size:18px;
45 margin-bottom:20px;
46 }
47
48 #nav{
49 width:940px;
50 }
51
52 #nav li{
53 display:inline;
54 margin-right:30px;
55 }
56
57 #conteudo{
58 width:940px;
59 margin:10px;
60 float:left;
61 }
62
63 #artigos{
64 width:630px;
65 float:left;
66 }
67
68 .artigo{
69 width:630px;
70 margin-bottom:30px;
71 float:left;
72 }
73
74 .artigo h1{
75 font-size:20px;
76 margin-bottom:10px;
77 }
78
79 .artigo h2{
80 font-size:16px;
81 margin-bottom:10px;
82 }
83
84 .artigo p{
85 margin-bottom:10px;
86 }
87
88 #sidebar{
89 width:300px;

3 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

90 float:right;
91 }
92
93 .widget{
94 width:300px;
95 margin-bottom:20px;
96 }
97
98 .widget h3{
99 font-size:14px;
100 margin-bottom:10px;
101 }
102
103 #footer{
104 width:940px;
105 margin:10px;
106 font-size:11px;
107 text-align:center;
108 }

Este será o resultado:

header.php
Com o style.css já pronto, vamos abrir o ficheiro header.php que criamos na primeira parte deste tutorial.

Neste ficheiro ficam algumas tags que são importantes para o tema e alguns plugins funcionarem. Estas linhas de código
devem de ser adicionadas entre as tags <head> e </head> (apague as duas linhas de código que estão lá):

1 <link rel="profile" href="http://gmpg.org/xfn/11" />

4 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

2 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php

3 <title><?php wp_title(''); ?></title>
4 <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_ur
5 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
6 <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script(

Cada linha de código faz uma coisa diferente, aqui está a explicação de cada linha:

linha 1: indica ao browser como o mark-up deve de ser usado;

linha 2: indica o tipo de conteúdo e o conjunto de caracteres que está a ser usado;
linha 3: a tag wp_title vai gerar um título diferente para cada página. Esta tag pode ser mais trabalhada, mas falamos
nisso noutro artigo;
linha 4: insere automaticamente o stylesheet criado anteriormente (style.css). O wordpress deteta a sua localização e
insere o url do ficheiro;
linha 5: gera o url de pingback, não é obrigatório mas convém usar;
linha 6: ativa o suporte a comentários com vários níveis e também tem a tag wp_head que serve para inserir outras
linhas de código nesta zona do tema (é uma tag muito usada pelos plugins)

Ainda no header.php, umas linhas mais a baixo, temos já o "corpo" da página onde podemos adicionar 3 outras tags: uma
para o título (nome do site), uma para a descrição e outra tag para listar as categorias no menu.

Aqui é opcional: você pode escrever manualmente, pode usar tags php do wordpress ou usar uma imagem para o logotipo.
Nós vamos usar as tags do wordpress para o título e descrição do blog (o texto que aparece aqui pode ser alterado em
Opções > Geral).

As tags para mostrar o nome e descrição são estas:

1 <?php bloginfo('name'); ?>

2 <?php bloginfo('description'); ?>

Só tem que copiar cada uma e substituir dentro das tags <h1> e <h2> que estão na div "header":

1 <h1><?php bloginfo('name'); ?></h1>

2 <h2><?php bloginfo('description'); ?></h2>

Mais em baixo temos o menu e mais uma vez é uma escolha sua. Pode criar o menu manualmente usado html, usar alguma
tag do wordpress para listar as categorias (o mais usado) ou usar os menus personalizados do wordpress que permitem
adicionar ou remover links do menu através do painel de administração.

Nós optamos por mostrar as categorias, por isso vamos usar o seguinte código:

1 <?php wp_list_cats('sort_column=name'); ?>

Se você preferir mostrar as páginas em vez das categorias, use a seguinte tag:

1 <?php wp_list_pages('title_li='); ?>

No fim destas alterações todas temos o seguinte código no nosso header.php:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xh

2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphpro
3 <head>
4
5 <link rel="profile" href="http://gmpg.org/xfn/11" />
6 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?ph
7 <title><?php wp_title(''); ?></title>
8 <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_u
9 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
10 <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script(
11
12 </head>

5 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

13 <body>
14 <div id="corpo">
15 <div id="header">
16 <h1><?php bloginfo('name'); ?></h1>
17 <h2><?php bloginfo('description'); ?></h2>
18
19 <ul id="nav">
20 <?php wp_list_cats('sort_column=name'); ?>
21 </ul>
22 </div>

Depois de guardar todas as alterações, o seu header.php está pronto e podemos passar para as outras partes do tema.

Download dos ficheiros

Download dos ficheiros style.css e header.php
Download de todos os ficheiros criados até agora

Conclusão
Nesta segunda parte da série de artigos onde ensinamos a criar wordpress themes, começamos já a trabalhar nos ficheiros
individuais que fazem parte de um tema. Já temos a aparência "desenhada" (no style.css) e as tags mais importantes no
cabeçalho (header.php).

No próximo artigo vamos falar em dois ficheiros que são responsáveis por mostrarem os artigos na página inicial e nas
páginas de arquivo (categorias, tags, etc). Se não quer perder nenhum artigo, passe pela página de subscrição e esteja
sempre atualizado sobre o que publicamos aqui no wptotal.

Qualquer dúvida deixem um comentário!

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

Como criar um Template WordPress - Introdução

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 informações sobre os nossos passatempos. É
gratuito e sem Spam.

Escrito por Celso Azevedo

Celso Azevedo, 21 anos, português, criador do wptotal.com, adepto das novas tecnologias e webmaster / blogger a tempo
inteiro.

Artigos Relacionados:

6 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

Como Criar um WordPress Theme – Parte 3

Como configurar o wp-config.php

Como Mostrar uma Mensagem Automática num Determin(…)

Como Criar um WordPress Theme – Parte 4

7 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

30 comentários ★ 0

Recente Comunidade Partilhar

PJ Kenzie •
Como eu coloco uma imagem no header?

Guest •
fiz tudo igual no tutorial, mas ele nao esta chamando o css, nao sei porque...
2

Anônimo •
o que é Markup?

Elizabeth •
nossa esta ficandio lindo meu tema., obrigadaaaaaa, sempre paguei por temas e conseguir
fazer um é um máximo

gabriel •
e se eu quiser colocar imagens, oq eu faço???

Pedro •
Voce é craque meu camarada!

Montei meu theme aqui e eu nem sabia que podia montar.

Precisa de ajudar pra montar um ebook, um curso de WP, um membership, qualquer coisa
relacionado a infoprodutos, pode contar commigo.

abraço!

daniel •
opa celso blz?
primeiro parabens pelo tudo, foi o melhor que eu ja vi
mas meu problema e o seguinte, eu queria desenvolver SITE com o wp e não blog. todos os
que eu achei se referem a blog e não a site, vc teria algum para indicar que explicasse como
criar um SITE no wp?

Marcos Melone •
Primeiro parabéns pelo tutorial, sou novo em wordpress e php, trabalho com html e css, e
veio bem a calhar esse tutorial estou construindo um tema customizado com base em suas

8 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

RSS Feed Twitter Facebook Google Plus

Subscreva a Newsletter:

Temas Premium em Destaque:

Séries de Artigos:

Apoio:

9 de 10 16/09/2013 12:40
Como Criar um WordPress Theme - Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/

Sobre Nós:

O WP Total é um blog criado em janeiro de 2009 e que se dedica a partilha de conteúdo e informação ú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 Condições

10 de 10 16/09/2013 12:40