Oficina da Net » Tutoriais » Desenvolvimento » Blogs » WordPress

Como criar um tema para Wordpress

Marciano Dias
Data: 08/12/2010

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:


<div id="geral">
</div>

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


<div id="geral">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

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:


<div id="header">
<h1><a hreft="#">Marciano Dias</a></h1>
</div>

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:


<div id="menu">
<ul>
<li><a hreft=?#?>Menu</a></li>
<li><a hreft=?#?>Menu</a></li>
<li><a hreft=?#?>Menu</a></li>
<li><a hreft=?#?>Menu</a></li>
<li><a hreft=?#?>Menu</a></li>
</ul>
</div>

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


<div id="footer">
<address>Copyright © 2010. Marciano Dias - Serviços de Internet.</address>
</div>

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


<link rel="stylesheet" type="text/css" href="style.css" />

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tema para Wordpress, o Básico</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="geral">
    <div id="header">
        <h1><a href="#">Marciano Dias</a></h1>
        <p>Aqui fica uma breve descrição</p>
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
        </ul>
    </div>
    <div id="content"></div>
    <div id="footer">
        <address>Copyright © 2010. Marciano Dias - Serviços de Internet.</address>
    </div>
</div>
</body>
</html>

Resultado no navegador:

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:

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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tema para Wordpress, o Básico</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="geral">
    <div id="header">
        <h1><a href="#">Marciano Dias</a></h1>
        <p>Aqui fica uma breve descrição</p>
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
        </ul>
    </div>

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:


<div id="content"></div>

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:


    <div id="footer">
        <address>Copyright © 2010. Marciano Dias - Serviços de Internet.</address>
    </div>
</div>
</body>
</html>

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:

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:


<?php get_header(); ?>
    <div id="content"></div>
<?php get_footer(); ?>

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

Resultado no navegador:

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.

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:


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<?php bloginfo( 'charset' ); # Exibe o conjunto de caracteres ?>
<?php wp_title(); # mostra o titulo do post ou da pagina na barra de títulos do navegador.?>
<?php bloginfo( 'name' ); # mostra o nome definido na instalação do wordpress na barra de títulos. ?>
<?php bloginfo( 'stylesheet_url' ); # isso chama o style.css.?>
<?php bloginfo( 'pingback_url' ); # o pingback envia mensagens quando alguém faz referencia de seu blog.?>
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); # aqui temos uma condição para mostrar a opção de comentários, caso esteja disponível.?>
<?php wp_head(); # chama os scripts de plug-ins. Sem ele seu tema não aceitará plug-ins.

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


<a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a>

E para pegar a descrição dininamicamente adicione:


<?php bloginfo( 'description' ); ?>

Código completo:


    <div id="header">
        <h1><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </div>

Resultado no navegador:

Pegando o menu dinamicamente:

Apague toda a ul, incluindo as li e adicione:


<?php wp_page_menu( $args ); ?>

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:


<?php if (have_posts()): while (have_posts()) : the_post();?>
<h1><a href="<?php the_Permalink()?>"><?php the_title();?></a></h1>
<p><?php the_content();?></p>
<?php endwhile; ?>
<?php endif; ?>

Resultado no navegador:

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:

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.
Mais sobre: wordpress, tutorial, criando tema

1 comentário (comente você também)

carregando...