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.
Parabéns! Grande iniciativa!!
Honestamente prefiro juntar tudo numa página só INDEX.PHP e fazer um STYLES.CSS
Muito mais simples e eonfunde menos a cabeça dos iniciantes…
Show cara..Parabéns
ola legal o post.. bacana
Otimo artigo
Bom, gostaria de saber como crio mais regiões p/ colocar widgets no meu tema. Digamos que queira colocar uma região footer que nao meu template não a tenha.
Agradeço desde ja a atenção recebida.
Ola galera estou com um problema que meu tema não reconhese as widget diz que o tema não tem widget e agora o que devo fazer se alguem pode me ajudar ficarei grato.
Simplesmente Sensacional
Pingback: Como criar um tema para o WordPress – parte I « Presstenção Videos
Pingback: Como criar um tema para o WordPress – parte II « Presstenção Videos
Pingback: flags
That's what i'm talking about!!!
Érico, parabéens!
Muito bom esse tutorial, explica passo a passo, e está bem direto e objetivo.
Agora sei por onde começar.
Abs.
Pingback: Estrutura de theme WordPress « Laboratório Tag
Pingback: FreelanceWP.com
Exelente…eh simplismente magnifico
Pingback: Rodolfo Abrantes
Pingback: FreelanceWP.com