Como criar um tema para o WordPress - parte I
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.
30 Comentários
Inscreva-se nos comentários.
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
Obrigado Pedro! Espero continuar com este mesmo entusiasmo por bastante tempo. :)
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 :)
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.
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.
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!
É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!
Criei um tema em css mas ele não aparece na lista. Alguem tem uma dica?
http://expectante.info
http://amopax.com
amigo muito boa iniciativa, voce está de parabens por esse tutorial.
Muito bom !
Ótimo tutorial.
Estou indo ler as próximas partes e tenho certeza que vai me ajudar muito…
Obrigado por contribuir com a comunidade internauta ;)
ES-PE-TA-CU-LAR! ;)
muito bom esse tutorial.. mas tenho preguiça de seguir haha
Legal, estou começando a criar templates que é muito dificil mas chegarei lá seu post será uma grande ajuda….
“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)
^^
Meu template possui três colunas.
Não sei para que serve a coluna da direita.
Peço ajuda.
Deixe um comentário
Faça um trackback
14 Trackbacks/Pingbacks
Clique para mostrar ou ocultar trackbacks.