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.
Todos os templates que existem lá, você pode copiar, modificar e utilizar da forma que quiser, desde que cite o autor. Então escolha um template ou crie o seu próprio e vamos colocar a mão na massa.
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: MightyTheme URI: http://www.pblog.com.br/Author: Erico OliveiraAuthor URI: http://www.pblog.com.brVersion: 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:
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> <li class="t0"><code></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 <?php 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'); ?>" /><?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 todas as pages existentes, precedidas de
<li>e sucedidas por</li>.
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.
Pedro Menezes : 07 Junho 2007 às 7:25 pm
Demorou um pouco, mas chegou. Estava faltando bons tutoriais sobre isso nos blogs.
Embora não seja tão difícil de fazer, pode ser um pouco cansativo.
Parabéns pela iniciativa! :D
Érico Oliveira : 08 Junho 2007 às 9:47 am
Obrigado Pedro! Espero continuar com este mesmo entusiasmo por bastante tempo. :)
Marcus : 13 Junho 2007 às 8:47 pm
Muito boa a parte I, espero que você tenha pique para chegar até a última parte, porque os tutoriais em blogs brasileiros que tenho visto param na metade, isso é um pouco chato…estou muito a fim de fazer meu próprio tema e estou pesquisando pela net, gostei do site, parabéns :)
Dario : 16 Julho 2007 às 3:47 pm
Gostei do tutorial brother, talvez eu crie um pouco de vergonha na cara e deixe de preguiça pra começar a criar um tema próprio pro ticnervoso, apesar de gostar do que se encontra lá.
abraços.
Como criar um tema para o WordPress - parte III : 05 Agosto 2007 às 10:35 pm
[...] Como criar um tema para o WordPress - parte IPlugins que não podem faltar no seu blogComo criar um tema para o WordPress - parte IIInstale plugins e temas com apenas um cliqueColeção de Temas para o WordPressTema para WordPress com cara de CMSDiferentes estilos para os anúncios do Google AdsenseComo diferenciar os seus comentários dos comentários dos visitantesTema com 2 colunas e design primorosoUtilizando o FTP para enviar arquivos para o servidor [...]
Garcia Junior : 24 Agosto 2007 às 11:46 pm
cara, teu blog serviu pra eu aprender umas coisinhas sobre a programação no wordpress. descobri esse programa na semana passada e já criei um blog no meu site, veja lá e me diga o que acha: http://www.imagetica.net/blog.
Érico Oliveira : 25 Agosto 2007 às 10:18 am
Sempre fico mais motivado ao saber que meus tutoriais tem ajudado pessoas como você, a criar seus próprios blogs e personalizá-los. Parabéns!
Como criar um tema para o WordPress - parte IV : 26 Agosto 2007 às 8:18 am
[...] criar um tema para o WordPress - parte IIComo criar um tema para o WordPress - parte IPlugins que não podem faltar no seu blogColeção de Temas para o WordPressInstale plugins e temas [...]
Como criar um tema para o WordPress - parte V : 02 Setembro 2007 às 12:44 pm
[...] criar um tema para o WordPress - parte IIComo criar um tema para o WordPress - parte IPlugins que não podem faltar no seu blogColeção de Temas para o WordPressInstale plugins e temas [...]
Como criar um tema para o WordPress - parte V : 02 Setembro 2007 às 12:44 pm
[...] criar um tema para o WordPress - parte IIComo criar um tema para o WordPress - parte IPlugins que não podem faltar no seu blogColeção de Temas para o WordPressInstale plugins e temas [...]
Os 10 Melhores Sites para Baixar Themes para WordPress | PedroMenezes.com : 03 Setembro 2007 às 10:22 am
[...] Série - Como criar um tema para WordPress ~ o Érico Oliveira do Pblog está com esta série que está fazendo o maior sucesso! Se você não gosta de geradores ou de usar themes dos outros, dê uma passada lá! [...]
Boas Vindas « Blog do Universo Sertanejo : 07 Outubro 2007 às 2:03 pm
[...] Nao! Dessa vez nao eh um post meu e sim uma recomendacao para o pBlog, que fez recentemente esse post aqui: Como criar Tema para o Wordpress, parte [...]
pBlog, Personalize seu blog Wordpress » Blog Archive » Como criar um tema para o WordPress - parte II : 10 Outubro 2007 às 11:16 am
[...] criar um tema para o WordPress - parte IIComo criar um tema para o WordPress - parte IPlugin Digg style paginationTema para WordPress traduzido para portuguêsComo exibir tags no [...]
Cadu de Castro Alves : 30 Outubro 2007 às 9:05 pm
Érico,
não conhecia teu blog. Muito boa a tua iniciativa de escrever tutoriais sobre WP. Aqui no Brasil temos poucas fontes boas como esta.
Acabei de lançar um tema gratuito para WP voltado para portais. A minha idéia é criar e disponibilizar temas gratuitos que fujam ao formato padrão dos temas, ou seja, a cara de blog. Já tenho iniciados mais dois temas, também gratuitos, que em breve estarão disponíveis. Mas o foco dos temas ainda é segredo.
Parabéns pelo blog! Abraços!
runway : 03 Novembro 2007 às 5:46 pm
Criei um tema em css mas ele não aparece na lista. Alguem tem uma dica?
http://expectante.info
http://amopax.com
Julio : 30 Novembro 2007 às 3:09 am
amigo muito boa iniciativa, voce está de parabens por esse tutorial.
Themas Templates modelos de layouts design wordpress donwload e links diversos | Blog do teo : 31 Dezembro 2007 às 11:27 am
[...] Série - Como criar um tema para WordPress ~ o Érico Oliveira do Pblog está com esta série que está fazendo o maior sucesso! Se você não gosta de geradores ou de usar themes dos outros, dê uma passada lá! [...]
Akanga : 01 Janeiro 2008 às 2:03 pm
Muito bom !
DanielCastro : 01 Janeiro 2008 às 8:56 pm
Ótimo tutorial.
Estou indo ler as próximas partes e tenho certeza que vai me ajudar muito…
Obrigado por contribuir com a comunidade internauta ;)
Pablo Almeida : 01 Fevereiro 2008 às 10:22 pm
ES-PE-TA-CU-LAR! ;)
Oito Passos Para... um novo visual | inovaVOX.com : 02 Março 2008 às 8:00 am
[...] de como cortar uma cabeleira (só sei cortar cabelo com um “tosador”), muito menos como fazer um tema para blog no wordpress, sou péssimo professor. Na verdade escrevo este post para lhe apresentar o novo visual o blog Oito [...]
Os 10 Melhores Sites para Baixar Themes para WordPress « :: vida digital :: : 17 Março 2008 às 10:20 am
[...] Série - Como criar um tema para WordPress ~ o Érico Oliveira do Pblog está com esta série que está fazendo o maior sucesso! Se você não gosta de geradores ou de usar themes dos outros, dê uma passada lá!” [...]
pBlog: dicas, truques e macetes para Wordpress : 18 Março 2008 às 9:40 am
[...] Como criar um tema para o WordPress - parte I [...]
Criar template para Wordpress - Templatr Template Generator : 18 Março 2008 às 10:15 pm
[...] quem tiver interessado em aprender como criar um Tema Wordpress do zero encontrei tambem o post do PBlog que detalha em 5 posts como fazer um tema para seu blog Abraço a [...]
Patricia : 31 Março 2008 às 11:55 pm
muito bom esse tutorial.. mas tenho preguiça de seguir haha
O primeiro template para Wordpress que fiz por PDL - Puta da Loucura : 07 Abril 2008 às 3:14 pm
[...] Como criar um tema para o WordPress - parte I [...]
Não sabe fazer? procure um tutorial : Info Dinheiro : 28 Abril 2008 às 6:54 pm
[...] Como criar um tema para o WordPress - parte I [...]
WTF? Dicas e Noticias : 09 Julho 2008 às 12:51 am
Legal, estou começando a criar templates que é muito dificil mas chegarei lá seu post será uma grande ajuda….
Samuel Lamim de Carvalho : 11 Julho 2008 às 8:36 am
“Agora iremos substituir parte do código estático do HTML pelas tags do WordPress.”
Cara. infelizmente me perdi nessa parte.
onde vão os códigos deste passo? vc menciona um HTML, e acabei me perdendo. isso vai ser um arquivo novo? como chamá-lo?
mais até aqui to gostando um monte. instalei tudo certinho e tá funcionando legal.
parabens pelo tutorial. vou continuar as próximas partes. (derrepente acabo descobrindo a resposta pra essa pergunta)
^^
sumy : 21 Julho 2008 às 7:57 pm
Meu template possui três colunas.
Não sei para que serve a coluna da direita.
Peço ajuda.
Blog do Gustavo » Blog Archive » Atualização do Pagerank : 27 Julho 2008 às 6:58 am
[...] posso vir a colher frutos no futuro. Aproveito o espaço para agradecer as dicas que tenho lido no pBlog e no Fique-Rico, o que me ajudou a amadurecer e alcançar esse [...]
Cristiano : 05 Agosto 2008 às 8:48 am
Valee mesmo amigo, era isso que eu estava procurando
Sidnei : 22 Outubro 2008 às 11:37 am
Acredito que deu algum problema com o blog, pois nao estou conseguindo visualizar direito, nem no FF e nem no IE,
estou tentando fazer meu primeiro tema, mas acho que vou ter que esperar o site voltar ao normal, pois é dificil conteudo de qualidade na net, e aui é show de bola.
Sidnei : 22 Outubro 2008 às 5:13 pm
Pooooowww valeu pela atençao, amanhã no horário do almoço volto a meu exercicio diário de estudar WP e acompanhar seus tutoriais…
inflelizmente só me resta o horário de almoço pra fazeer algo ou aprender algo. :(
Valeu.
Johnny : 14 Novembro 2008 às 6:17 pm
Cara, seu blog não é uma mão na roda não, é a oficina inteira.
Parabéns e obrigado por se propor a isso tudo.