WordPress - Estrutura básica de um tema

WordPress

WordPress é uma marca registrada, por isso a necessidade de escrever corretamente: com o W e o P maiúsculos, ok? Mas isso não tem nada a ver com o assunto do post, onde iremos aprender a montar a estrutura básica de um tema para WordPress :P

Sabia que, para criar um tema, você não precisa de nada mais que 2 arquivos? Duvida? Vem que eu te mostro ;)

Criar temas para WordPress é um trabalho bem simples, desde que você conheça PHP, HTML, CSS e Javascript.

Requisitos mínimos

Além do conhecimento citado acima, você precisa ter instalado no seu computador o PHP 5.2.4 ou superior, e o MySQL 5.0 (ou Maria DB) ou superior.

Instalação

A instalação do WordPress é bastante simples. Baixe aqui a última versão. Descompacte-o em algum diretório que seja acessível pelo seu servidor (Apache ou Nginx), e acesse via browser.

Seguindo todos os passos da tela corretamente, não terá problemas :)

Só algumas dicas para a hora da instalação:

  • Não use o nome do usuário como admin;
  • Use uma senha forte;
  • Altere o prefixo das tabelas da sua base de dados para algo diferente de wp_.

O WordPress é uma ferramenta muito conhecida e bastante utilizada, por isso não use configurações que seriam fáceis de descobrir. Nome de usuário admin é muito comum. Usando esse nome, para invadir seu site só precisa de uns ataques de força bruta na senha. O mesmo vale para sua base de dados: mantendo o prefixo padrão wp_, fica muito mais fácil de alguém tentar invadir.

Criação do tema

Crie um diretório dentro de wp-content/themes com o nome do seu tema. Use a conveção de letras minúsculas e separação de palavras com um traço -.

Fazendo isso, crie a seguinte estrutura:

1
2
3
.
├── index.php
└── style.css

Isso mesmo, só dois arquivos! O WordPress não é que nem “certos CMSs” que você precisar criar milhões de arquivos e XMLs de configuração para criar um tema :P

Brincadeiras à parte, o WordPress tem uma convenção que facilita e muita na hora de criar um tema.

style.css

O WordPress pega do seu arquivo style.css alguns parâmetros para apresentar informações do seu tema no Painel.

Os parâmetros mínimos que você precisa adicionar no style.css são esses:

1
2
3
4
5
6
/*
Theme Name: Nome do seu tema
Author: Seu nome
Description: Descrição do tema
Version: 1.0
*/

Com esses parâmetros passados como comentário no início do arquivo style.css, o WP já vai mostrar essas informações no Painel, quando você visualizar o tema.

Para ativar o seu tema, logue-se no painel, em http://seusite.com.br/wp-admin. Vá até o menu Aparência > Temas, selecione o seu tema e ative-o. E pronto! Todos os posts que você fizer já irão utilizar o tema que estamos desenvolvendo :D

index.php

O código que o WordPress usa para mostrar os posts é bem simples. Coloque na index.php do seu tema:

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
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Meu tema WordPress</title>
</head>
<body>

<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
  <h2>
    <a href="<?php the_permalink() ?>">
      <?php the_title() ?>
    </a>
  </h2>

  <div class="content">
    <?php the_content() ?>
  </div>
<?php endwhile; ?>

<?php else : ?>
  <p>Não existem posts.</p>
<?php endif ?>

</body>
</html>

Na linha 9, temos o que chamamos de Loop do WordPress. As funções do WordPress são muito semânticas, e dizem exatamente o que elas fazem:

Primeiro, verificamos se existem posts, com a função have_posts() (o WordPress chama de posts, ou postagens, todo tipo de conteúdo que é possível cadastrar através do painel);

Depois, fazemos um loop por todos os posts (while( have_posts() )) e, para cada post, é chamada a função the_post(). Essa função é responsável por trazer as informações de cada post específico que está relacionado no loop.

Dependendo da URL em que você se encontra, o WordPress sabe exatamente onde deve buscar os posts corretos, por isso o Loop é padrão para todos os arquivos de template.

O WordPress também tem alguns fallbacks para os arquivos do tema. Por exemplo: se no seu tema você tiver um arquivo chamado single.php, com esse mesmo conteúdo, quando você acessar a URL de um post, o WordPress vai procurar pelo arquivo arquivo single.php no seu tema para usar. Se o arquivo não estiver presente, ele usará como fallback o index.php. O index.php é fallback para qualquer arquivo de template do seu tema. Falaremos sobre os arquivos de template em posts futuros.

As outras funções, usadas dentro do Loop, são chamadas de Template Tags. Essas funções trazem informações do post. Por exemplo: the_permalink() traz o link do post. the_title() traz o título. the_content() traz o conteúdo. Percebe como os nomes são bastante semânticos? Para ver a lista das Template Tags disponíveis que você pode usar, acesse esse link.

Com esse código, você tem a estrutura básica para mostrar praticamente qualquer tipo de conteúdo que cadastrar no seu painel do WordPress.

Obviamente que você não vai deixar seu tema assim, pois tem muuuuita coisa que precisa tratar:

  • categorias;
  • tags;
  • datas;
  • se for um post aberto (single) não precisa do link no título;
  • página de erro 404;
  • separar páginas institucionais dos posts de blog;
  • etc.

Mas é só pra mostrar que, ainda assim, você pode começar a aprender WP e fazer um tema somente utilizando dois arquivos :)

Esse artigo é o primeiro de uma série que vou mostrar como criar temas completos, passando desde as funções do WordPress, hooks, até organização e separação de arquivos, boas práticas de desenvolvimento, orientação à objetos com PHP, para separar a lógica da view, entre outras coisinhas mais xD

Ficou curioso? Assine o RSS e não perca nenhum post! Acompanhe diariamente :D

Ficou alguma dúvida sobre esse post? Comente!

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1