Neste tutorial explicarei como criar um tema para o WordPress baseado em um template XHTML/CSS. Como não sou designer e nosso objetivo aqui não é criar um template e sim um tema para o WordPress, fui no OSWD e escolhi um template, o escolhido foi o Mighty, desenvolvido pelo Kulor.
Template Mighty
Um detalhe importante, na verdade dois, primeiro: para a completa compreensão deste tutorial é necessário que você saiba HTML e CSS, se souber alguma coisa de PHP será ótimo mas não é essencial. Segundo: para tornar mais rápido e prático o desenvolvimento do tema eu recomendo que você instale o WordPress no seu computador, eu já fiz um tutorial explicando como fazer isso, espero que lhe seja útil.
Nesta primeira parte do tutorial explicarei onde colocar os arquivos, como o WordPress reconhece seu tema e como criar o cabeçalho. Vamos lá, acesse a pasta wp-content/themes, que está localizada dentro do seu WordPress no seu computador ou no seu servidor, crie uma pasta com o nome da sua template, no meu caso será Mighty, e salve os arquivos da template. Qualquer tema do WordPress deve ter no mínimo dois arquivos, index.php e style.css. No nosso caso teremos mais, são eles: index.php, header.php, sidebar.php, footer.php, comments.php, style.css, screenshot.png e mais uma pasta chamada images (que contem as imagens utilizadas na template). Na medida que formos construindo a template irei explicando para que serve cada um destes arquivos.
Antes de entrarmos diretamente na modificação dos arquivos faremos logo a imagem de preview do tema, que aparece na administração, no momento em que você está selecionando as templates. O arquivo deve ser chamar screenshot.png e possuir 300×225 pixels. Deverá ser salva na pasta do tema como todos os outros arquivos, no nosso caso wp-content/themes/mighty. Lembrei agora de uma dica muito legal que sempre utilizo quando tenho alguma dúvida, vejo como foi feito nos outros templates, principalmente no Classic e Default, que foram os primeiros temas do WordPress.
A primeira modificação a ser feita será no arquivo style.css. Neste arquivo deveremos inserir as informações sobre a template, que o WordPress utilizará para reconhecer como um tema e exibirá na seção Presentation>Theme do administrador. Se estes dados não forem inseridas no início do style.css, o tema não aparecerá para você escolher na administração. As informações que deverão ser inseridas são as seguintes:
/* Theme Name: Mighty Theme URI: http://www.pblog.com.br/ Description: Tema desenvolvido por Erico Oliveira baseado no template Mighty Author: Erico Oliveira Author URI: http://www.pblog.com.br Version: 1.0 */
Acredito que aqui não há nada a ser esclarecido, tudo é bem óbvio. Vamos adiante.
O próximo arquivo que faremos é o header.php, ou seja, o cabeçalho. Copiaremos o trecho do código referente a esta parte da template:
Cabeçalho do tema Mighty
Que é exatamente esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mighty</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <link rel="stylesheet" href="style.css" media="all" type="text/css" /> <link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" /> </li> </head> <body> <div id="header"> <div class="subContainer"> <div id="logo"> <div id="box">MIGHTY</div> <p>Template by James Broad</p> </div> </div> </div> <div id="navigation"> <ul> <li id="active"><a href="">Home</a></li> <li><a href="">About Mighty</a></li> <li><a href="">Products</a></li> <li><a href="">Services</a></li> <li><a href="">Contact Us</a></li> </ul> </div>
Agora iremos substituir parte do código estático do HTML pelas tags do WordPress. Para quem não está muito familiarizado com PHP ou outra linguagem dinâmica o negócio funciona assim: na linha 5 do código HTML, por exemplo, temos e iremos substituir por . Desta maneira quando o arquivo header.php for solicitado, o servidor irá processar todos os trechos de códigos compreendidos entre e ?> antes de enviar para o seu browser, neste caso ele substituirá a tag bloginfo('name'); pelo título do blog que você informou no administrador do WordPress. Ok? Vamos então ver como ficou todo código com as tags do WordPress.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="all" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<li></li>
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<div class="subContainer">
<div id="logo">
<div id="box"><?php bloginfo('name'); ?></div>
<p><?php bloginfo('description'); ?></p>
</div>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
Agora vou explicar todas tags utilizadas neste cabeçalho. Se você quiser saber mais detalhes sobre as tags ou conhecer as demais tags do WordPress eu recomendo uma visita ao Codex>Template Tags (em inglês, ok?).
- bloginfo('name') - este quase dispensa explicações, nome do blog;
- bloginfo('version') - versão do WordPress;
- bloginfo(’html_type’) - "Content-type" do seu blog;
- bloginfo(’charset’); - codificação de caracteres utilizada no blog;
- bloginfo(’stylesheet_url’) - CSS do seu tema;
- bloginfo(’rss2_url’) - RSS 2.0 do blog;
- bloginfo(’rss_url’) - RSS 0.92 do blog;
- bloginfo(’atom_url’) - Atom do blog;
- wp_head() - é uma tag especial que permite que certos plugins insiram códigos no cabeçalho de seu tema. Quando esta tag não é inserida vários plugins deixam de funcionar, então não esqueça de colocá-la em todos os seus temas;
- bloginfo('description') - descrição do blog;
- get_option('home') - na verdade trata-se de uma função e não uma tag, por isso deve vir precedida da função echo do PHP, que exibe o resultado de uma função ou variável. Neste caso irá retornar a URL inicial do blog;
- wp_list_pages('title_li=') - exibe uma lista com todas as páginas existentes.
Terminamos assim a primeira parte do nosso tutorial. Na próxima etapa falaremos sobre o corpo principal do site, onde são exibidos o objetivo de todo blog, os posts.
Pingback: Como criar um tema para o WordPress - parte I | João Andrade l Web Designer
Pingback: Como criar um tema para o WordPress - parte II | João Andrade l Web Designer
Pingback: Como criar um tema para o WordPress - parte V | João Andrade l Web Designer
Pingback: Como criar um tema para o WordPress - parte III | João Andrade l Web Designer
Pingback: Rodrigo
Pingback: Como criar um tema para o WordPress – parte I | pBlog
Parabéns! Tutorial muito bom pra quem quer começar a fazer os próprios themes…como eu =P, valeu pela ajuda!
Pingback: Delicious Over 50
Pingback: Mayumi Sato
Amigos, qual o melhor editor para editar os temas para WordPress? estou começando agora a usar WordPress, to usando no momento o DW.
Érico, Parabéns pelo blog e pelos posts
A maioria dos arquivos para blog é em php. Sendo assim, uma sugestão é usar um editor próprio. Há vários na net. Eu uso PHPEditor.
Pingback: Rafael Mota
gostei das dicas.
muito bom
Pingback: Everson Leite Costa
bem legal
WP é realmente tudo isso que falam né?!
Segue o link pro CODEX em portugues!
http://codex.wordpress.org/pt:P%C3%A1gina_Inicial
bração
vlw e fuizzz
Ai feraaaa muito bom seu trabalho…
so que ainda to com muitas duvidas…. não consegui instalar ainda o wordpress no meu pc…quando chega na parte de instalação do wordpress da um erro..ele não conecta ao servidor….
Seria uma boa se vc disponibilizasse umas videos-aulas…ajudaria muito…
consegui fazer boa parte do que vc citou na instalação….
Continue com o belo trablho…
abração de um futuro blogueiro…
ler todo o blog, muito bom
Pingback: ricardo
Pingback: ricardo
Pingback: Erika Sarti
Pingback: Erika Sarti
Sim e as imagens onde referenciar ?
Olá,
apesar de ter colocado os comments no style.css como foi falado, o tema nao aparece no amdmin do site. alguma ideia?
obrigada.
Eu estou com o mesmo problema da Keyth.
O tema não aparece nos themes do wordpress que eu instalei no computador. Poderia ajudar?
Keyth e Grazik,
Para o tema ser exibido na ardministração do WordPress o arquivo CSS deve se chamar obrigatoriamente style.css, o cabeçalho deve ser igual ao mostrado no post (mudando apenas o nome do tema, o autor, etc) e ele deve estar localizado na raiz do tema, ou seja, não pode estar dentro de uma pasta.
Primeiramente, gostei muito do seu tutorial! está me ajudando bastante…
Eu nem ia comentar isso pq o post tem taaaanto tempo, mas como vejo que ainda tem atividade nos comentarios. Mas parece que tem um pequeno erro na linha 8 da primeira listagem de código e na linha 11 da segunda…parece que tem uns ‘s perdidos…hahahaha
nao sei se foi de proposito, mas no pacote final que vc disponibilizou para download eles nao aparecem…
eu sei q isso nao é nada demais, mas eu tbm tenho um blog e gosto qnd as pessoas mostram essas coisas que deixamos passar
mais uma vez, obrigado pelo tutorial!
abraço!
Cara muito bom ,eu estava justamente estudando isso de como fazer themas, montar o css e tudo mais. Suas dicas vao me ajudar, vou guardar esse pagina para ver em casa a noite.
Valeu
Pingback: Como criar um tema para wordpress « WPDesign – Personaliza o teu blogue
Pingback: Nathan Araújo
Pingback: Leopoldo
Pingback: Delicious Over 50
Pingback: Nathan Araújo
Pingback: Bruno C.
Pingback: VICTOR
Pingback: Hugo Maestá ?
alguem me recomenda esse livro para aprender css
link: http://www.submarino.com.br/produto/1/21282957/
se sim me manda e-mail: gustavo gpr.ppg.br
aguardo,
gpr
Pingback: SINDOJUS/MG
Pessoal,
Só pra avisar que foi publicado o Livro WordPress 3 – Básico. E no site http://www.livrowordpress.com tem um cupom de 20% de desconto para compra do livro.
Se puderem divulgar.
Obrigado.
att,
Jeferson Sigales
bah, vou utilizar este tutorial para eu utilizar no meu projeto da faculdade,
onde eu desenvolvi um template em HTML5 e preciso fazer um blog para uma instituição especial da univercidade
então em vez de eu desenvolver tudo eu pego e faço só esta criação do template para wordpress
e tenho um blog dinamico sem um esforço maior
Pingback: DicasWP
Fala galera blz?
Estou com um pouco de dificuldades parece que meu css não carrega, ele manda pra uma pagina alternate em que ela se encontra vazia segue o meu código
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//BR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?> />
<link rel="alternate" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"/>
<title><?php bloginfo('name')?></title>
<?php wp_head();?>
</head>
<body>
<div id="header">
<div class="logo">
<h1><?php bloginfo('name')?></h1>
<h3><?php bloginfo('description')?><h3>
</div>
</div>
<div id="menu">
<ul class="itens">
Home
<?php wp_list_pages('title_li=');?>
</div>
</body>
</html>
[/CODE]
Os arquivos estyle.css esta upado e nada aconteçe
Pingback: Bruno Barbosa
Pingback: Thiago Oliveira
Show de bola, já havia aprendido a fazer o básico para WordPress mas sempre é bom aprimorar e descobrir novos detalhes.
muito bom o texto. depois vou por em prática e ver se funciona.
Pingback: junichi_y
Show de bola, com certeza vai pro meus favoritos, a informação ajuda demais, eu já editava alguns temas pelo Dreanweaver, mas com essa ajuda da pra fazer mais ainda!
Obrigado ai man
Pingback: Wellington Renato
Pingback: junichi_y
Graças as suas dicas fiz este site com worspress: pizzafast.com.br. climagemmg.com.br, partnerrubber.com.br e por ai vai meu amigo…
Exelente tutorial,
realmente falta algo assim em pt-Br! rsrs
Parabens!!
Porque tem a(s) tag(s)
no 1º exemplo do header sem o php
no 2º exemplo do header com o php
?
Abraço!