Como criar um tema para Wordpress

Preparei este tutorial principalmente para quem está iniciando seus conhecimentos sobre o desenvolvimento de temas para wordpress. É bem simples, aborda o mais básico possível, e acredito que será muito útil para quem está iniciando, pois o tutorial está bem objetivo.

Por Softwares Pular para comentários
Como criar um tema para Wordpress

Preparei este tutorial principalmente para quem está iniciando seus conhecimentos sobre o desenvolvimento de temas para wordpress. É bem simples, aborda o mais básico possível, e acredito que será muito útil para quem está iniciando, pois o tutorial está bem objetivo. Criar tema para wordpress basicamente é simples. No entanto, pode-se também criar temas super avançados usando as mais variadas funções e plug-ins disponíveis para wordpress.

Neste tutorial iremos criar um tema simples, iniciando primeiramente por um template padrão em html, depois iremos estrutura-lo e formata-lo com css. Depois disso iremos fatiar o template para wordpress, desse modo iremos criar index.php, header.php, footer.php e usar as folhas de estilos que iremos criar no decorrer deste tutorial. O ultimo passo é atribuir algumas funções dinâmicas para pegar dados e informações dinamicamente.
Vamos ao tutorial!

Crie um novo documento em html e salve-o com um nome qualquer. É nele onde iremos definir as divs. A primeira div a ser criada será a div "geral". Ela será responsável pela largura do template e pelo alinhamento centralizado. Dentro dela ficará as demais dvi. Veja:



Em seguida defini as divs header, menu, contente, footer:


Adicionando conteúdo às divs


Vamos agora definir conteúdos para as divs header, menu e footer. O content iremos personalizar por último. Na div header será adicionado um titulo e uma descrição. Ambos serão pegos dinamicamente. Pelo enquanto é só para ilustrar para depois formatarmos em css, e para quando tiver pegando dinamicamente já esta com o cabeçalho formatado. Veja:


Agora adicionaremos a div menu uma lista não ordenada. Também será apenas para ilustrar, pois quando formos configurar para wordpress o menu será pego dinamicamente. Veja:


Como disse, a div contente ficará sem conteúdo pelo enquanto, então definiremos o copyright do footer. Veja:


Todas as divs já estão prontas, agora iremos para a tag e vamos chamar uma folha de estilo com o nome style. Veja:


Detalhe: ainda não temos folha de estilo. Crie um documento em css e salve como style (style.css). poderia ser qualquer outro nome, mas como, por padrão o wordpress reconhece or style.css, vamos obedecer. Logicamente, é possível também usar outros nomes, porém não iremos abordar isso agora, portanto salve como style.css mesmo.

Resultado final do index.html




Tema para Wordpress, o Básico




Resultado no navegador:
http://www.oficinadanet.com.br//imagens/coluna/2760/7.png


Estruturando e formatando o template com css


Agora vamos estruturar e formatar o template. Crie um documento em css e salve-o com o nome style.css.
Zerando as margens:
*{margin:0; padding:0;}


Alinhando o site ao centro do navegador.
body{margin:0; text-align:center; background:#CCCCCC;}
#geral{text-align:left; margin:auto; width:960px;}


Estruturando e formatando o cabeçalho do blog.
#header{height:60px; background:#747E80; padding:10px;}
#header h1 a{font:26px "Trebuchet MS", Tahoma, Verdana, Arial; color:#D5E1DD; text-decoration:none;}
#header h1 a:hover{color:#F7F3E8;}
#header p{font:14px Verdana, Arial, Helvetica, sans-serif; color:#F7F3E8;}


Estruturando e formatando o menu.
#menu {background:#D5E1DD; height:30px;}
#menu ul{font:14px "Trebuchet MS", Tahoma, Verdana, Arial; list-style:none; padding:0; margin:0; }
#menu ul li{border-left:1px solid #06374F; border-top:0px; border-right:1px solid #06374F; border-bottom:none; line-height:30px; float:left; margin:0 1px 0 0; padding:0;}
#menu ul li a {text-align:center; display:block; padding-left:30px; padding-right:30px; text-decoration:none; color:#F2583E; font-size:11px; font-weight:bold;}
#menu ul li a:hover {background:#F7F3E8; color:#2B3E42; float:left;}


A div content ainda não iremos formatar. Segue abaixo, portanto, a estrutura do footer e sua formatação.
#footer{height:20px; background:#77BED2; padding:15px;}
#footer address{font:13px Verdana, Arial, Helvetica, sans-serif; color:#2B3E42;}


Resultado do código css:
*{margin:0; padding:0;}
body{margin:0; text-align:center; background:#CCCCCC;}
#geral{text-align:left; margin:auto; width:960px;}

#header{height:60px; background:#747E80; padding:10px;}
#header h1 a{font:26px "Trebuchet MS", Tahoma, Verdana, Arial; color:#D5E1DD; text-decoration:none;}
#header h1 a:hover{color:#F7F3E8;}
#header p{font:14px Verdana, Arial, Helvetica, sans-serif; color:#F7F3E8;}

#menu {background:#D5E1DD; height:30px;}
#menu ul{font:14px "Trebuchet MS", Tahoma, Verdana, Arial; list-style:none; padding:0; margin:0; }
#menu ul li{border-left:1px solid #06374F; border-top:0px; border-right:1px solid #06374F; border-bottom:none; line-height:30px; float:left; margin:0 1px 0 0; padding:0;}
#menu ul li a {text-align:center; display:block; padding-left:30px; padding-right:30px; text-decoration:none; color:#F2583E; font-size:11px; font-weight:bold;}
#menu ul li a:hover {background:#F7F3E8; color:#2B3E42; float:left;}

#footer{height:20px; background:#77BED2; padding:15px;}
#footer address{font:13px Verdana, Arial, Helvetica, sans-serif; color:#2B3E42;}


Como ficou nosso template:
http://www.oficinadanet.com.br//imagens/coluna/2760/td_css.png


Como você pode observar a área de conteúdo não aparece. Isso porque não temos conteúdo adicionado e nem definimos uma altura. A primeira parte concluímos. O próximo passo é fatiar o template para wordpress.

[PG1]

Fatiando o template para wordpress


Fatiar o tema é dividir cada parte do template em um arquivo. Por exemplo, você pega < html > até o fechamento da div menu e salva como header.php. A div content até seu fechamento, será o index.php. A div footer ate seu encerramento será salvo como footer.php. É necessário que você tenha o wordpress instalado em sua máquina. Crie uma pasta com o nome do seu tema dentro da pasta themes do wordpress. Crie um novo documento em php e salve-o como header.php. Abra o index.html que criamos anteriormente, e copie de < html > até o fechamento da div menu em seguida cole em header.php.

Resultado do header.php:




Tema para Wordpress, o Básico





Agora crie um novo documento em php e salve-o como index.php. Feito isso, copie a div content do template que trabalhamos anteriormente para o index.php. Segue abaixo o código do index.php:


Crie novamente mais um arquivo em php e salve-o como footer.php. Agora copie da div footer ate o fechamento da tag html. Codigo do footer.php:
    

Por ultimo, salve o style.css que criamos anteriormente na pasta de temas. Arquivos que temos até agora na pasta do tema que estamos trabalhando:
http://www.oficinadanet.com.br//imagens/coluna/2760/4.png


Mas o tema ainda não está pronto! Continuando...

Header:


Abra o index.php e adicione < ? get_header(); ? > no começo e < ? get_footer(); ? > no fim. Isso funciona como include no php. Isso faz com que chame o header.php e footer.php para o index.php.

Veja:

    

< ? get_header(); ? > - Chama header.php para o index.php.
< ? get_footer(); ? > - Chama o footer.php para o index.php.

Resultado no navegador:
http://www.oficinadanet.com.br//imagens/coluna/2760/7.png


Se você acessar a área administrativa do wordpress, você notará que o tema ainda não está disponível para usa-lo em seu blog. Para torna-lo visível em sua lista de temas na área administrativa do wordpress é necessário adicionar os comentários abaixo no inicio do style.css. Veja:
/*
Theme Name: Meu Primeiro Tema
Theme URI: http://www.marcianodias.com.br/
Description: Tema criado no tutorial para o Oficina da Net
Version: 1.0
Author: Marciano Dias
*/


Agora você pode ativar seu tema.
http://www.oficinadanet.com.br//imagens/coluna/2760/5.png


Formatação CSS:


Como você pode observar agora o template está completinho, porém ainda não está pegando a formatação.
Abra o header.php. Substitua de < !DOCTYPE html ... > até < body > por:

>


<?php wp_title(); ?> <?php bloginfo( 'name' ); ?>















Agora, vamos pegar o titulo do blog dinamicamente. Para isso dentro da tag h1 adicione:


E para pegar a descrição dininamicamente adicione:


Código completo:
    


Resultado no navegador:
http://www.oficinadanet.com.br//imagens/coluna/2760/td_css.png


Pegando o menu dinamicamente:


Apague toda a ul, incluindo as li e adicione:


Apartir de agora os menus serão pegos dinamicamente, basta criar novas páginas na área administrativa do wordpress para ver o resultado.
Pegando conteúdo das páginas e posts. Para pegar conteúdo adicione o código abaixo dentro da div content:



Resultado no navegador:
http://www.oficinadanet.com.br//imagens/coluna/2760/13.png


Aplicando CSS do Conteúdo:


Como você pode ter percebido, não há formatação ainda na área de conteúdo. Vamos formatar agora, portanto abra o arquivo style.css.
#content {background:#FFFFFF; padding:10px;}
#content h1 a{font:24px Arial, Helvetica, sans-serif; color:#2B3E42; text-decoration:none; margin:10px 5px 0px 10px;}
#content h1 a:hover{text-decoration:underline;}
#content p{font:13px Verdana, Arial, Helvetica, sans-serif; color:#333333; margin:10px 5px 0px 10px;}


Resultado:
http://www.oficinadanet.com.br//imagens/coluna/2760/td_14.png


Logicamente isso é apenas o seu primeiro passo para o desenvolvimento de temas para wordpress. Você viu aqui como criar o template HTML, como instalar o template no WordPress e como formatar o CSS de cada área no blog.

O template criado encontra-se disponível para download.

Compartilhe com seus amigos:
Marciano Dias
Marciano Dias Desde de 2009 trabalho como WebDesigner Freelancer.
FACEBOOK // TWITTER: @marcianodias
Quer conversar com o(a) Marciano, comente:
Carregar comentários
Últimas notícias de Softwares