Nenhum produto encontrado nessa seleção.
Este é o primeiro artigo de uma série chamada “Criar tema WordPress“, onde irei do básico ao avançado sobre a criação de temas WordPress. Aqui você vai entender como funcionam as partes mais básicas de um tema, a começar pela estrutura de arquivos.
Para criar qualquer tema WordPress, primeiramente, você deve entender como funciona a estrutura de arquivos do CMS. Eles são como peças de um quebra-cabeças, que juntos podem formar temas inimagináveis, indo de um simples blog, a um site de e-commerce gigantesco.
Antes que você comece a criar seu próprio tema WordPress, é necessário que você leia alguns padrões que são necessários para manter os códigos do CMS globais, ou seja, qualquer desenvolvedor poderá entender seu código, assim como você poderá entender o deles. Além disso, se você deseja se tornar um profissional e ter seus temas hospedados no próprio site do WordPress, é estritamente necessário que siga todos os padrões impostos pela comunidade.
Felizmente, já criei alguns artigos que podem lhe guiar para uma introdução sobre os padrões do WordPress. São eles:
Além de tudo o que já descrevi nos artigos acima, também já detalhei como instalar o WordPress e milhares de outras dicas que podem servir para quem está começando com o CMS, veja os links abaixo:
- Como instalar ou mover o WordPress
- Como mover o WordPress outra pasta do servidor
- Painel administrativo do WordPress – Tutorial Básico
- Como deixar seu WordPress mais seguro
Se ainda não o fez, certifique-se de ler os artigos acima antes de qualquer coisa (se achar necessário, é claro).
Onde residem os arquivos de temas WordPress?
Por padrão, os arquivos de qualquer tema WordPress estão na pasta wp-content/themes, cada um dentro de sua própria pasta.
Conteúdo da pasta wp-content/themes
Perceba que tenho alguns temas premium (pagos) naquela pasta (imagem acima), mas quando você acaba de instalar o WordPress, três temas gratuitos são disponibilizados pelo CMS. São eles:
- Twenty Fourteen ou 2014 (pasta twentyfourteen)
- Twenty Thirteen ou 2013 (pasta twentythirteen)
- Twenty Twelve ou 2012 (pasta twentytwelve)
Sendo o Twenty Fourteen o mais avançado de todos, e o Twenty Twelve o mais simples.
Um ótimo recurso para quem está iniciando o desenvolvimento de temas WordPress, é analisar os códigos de temas mais básicos que vêm com o WordPress, como o Twenty Twelve, por exemplo. Quando comecei, o tema mais simples que existia era o Twenty Ten (ou 2010). Achei seus códigos bastante simples e intuitivos, portanto, se quiser baixar esse tema e utilizar para estudos, faça-o aqui.
Criando a pasta do meu tema
Qualquer tema WordPress precisa de uma pasta específica com o nome do tema. Nomes de temas podem ser qualquer coisa que vier em sua mente, porém, devem ser únicos. Isso quer dizer que não podem existir dois temas com o mesmo nome dentro da pasta wp-content/themes, assim como não podem existir duas pastas de mesmo nome no mesmo local do seu computador.
Nomes de temas podem ter palavras compostas, com acentos, espaços e números, mas a pasta que os mantém deve conter apenas letras e traços.
Por exemplo: para um tema chamado “Este é meu tema“, sua pasta deverá se chamar “este-e-meu-tema“.
Crie a pasta
Para nosso exemplo, vamos criar um tema genérico chamado “Tutsup Básico“, portanto, sua pasta deverá se chamar “tutsup-basico“.
Abra a pasta wp-content/themes e crie uma pasta chamada tutsup-basico.
Pasta wp-content/themes/tutsup-basico
Vamos colocar alguns arquivos dentro dessa pasta a seguir.
index.php e style.css
Apenas criando a pasta do seu tema, não vai fazê-lo aparecer na área administrativa (wp-admin) do WordPress, você precisa criar ao menos dois dos arquivos mais importantes para temas WordPress. São eles:
- index.php – Arquivo principal de um tema WordPress, servirá como fallback para tudo o que será exibido pelo tema, como posts, categorias, pesquisas, página, e assim por diante.
- style.css – Mantém o nome, a descrição e detalhes do tema. Além disso, pode manter todo o CSS utilizado pelo tema (opcional).
Faça o seu tema aparecer na lista de temas
Para que seu tema apareça na lista de temas, conforme outros temas, você deve criar os dois arquivos mencionados anteriormente, index.php e style.css. O arquivo index.php pode ficar em branco, já que ainda não estamos criando o tema em si, apenas sua descrição, porém, o arquivo style.css deve conter o seguinte:
/* Theme Name: Tutsup Básico Theme URI: http://www.todoespacoonline.com/w/ Author: Luiz Otávio Miranda <[email protected]/w> Author URI: http://www.todoespacoonline.com/w/ Description: Este tema foi criado pelo blog Tutsup. Seu intuito é apenas educacional. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: tags Text Domain: tutsup-basico Qualquer coisa que você queira escrever para outros desenvolvedores. */
O CSS comentado acima dentro do arquivo style.css deverá vir no cabeçalho do arquivo, ou seja, começando da primeira linha. Isso é uma padrão, portanto você pode copiar e colar o texto acima dentro do arquivo style.css.
Se você não está criando um tema com os nomes que estou descrevendo, poderá substituir o texto conforme descrevo abaixo:
- Theme Name: Nome do tema
- Theme URI: URL do tema
- Author: Nome do autor
- Author URI: URL do autor
- Description: Descrição do tema
- Version: Versão do tema
- License: Licença do tema
- License URI: URL da licença
- Tags: Tags que descrevem o tema separadas por vírgula. (Veja: http://wordpress.org/themes/about/)
- Text Domain: Isto é usado para traduzir seu tema para outras línguas
Se você já criou ambos os arquivos descritos acima (index.php e style.css), verifique na administração do WordPress (wp-admin), na opção Aparência / Temas.
Nosso tema já aparece na lista de temas do WordPress
Veja que não existe uma imagem para nosso tema, para resolver isso, coloque uma imagem chamada “screenshot.png” dentro da pasta do seu tema. Normalmente essa imagem é uma foto do seu tema já pronto, porém, a maioria dos temas premium que vejo, utilizam sua própria logo. Por exemplo:
Tutsup Desenvolvimento
E a descrição do nosso tema está pronta:
Descrição do nosso tema
Ative o tema e veja como as coisas aparecem no blog.
Se você viu uma tela branca, não se desespere, ainda vamos preencher o código que vai exibir o conteúdo.
header.php e footer.php
Apenas os arquivos index.php e style.css não criam um tema básico, você precisa de um cabeçalho (header.php) e um rodapé (footer.php).
Vamos criar ambos os arquivos e adicionar algum conteúdo neles.
header.php
O arquivo header.php é responsável pelo cabeçalho principal do nosso tema. Ele deve trazer o início da estrutura do nosso HTML, como <!doctype html>, as tags de cabeçalho, início do body, e também pode trazer qualquer tag HTML que você queira, como um cabeçalho, menu e tags que deverão ser utilizadas em todas as páginas.
Veja um exemplo:
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<!-- O charset padrão -->
<meta charset="<?php bloginfo('charset'); ?>">
<!-- Necessário para layout responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- O título do blog -->
<title><?php wp_title(''); ?></title>
<!--
O restante do cabeçalho que virá dentro da head.
Criado automaticamente pelo WordPress.
-->
<?php wp_head(); ?>
</head>
<!-- Início do body -->
<body <?php body_class(); ?>>Veja que para nosso exemplo acima, estamos utilizando várias template tags (tags modelo do WordPress), você pode encontrar todas elas no WordPress Codex – Template Tags.
Também estamos iniciando a tag HTML e BODY, as quais serão fechadas no arquivo footer.php.
footer.php
O arquivo footer.php tem como propósito manter tudo o que virá no rodapé do seu tema, assim como o fechamento das tags que foram abertas pelo header.php. Veja:
<!-- O restante do rodapé que virá dentro do body. Criado automaticamente pelo WordPress. --> <?php wp_footer(); ?> <!-- Fecha o body --> </body> <!-- Fecha o HTML --> </html>
Adicionando header.php e footer.php no index.php
Depois de criar os arquivos de cabeçalho e rodapé, é necessário “chamar” esses arquivos no index.php.
Abra o index.php e adicione o seguinte:
<!-- Adiciona o cabeçalho (header.php) --> <?php get_header(); ?> <!-- Adiciona o rodapé (footer.php) --> <?php get_footer(); ?>
Perceba que estamos utilizando mais template tags para adicionar os arquivos de cabeçalho e rodapé, novamente, visite o WordPress Codex para maiores informações.
Neste momento, se você acessar a home do seu blog já deverá visualizar a barra administrativa do WordPress. Se você ir mais além e pressionar CTRL + U para visualizar o código fonte, verá várias coisas que o próprio WordPress ou algum plugin adicionou no seu tema.
É importante que você entenda, que estes são arquivos PHP comuns, além das template Tags, você pode utilizar HTML, CSS, JavaScript e PHP diretamente. Na verdade é assim que os temas são criados.
The loop
O loop é uma das partes mais populares e interessantes do WordPress. Ele é responsável por mostrar o conteúdo dos seus artigos, páginas ou posts personalizados.
Além disso, ele também varia de acordo com o local onde está sendo visto. Por exemplo: se for um único artigo, o loop deverá mostrar apenas o conteúdo daquele artigo; se for uma página que deverá mostrar vários artigos (como a página inicial ou a página de busca), o loop irá mostrar a quantidade de artigos que estiver configurada na administração do WordPress (10, por padrão).
O loop consiste em um laço while (do PHP) para exibir um, ou vários posts, veja:
<!-- Adiciona o cabeçalho (header.php) --> <?php get_header(); ?> <!-- O loop --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- Container do artigo --> <div class="artigo-container"> <!-- Título do post --> <h1> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h1> <!-- Categoria --> <?php the_category(); ?> <!-- Autor --> <?php the_author(); ?> <!-- Data --> <?php the_date(); ?> <!-- Conteúdo do post --> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> <!-- Adiciona o rodapé (footer.php) --> <?php get_footer(); ?>
O loop acima está praticamente cru. Ele pode ficar bem complexo quando utilizamos as Template Tags e Conditional Tags.
Se você colar o código acima no seu index.php, verá os artigos já cadastrados no seu WordPress sem estilo algum. Você pode configurar o estilo no arquivo style.css (abaixo da descrição do tema). Não vou passar CSS neste artigo (apenas nos próximos).
Mais template files (arquivos de modelo)
Os arquivos de modelo pode ir do básico, conforme descrito anteriormente, até um tema extremamente customizado, deixando a possibilidade de exibir cada página e/ou artigo com um estilo diferenciado.
Apenas com o básico (index.php, header,php, footer.php e style.css), você ainda pode criar um tema simplista, porém, para criar um tema WordPress mais robusto, provavelmente, vai precisar de mais arquivos.
Os arquivos são opcionais, você cria se precisar de algo diferente para determinada parte. Caso você não o faça, o arquivo index.php será utilizado como fallback.
Por exemplo: O arquivo single.php é responsável por exibir o artigo na íntegra. Quando você acessa qualquer artigo do blog, o WordPress vai procurar primeiro pelo arquivo “single.php” (que deve conter um loop, como já foi descrito). Caso o arquivo single.php não exista, o sistema se encarrega de incluir o arquivo index.php (que também deve contar com um loop). Com isso, caso você não precise personalizar cada área do seu blog, não precisa criar todos os arquivos que existem.
Isso está desenhado perfeitamente na imagem abaixo:
Hierarquia de Arquivos de Tema WordPress
Alguns arquivos precisam do loop, outros são apenas para partes específicas do tema, como formulário de pesquisa, barra lateral, funções do tema e assim por diante.
Veja outra imagem sobre a hierarquia de arquivos do WordPress.
Arquivos do WordPress
Se ainda estiver confuso, segue uma lista em texto dos arquivos que podem ser utilizados em um tema WordPress.
- style.css – Este é o arquivo de estilos descrito anteriormente nesse artigo;
- rtl.css – Este é o arquivo incluído quando seu blog está configurado para exibir o texto da direita para a esquerda;
- index.php – Este é o arquivo principal do WordPress, serve como fallback para todos os arquivos que não estiverem presentes (precisa do loop);
- comments.php – Arquivo que mantém o modelo de comentários;
- front-page.php – Arquivo de modelo da página inicial (precisa do loop);
- home.php – O arquivo de modelo da página inicial, que é a front page por padrão. Se você utilizar uma página estática para a página inicial, este arquivo irá manter os últimos posts do blog (precisa do loop);
- single.php – Arquivo de modelo de artigos na íntegra (precisa do loop);
- single-{post-type}.php – Arquivo de modelo de artigos na íntegra, porém, que estão em algum tipo de post diferente (vídeo, galeria, etc)… (precisa do loop);
- page.php – Arquivo de modelo para páginas na íntegra (precisa do loop);
- category.php – Arquivo de modelo para categorias (precisa do loop);
- tag.php – Arquivo de modelo para tags (precisa do loop);
- taxonomy.php – Usado quando um termo personalizado é utilizado (precisa do loop);
- author.php – Arquivo de modelo para exibir posts de autores (precisa do loop);
- date.php – Usado quando acessamos artigos por datas (precisa do loop);
- archive.php – O template de arquivos. Usado quando uma categoria, autor ou data é buscada. Note que ele sobrescreve os templates padrão de cada uma das opções;
- search.php – Arquivo de modelo para busca (precisa do loop);
- attachment.php – Arquivo de modelo para anexos (imagens e demais) – (precisa do loop);
- image.php – Usado quando uma imagem única é acessada. Sobrescreve attachment.php;
- 404.php – Arquivo de modelo para páginas não encontradas;
Estes são os arquivos modelo (template files) presentes em:
Porém, existem muito (mas muito mesmo) mais arquivos de modelo, veja a lista completa em:
Leitura adicional
Espero que este artigo tenha clareado a sua mente sobre desenvolvimento de temas para WordPress, porém, não termina aqui. Na sessão sobre “Criar tema WordPress“, teremos mais dezenas de artigos para clarear ainda mais suas ideias.
Porém, não hesite em se aventurar pelo WordPress Codex. Seguem os arquivos que me ajudaram a escrever este artigo:
Recomendo a leitura de todos os artigos descritos acima.
E, conforme sempre fazemos aqui no Tutsup: em caso de dúvidas, basta perguntar!
