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":
[subscribeform]
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:
/* Theme Name: WPTotal Theme URI: https://www.wptotal.com/ Description: WPTotal Author: WPTotal Author URI: https://www.wptotal.com/ */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;outline:0;vertical-align:baseline;margin:0;padding:0;} :focus{outline:0;} ol,ul{list-style:none;} table{border-collapse:separate;border-spacing:0;} caption,th,td{font-weight:normal;text-align:left;} blockquote:before,blockquote:after,q:before,q:after{content:"";} i,em{font-style:italic;} b,strong{font-weight:bold;} small{font-size:10px;} big{font-size:16px;} a img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} h1,h2,h3,h4,h5,h6{font-weight:bold;} a:link,a:visited{color:#0066cc;text-decoration:none;outline:0;} a:hover,a:active{color:#0055a9;text-decoration:none;outline:0;} body{background:#f4f4f4;font:normal 13px/150% Arial, Helvetica, sans-serif;color:#363636;} #corpo{ margin:20px auto; width:960px; background:#fff; } #header{ width:940px; margin:10px; float:left; } #header h1{ font-size:24px; margin-bottom:10px; } #header h2{ font-size:18px; margin-bottom:20px; } #nav{ width:940px; } #nav li{ display:inline; margin-right:30px; } #conteudo{ width:940px; margin:10px; float:left; } #artigos{ width:630px; float:left; } .artigo{ width:630px; margin-bottom:30px; float:left; } .artigo h1{ font-size:20px; margin-bottom:10px; } .artigo h2{ font-size:16px; margin-bottom:10px; } .artigo p{ margin-bottom:10px; } #sidebar{ width:300px; float:right; } .widget{ width:300px; margin-bottom:20px; } .widget h3{ font-size:14px; margin-bottom:10px; } #footer{ width:940px; margin:10px; font-size:11px; text-align:center; }
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á):
<link rel="profile" href="http://gmpg.org/xfn/11" /> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php wp_title(''); ?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>
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:
<?php bloginfo('name'); ?> <?php bloginfo('description'); ?>
Só tem que copiar cada uma e substituir dentro das tags <h1> e <h2> que estão na div "header":
<h1><?php bloginfo('name'); ?></h1> <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:
<?php wp_list_cats('sort_column=name'); ?>
Se você preferir mostrar as páginas em vez das categorias, use a seguinte tag:
<?php wp_list_pages('title_li='); ?>
No fim destas alterações todas temos o seguinte código no nosso 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> <link rel="profile" href="http://gmpg.org/xfn/11" /> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php wp_title(''); ?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?> </head> <body> <div id="corpo"> <div id="header"> <h1><?php bloginfo('name'); ?></h1> <h2><?php bloginfo('description'); ?></h2> <ul id="nav"> <?php wp_list_cats('sort_column=name'); ?> </ul> </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
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! 🙂
- 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
Ola, quando crio o menu deixo para mostar como categorias porem as minhas subcatgorias nao aparecem, como fazer?
Estou adorando esse tutorial, obrigada
Como eu coloco uma imagem no header?
fiz tudo igual no tutorial, mas ele nao esta chamando o css, nao sei porque...
o que é Markup?
nossa esta ficandio lindo meu tema., obrigadaaaaaa, sempre paguei por temas e conseguir fazer um é um máximo
e se eu quiser colocar imagens, oq eu faço???
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!
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?
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 informações, com excessão de que estou usando html5 e css3 com base em grids e vou precisar adicionar algumas bibliotecas javascripts e jquery, qual seria a forma correta de inseri-lo, tem um tutorial sobre o assunto? Obrigado...
Olá Marcos,
funciona tudo como um template simples em HTML. Os scripts normalmente são inseridos no cabeçalho, em alguns casos pode colocar no fim da página (footer.php) para diminuir a velocidade de carregamento.
Espero ter ajudado.
Por que o topo não fica alinhado para cima? Tipo ele fica centralizado só que ficar com uma pequena margem.
Primeiramente obrigado pelo o artigo.
O que ocorre e o seguinte, mesmo copiando os arq. disponibilizados por vc, ocorre o seguinte erro:
Fatal error: Call to undefined function get_header() in C:wampwwwwptotalindex.php on line 1.
como na mensagem e percebido, to usando o wamp.
Obrigado novamente!
o meu é o mesmo problema do maciel
ele só aparece assim:
Titulo do artigo 1
Postado por administrador em 16/01/2012
Conteudo do artigo
Titulo do artigo 2
Postado por administrador em 16/01/2012
Conteudo do artigo
o que pode ser, porque não consigo visualizar a página como o exemplo, que você deu acima, já puxando o css, me parece que ele não reconhece nada.
não sei o que pode ser, por favor me ajude, estou tentando fazer um blog, mas empaquei aqui.
obrigada!
Olá Tércia,
o único problema que o Maciel fala é o dos problemas com os caracteres, nesse caso deverá de fazer o seguinte (vou citar o que disse a ele):
"se você usar o Notepad++ há uma opção para converter os ficheiros para “UTF8 Sem BOM” (ou qualquer coisa assim), em principio resolve esse problema dos caracteres especiais."
Se for outra coisa, o melhor mesmo fazer o download dos ficheiros do tutorial e comparar com os seus para ver onde está o problema. Em último caso, se não tem experiência, veja se um tema já pronto serve para o seu blog. Pode não ser preciso criar um template de raíz 🙂
Celso, após eu partir para a tag <link rel="stylesheet" type="text/css" media="all" href="" /> ele ficou mais próximo do teu exemplo, o erro é que ele não está reconhecendo os acentos e caracteres especiais...e não reconhece a sidebar tbm no painel administrativo.
De qualquer forma eu vou tentando aqui, e parabéns mesmo pelo tutorial, já fazia um bom tempo que estava procurando um tutorial assim! Agora é aguardar ansiosamente pela parte 5! =)
Att,
Maciel
Olá Maciel,
se você usar o Notepad++ há uma opção para converter os ficheiros para "UTF8 Sem BOM" (ou qualquer coisa assim), em principio resolve esse problema dos caracteres especiais. Já não me lembro muito bem porque agora uso um mac.
Sobre a sidebar, é normal que ainda não reconheça porque o tema ainda não está pronto. Neste momento ainda não chega-mos a parte da sidebar: https://www.wptotal.com/como-criar-um-wordpress-theme-parte-4/
Olá Celso, tudo bem?
Bom, primeiramente, parabéns pelo artigo.
Segundo, eu copiei os código no notepad++ direto do site no meu wordpress, porém o resultado não ficou igual, mesmo dando control C e control V.
Minha página saiu assim:
Titulo do Site
Descri��o do site
P�gina 1
P�gina 2
P�gina 3
P�gina 4
Titulo do artigo 1.....
Pode me dizer o que eu posso ter errado, pelo menos uma suspeita, por favor?
Obrigado,
Maciel
Olá Maciel,
não consigo ver o seu código fonte (os comentários convertem o código html) por isso o melhor é você fazer o download dos ficheiros desta parte do tutorial (os links estão em cima, no fim do post) e ver se alguma coisa está mal.
Olá,
Parabéns por postar dessa maneira tão simples e tão direta estas explicações. Estou colocando um domínio próprio no WordPress, o que estava faltando era um site mais didático que me ajudasse nessa tarefa. Obrigado.
Olá Davi,
obrigado pelo comentário 🙂
Olá amigo blz, gosto muito do seu site e o que me fazia visitalo era o analisa de sites do seu site muito bom poderia colocar novamente.
Olá Mateus,
infelizmente o sistema que usavamos para a página trabalhar estava com problemas e deixou de funcionar recentemente. Não tenho datas para o serviço voltar a estar online.
Oi amigo.
É muito difícil ler um artigo tão bem escrito e didático e não deixar um comentário agradecendo.
Parabéns e espero ansiosamente a parte 3 do artigo.
Fábio Fontana de Souza
Olá Fábio,
obrigado pelo comentário e pelo elogio. A 3ª parte do artigo já foi publicada: https://www.wptotal.com/como-criar-um-wordpress-theme-parte-3/
Cara mais um artigo simples e completo muito bom no aguardo do próximo.
Olá Charles,
obrigado pelo comentário. Vamos tentar continuar com a simplicidade nos próximos artigos 🙂
Tenho uma pequena duvida no mark-up?
O que é que isso é?
Quando falo em markup no artigo, refiro-me ao código que o browser vai encontrar na página (html, css).
Obrigado percebido 😀
Brilhante artigo, muitos parabens pelo artigo. Ficou mesmo nice 😀
Bem explicativo, bem escrito, mesmo muito bom.
Fico á espera que saiam as outros artigos da série tão bom com este em breve.
Cumprimentos.
Obrigado pelo comentário 🙂