Como Criar um WordPress Theme – Parte 1



Como Criar um WordPress Theme – Parte 1

Como criar templates wordpress é uma das perguntas mais comuns que recebemos. Muitas pessoas percebem de html e css, mas quando chega a hora de fazer alterações ou de criar um tema não sabem como fazer, por isso decidimos criar uma série de artigos que vos vai ensinar a criar wordpress themes de raiz. Vamos dar a informação mais importante e explicar como tudo deve de ser feito.

Se esta informação interessa-lhe, pode receber todos os artigos no seu email através da newsletter gratuita. Se ainda não subscreveu, faça-o agora!

Série Sobre Criar um Template WordPress

Nesta série de artigos sobre a construção de um wordpress theme vamos tentar falar na informação mais importante, usando sempre uma linguagem simples para que todos possam entender.

Vamos seguir a seguinte ordem:

  • Introdução aos WordPress Themes
  • style.css e header.php
  • index.php, archive.php
  • single.php, page.php, 404.php
  • comments.php
  • sidebar.php e footer.php
  • Melhorar a aparencia do tema (css)
  • Funcionalidades Extras: Thumbails
  • Funcionalidades Extras: Menus Personalizados

Ferramentas e Conhecimentos Necessários

Para poder seguir este tutorial e conseguir criar o seu tema, deve de:

  • Ter um browser (de preferência o Firefox com o addon firebug instalado
  • Conta de hospedagem online ou servidor local (Wamp (Windows), MAMP (Mac) e LAMP (Linux).
  • Editor de texto à sua preferência. (Recomendamos o NotePad++ para Windows, TextWrangler para Mac e o Bluefish para Linux
  • Última versão do WordPress – faça o download em wordpress.org
  • Saber trabalhar com o WordPress
  • Conhecimento em HTML e CSS – Se perceber PHP, melhor ainda

A Estrutura do WordPress

O WordPress é um gestor de conteúdo que no inicio pode fazer alguma confusão as muitas pastas e ficheiros que tem, mas você só tem que se preocupar com 2 coisas: o ficheiro wp-config.php e a pasta wp-content.

O ficheiro wp-config.php contém toda a informação necessária para o WordPress se ligar a base de dados (banco de dados) e funcionar normalmente. Já a pasta wp-content é onde ficam os temas e os plugins.

Como neste tutorial vamos aprender a fazer temas, é importante que você saiba onde ele tem que ser colocado para poder ser usado no seu site. Como dissemos anteriormente, os temas e os plugins ficam dentro da pasta wp-content. Dentro desta pasta existem outras duas chamadas de “plugins” e themes. Nós vamos trabalhar dentro da pasta “themes” (wp-content/themes).

Depois do tema estar pronto, você tem transferir a pasta do tema para dentro desta pasta “themes”. Só assim você vai conseguir ativa-lo e usar-lo online.

A Estrutura de um Tema

Antes de começar a criar um template é preciso saber como ele funciona. Um tema para wordpress é basicamente uma página normal feita em HTML, mas dividida em partes. A parte que diz respeito ao cabeçalho fica num ficheiro, a parte do código que diz respeito ao conteúdo fica noutro e assim por diante.

As partes/ficheiros básicos e essenciais de um tema são os seguintes:

  • header.php: local onde fica o código do cabeçalho
  • sidebar.php: local onde fica o código da lateral
  • footer.php: local onde fica o código do rodapé
  • index.php: código que mostra os artigos na página inicial
  • single.php: código que mostra o artigo na sua própria página
  • page.php: código que mostra o conteúdo de uma página estática
  • archive.php: igual ao index.php, o código nesta parte vai mostrar os artigos que estão no arquivo, nas categorias, tags, etc
  • functions.php: local onde ficam algumas funções que adicionam mais capacidades aos temas
  • 404.php: igual ao index.php, em vez de mostrar um artigo deverá de mostrar um texto a avisar que o conteúdo não foi encontrado
  • style.css: ficheiro onde fica o stylesheet do tema

O que devo colocar em cada um destes ficheiros:

Já explicamos em cima o que deve de colocar em cada parte, mas para que não restem dúvidas criamos uma página normal em HTML e vamos ensinar a separar cada parte.

É importante que antes de começar criar o seu wordpress theme, já tenha as páginas feitas em HTML. Depois só precisa de dividir essas páginas pelos vários ficheiros do tema e usar php para que funcione bem.

Este código é de uma simples página HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Página de HTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="corpo">
    <div id="header">
        <h1>Titulo do Site</h1>
        <h2>Descrição do site</h2>
        
        <ul id="nav">
            <li><a href="#">Página 1</a></li>
            <li><a href="#">Página 2</a></li>
            <li><a href="#">Página 3</a></li>
            <li><a href="#">Página 4</a></li>
        </ul>
    </div>
    
    <div id="conteudo">
        <div id="artigos">
            <div class="artigo">
                <h2>Titulo do artigo 1</h2>
                <p>Postado por administrador em 16/01/2012</p>
                <p>Conteudo do artigo</p>
            </div>
            
            <div class="artigo">
                <h2>Titulo do artigo 2</h2>
                <p>Postado por administrador em 16/01/2012</p>
                <p>Conteudo do artigo</p>
            </div>
        </div>
        
        <div id="sidebar">
            <ul class="widget">
                <h3>Widget</h3>
                <li><a href="#">Página 1</a></li>
                <li><a href="#">Página 2</a></li>
                <li><a href="#">Página 3</a></li>
                <li><a href="#">Página 4</a></li>
            </ul>
        
            <ul class="widget">
                <h3>Widget</h3>
                <li><a href="#">Categoria 1</a></li>
                <li><a href="#">Categoria 2</a></li>
                <li><a href="#">Categoria 3</a></li>
                <li><a href="#">Categoria 4</a></li>
            </ul>
        </div>
    </div>
    
    <div id="footer">
        <p>&copy; 2012 - Todos os Direitos Reservados</p>
    </div>
    
</div>
    
</body>
</html>

Separando a página HTML em partes

Vamos começar de cima para baixo, ou seja, no header.php (cabeçalho). Comece por criar um novo ficheiro no seu bloco de notas, copiar o código deste o inicio até ao fim da div “header” e colar no bloco de notas. Depois grave com o nome header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Página de HTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="corpo">
    <div id="header">
        <h1>Titulo do Site</h1>
        <h2>Descrição do site</h2>
        
        <ul id="nav">
            <li><a href="#">Página 1</a></li>
            <li><a href="#">Página 2</a></li>
            <li><a href="#">Página 3</a></li>
            <li><a href="#">Página 4</a></li>
        </ul>
    </div>

Depois do cabeçalho, passamos a div onde o conteúdo (artigos e sidebar) é mostrado. Então nos ficheiros index.php, single.php, page.php, archive.php e search.php, colamos toda a div “conteudo” com excepção da parte da sidebar. O código é este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="conteudo">
    <div id="artigos">
        <div class="artigo">
            <h2>Titulo do artigo 1</h2>
            <p>Postado por administrador em 16/01/2012</p>
            <p>Conteudo do artigo</p>
        </div>
        
        <div class="artigo">
            <h2>Titulo do artigo 2</h2>
            <p>Postado por administrador em 16/01/2012</p>
            <p>Conteudo do artigo</p>
        </div>
    </div>
    
    <!--o código da sidebar ficava aqui-->
</div>

Não colocamos o código da sidebar no passo anterior, porque esse código deve de ficar no sidebar.php, um ficheiro que contém todo o conteúdo da sidebar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="sidebar">
    <ul class="paginas">
        <li><a href="#">Página 1</a></li>
        <li><a href="#">Página 2</a></li>
        <li><a href="#">Página 3</a></li>
        <li><a href="#">Página 4</a></li>
    </ul>
    <ul class="categorias">
        <li><a href="#">Categoria 1</a></li>
        <li><a href="#">Categoria 2</a></li>
        <li><a href="#">Categoria 3</a></li>
        <li><a href="#">Categoria 4</a></li>
    </ul>
</div>

Neste momento toda a parte do conteúdo também está pronta. Vamos passar ao que falta, ou seja, ao rodapé do tema. Vamos usar para isso o footer.php, o ficheiro onde deve de ficar a nossa div “footer” e o código restante.

1
2
3
4
5
6
7
8
    <div id="footer">
        <p>&copy; 2012 - Todos os Direitos Reservados</p>
    </div>
    
</div>
    
</body>
</html>

Agora toda a página HTML que tínhamos no inicio está dividida em partes.

Como “chamar” outras partes dos temas

O próximo passo é adicionar algumas tags para que o wordpress, quando usar o tema, possa “juntar” todas as partes e mostrar todas as partes do tema.

Para fazer isto, vamos usar 3 tags que servem para ir chamar/incluir outras partes do tema. Numa página como o index.php, precisamos de “chamar” o cabeçalho (header.php), lateral (sidebar.php) e o rodapé (footer.php):

1
2
3
4
5
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Cada uma destas tags devem de ser colocadas no lugar onde o código das outras páginas deve de ser incluído. Por exemplo, no index.php precisamos de incluir o header.php logo no inicio, o sidebar.php no lugar onde antes estava o código da sidebar e no fim da página, temos que incluir o footer.php.

Então os ficheiros index.php, single.php, page.php, archive.php e search.php ficam assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php get_header(); ?>
    <div id="conteudo">
        <div id="artigos">
            <div class="artigo">
                <h2>Titulo do artigo 1</h2>
                <p>Postado por administrador em 16/01/2012</p>
                <p>Conteudo do artigo</p>
            </div>
            
            <div class="artigo">
                <h2>Titulo do artigo 2</h2>
                <p>Postado por administrador em 16/01/2012</p>
                <p>Conteudo do artigo</p>
            </div>
        </div>
        
        <?php get_sidebar(); ?>
    </div>
<?php get_footer(); ?>

Como pode ver, as tags foram adicionas em 3 lugares diferentes, a primeira chama o header, a segunda chama a sidebar e a terceira chama o footer.

Estes são os primeiro passos para a criação de um tema. Depois temos que adicionar várias tags, criar o loop que vai fazer com que os artigos e páginas sejam mostradas e também criar um stylesheet para que o tema fique apresentável nos navegadores de internet. Tudo isto será falado nos próximos artigos.

 

Fonte: www.wptotal.com

Share this post

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *