Tema para WordPress [GUIA INICIANTE] Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 3 anos, 2 meses, 4 semanas atrás.

De vez em quando aparece alguém me perguntando sobre WordPress. Então resolvi preparar esse material pra galera.

Estrutura de básica

O WordPress trabalha com uma estrutura de arquivos que ajuda muito no desenvolvimento, vou separar em 3 grupos pra ajudar, mas antes entenda que um tema tem que estar dentro do diretório wp-content/themes/{nome do seu tema}.

O mínimo necessário

Para que um tema esteja funcional, o WordPress precisa de no mínimo 2 arquivos, o style.css (com o css e as informações do tema) e o index.php (que retorna o HTML do tema), vou falar destes dois arquivos abaixo.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

Arquivos de tema

Pra começar temos os arquivos PHP que cuidam de exibir o HTML tema de cada seção do nosso WordPress, como os artigos (posts), páginas, busca, listagem de artigos e outros, é muito simples entender, veja:

  • index.php - O arquivo principal, ele tem que estar em seu tema (aqui no meu blog ele lista os artigos)
  • front-page.php - Template da página inicial
  • home.php - Caso você indique uma página estática como página inicial, este tema será usado por padrão para exibir junto com a listagem de artigos
  • single.php - Para exibir um único post
  • single-{post}.php - Exibi um único tipo de post personalizado (troque {post} pelo tipo)
  • page.php - Para exibir suas páginas
  • category.php - Artigos em uma categorias
  • tag.php - Artigos com uma tag específica
  • taxonomy.php - Listagem de taxonomia (veja mais sobre isso)
  • author.php - Para exibir os dados de quem escreveu os artigos, os autores
  • date.php - Para exibir artigos de uma determinada data ou período
  • archive.php - Artigos arquivados
  • search.php - Tema da busca
  • attachment.php - Exibi um anexo
  • image.php - Exibe uma imagem
  • 404.php - Tema do erro 404 (página não encontrada)

Blocos de HTML

Agora imagine que cada um destes arquivos faça parte de um layout padrão, ou seja, tem um cabeçalho, um rodapé e até mesmo uma barra lateral em alguns deles, até os seus posts tem os comentários. Saiba que o WordPress tem alguns arquivos que te ajudam a organizar isso, assim cada um dos temas acima vão guardar apenas o código para exibirem seu próprio conteúdo, organização e praticidade é a palavra.

  • header.php - O cabeçalho do site - chamado com get_header()
  • footer.php - O rodapé do site - chamado com get_footer()
  • comments.php - Os comentários - chamado com comments_template()
  • sidebar.php - As laterais (as vezes não, mas vamos continuar) - chamado com get_sidebar()

Outros

  • style.css - CSS e Informações sobre o tema (serão mostradas no painel)
  • functions.php - Configurações e funções para o tema
  • screenshot.png - A miniatura a ser mostrada no painel

Configurando o tema no painel

Para configurar um tema no WordPress você vai precisar criar um arquivo style.css, um index.php e um screenshot.png, sendo que este último é opcional e guarda a "foto" do seu tema e deve ter 880x660px.

O style.css terá um bloco de comentários logo no início com as informações do seu tema, vou colocar aqui um completo e na sequência o meu aqui do blog, você vai entender de primeira, é super prático:

Completo:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

O meu:

/*
Theme Name: ErikTheme
Theme URI: http://blog.erikfigueiredo.com.br/
Description:Tema para blog do Erik Figueiredo, com Twitter Bootstrap 3 para facilitar a postagem dos artigos
Author: ErikFigueiredo
Author URI: http://www.erikfigueiredo.com.br/
Version: 1.0
Tags: Erik Figueiredo, Twitter Bootstrap;
*/

Note que não precisei informar todos os campos, apenas alguns e funciona perfeitamente.

Na sequência você vai precisar do seu index.php, aqui eu criei de cara um header.php e um footer.php porque usei o single.php e alguns outros arquivos de tema, mas podia sim criar tudo isso dentro do index.php, porém ficaria uma salada e eu não sou vegetariano (piadinha cretina). Então minha estrutura com os arquivos acima e o single.php para os posts ficou assim inicialmente:

  • wp-content
    • themes
      • erik
        • css/
        • js/
        • style.css
        • index.php
        • header.php
        • footer.php
        • single.php Note que criei dois diretórios, o css e o js, porque usei o Twitter Bootstrap, agora meus arquivos header.php e footer.php ficaram assim:

Note que vou continuar alterando e aperfeiçoando o tema e pode ser que eu inclua alguma referência a outro arquivo, então tome os exemplos como referência para você entender ou use o tema completo que está no github.

header.php footer.php

Agora eu posso referenciar os dois arquivos no index.php e no single.php:

<?php get_header(); ?>
<!--código do meu arquivo aqui-->
<?php get_footer(); ?>

Simples né.

Conclusão

Esse é o básico que você precisa para começar a construir temas para WordPress, vou preparar também uma série de artigos aonde vamos construir um tema para WordPress, espero que seja útil a vocês, mesmo para quem trabalha com orientação a objeto, frameworks e assuntos mais avançados na programação PHP, não vale a pena construir blogs sem usar o WordPress na minha humilde opinião.


Cursos relacionados


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!