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.
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!
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.
Pingback: Como criar um tema para o WordPress - parte III
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!
Pingback: Como criar um tema para o WordPress - parte IV
Pingback: Como criar um tema para o WordPress - parte V
Pingback: Como criar um tema para o WordPress - parte V
Pingback: Os 10 Melhores Sites para Baixar Themes para WordPress | PedroMenezes.com
Pingback: Boas Vindas « Blog do Universo Sertanejo
Pingback: pBlog, Personalize seu blog Wordpress » Blog Archive » Como criar um tema para o WordPress - parte II
É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.
Pingback: Themas Templates modelos de layouts design wordpress donwload e links diversos | Blog do teo
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!
Pingback: Oito Passos Para... um novo visual | inovaVOX.com
Pingback: Os 10 Melhores Sites para Baixar Themes para WordPress « :: vida digital ::
Pingback: pBlog: dicas, truques e macetes para Wordpress
Pingback: Criar template para Wordpress - Templatr Template Generator
muito bom esse tutorial.. mas tenho preguiça de seguir haha
Pingback: Neviim
Pingback: O primeiro template para Wordpress que fiz por PDL - Puta da Loucura
Pingback: Não sabe fazer? procure um tutorial : Info Dinheiro
Pingback: maurizansanteli
Pingback: leobaiano
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.
Pingback: Blog do Gustavo » Blog Archive » Atualização do Pagerank
Valee mesmo amigo, era isso que eu estava procurando
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.
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.
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.
boa, boa…
já estou dando uma estudada….
Mto bom o tutorial. Me ajudou bastante!
Pingback: Guiiih Tutoriais » Como criar um tema para o WordPress - parte II
Pingback: Dabliuerre.com » Os 10 Melhores Sites para Baixar Themes para WordPress
Érico,
Fui no seu tutorial “Instale o wordpress no seu computador”, baixei a versão 3.0 do EasyPhP ( o seu link estava com erro mas achei o correto), criei o banco de dados e na hora da instalação do wordpress ele dá erro devido a não achar o banco de dados. Mysql está lá mas o wordpress não localiza. Deve ser questão de diretório,mas não sei como proceder.
Tem uma dica?
Valeu pelo tutorial.
Paulo, existem vários pacotes Apache + MySQL + PHP, eu prefiro o XAMPP, que trás o PhpMyAdmin.
Amigo, o tutorial está excelente, mas não consegui seguí-lo pois algumas partes do código não estão sendo visualizadas. Tentei com o Firefox 3 e o Internet Explorer.
Por exemplo, na parte:
Que é exatamente esta:
1.
2.
3.
4. Mighty
5.
6.
7.
8.
9.
10.
11.
Na linha 5 você diz que precisa ter determinado código, mas não está parecendo este código, imagino que o WordPress tenha apago o código. Poderia verificar isso? Pois gostaria de seguir o seu tutorial.
Obrigado e parabéns.
Edson, estou visualizando normalmente o código, não sei o pode ter acontecido para você não ver o código.
Olá! Adorei o tutorial. Nenhum outro site tem tão explicado quanto aqui. Mas me diga uma coisa… eu comprei um site na Insite e tenho enviar arquivos por FTP e nunca consigo porque dá erro. O que pode ser? É problema na hospedagem? Obrigada.
Gabriela, é comum acontecer problemas durante o upload de arquivos por FTP principalmente se são muitos arquivos como no caso do WordPress. A dica que tenho é para não enviar todos os arquivos de uma só vez. Envie primeiro uma pasta, depois outra e assim por diante.
Nossa q legal
To aqui instalando paso por paso
e to amando os pasos Rss
Muito obrigada pelo tuto..
Bjsss
Não consigo visualizar os códigos =/
Pingback: Mar-20-2009 web design links | w3feeds