Como criar um tema WordPress – Tutorial Básico

wp
Se você chegou até esse post pela busca, provavelmente este não é o primeiro tutorial sobre criar temas no wordpress que vc está lendo. Então, vou pular algumas coisas que sei que já falaram nos outros links.

É apenas um site

WordPress é apenas uma camada do site. Só o CMS que vai ser colocado para seu cliente administrar via painel os posts e páginas.

Se você sabe fazer sites, então vc está muito perto de conseguir fazer um tema wordpress.
Comece como vc começaria qualquer outro site: do recorte html.

Sim, estou falando para você fazer isoladamente. Se esquecendo que no final, usará o wordpress. Faça o seu recorte css tableless da melhor forma possível, como vc faria normalmente.

Usando as funções

Creio que as 3 funções mais básicas são: get_header(), get_footer() e get_sidebar(). Basicamente o que elas fazem é apenas um include dos arquivos: header.php, footer.php e sidebar.php respectivamente.

Então os seus arquivos: index.php, 404.php, page.php, single.php, archive.php e search.php, terão uma anatomia muito próxima disso:

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage wbruno
 * @since wbruno 0.0.1
 */

get_header(); ?>

	<main id="content" class="fleft" role="main">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

			<?php get_template_part( 'content' ); ?>

		<?php endwhile; else: ?>

			<article class="not-found">
				<p><?php _e('Desculpe, nenhum post corresponde aos seus critérios.', 'wbruno'); ?></p>
			</article>

		<?php endif; ?>

		<div class="fright">
			<?php posts_nav_link(' — ', __('« Anterior', 'wbruno'), __('Próxima »', 'wbruno')); ?>
		</div>

	</main><!-- /content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Onde vemos claramente os includes do topo, sidebar e rodapé.

Codex

O WP é bem documentado. Tendo alguma dúvida: pesquise no codex.
Por exemplo, não faz sentido eu explicar o que é e o que faz cada um dos arquivos básicos de um tema, se o codex já tem um link falando tudo isso: http://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_Wordpress. Dá uma lida lá.

Theme Check

Esse plugin é essencial para desenvolver um tema de qualidade. Ele vai te apontar alguns erros como encoding, funções deprecated e algumas boas práticas.
Use: http://wordpress.org/plugins/theme-check/.

Validador w3c

Eu não disse que um wordpress é apenas um site ?
Então todas as boas práticas de um site também valem para um tema wordpress. Portanto, valide sempre o html e css do seu tema: http://validator.w3.org/.

functions.php

É nesse arquivos que vc fará todas as intervenções que quiser no core do wordpress, como por exemplo mudar a forma com que o cms lista as categorias.
É importante saber que a única pasta que te pertence quando vc está desenvolvendo um tema, é a própria pasta do tema, localizada em: wp-content/themes/nome_do_seu_tema/, e nada mais.

Não edite de forma nenhuma os outros arquivos do wordpress, afinal uma atualização do core acabaria quebrando as suas modificações.

Mas ele não é obrigatório, e vc pode ter um functions.php em branco e mesmo assim o seu tema funcionará.

Arquivos básicos e obrigatórios

Você sempre vai precisar ter esses, na raiz do seu tema:

  • screenshot.png – screenshot em 600×450 de como o tema ficará, para vc visualizar no painel de escolha de temas um “preview”
  • style.css – independente se vc usará outros arquivos .css externos, o css base do tema, deve ser esse arquivo na raiz do tema. Os comentários iniciais dele, é que informarão ao painel do wp o que o seu tema é.
    /*
    	Theme Name: wbruno
    	Theme URI: http://wbruno.com.br
    	Description: Tema do blog wbruno
    	Author: William Bruno
    	Author URI: http://wbruno.com.br
    	Version: 0.0.3
    	Tags: light, two-columns, fixed-width, left-sidebar, flexible-width, sticky-post
    	License: GNU General Public License v2 or later
    	License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    
  • editor-style.css – é um arquivos .css opcional que vc pode criar, que se existir será usado para formatar o editor dentro do painel do wordpress.
  • single.php – Quando vc estiver visualizando um post aberto, é esse arquivo que está sendo mostrado.
  • page.php – Este aqui é para uma página.

Algumas coisa obrigatórias do style.css e do functions.php o plugin Theme Check que eu indiquei, lhe dirá para fazer.

White Themes

Eu comecei assim. Pegando um tema padrão do wordpress e estilizando ele, até chegar no resultado que eu queria. Também é um caminho, mas não é a bala de prata. Talvez o seu tema seja tão específico que você não encontre nenhum white theme parecido para personalizar.

Porém, ainda assim vale a pena dar uma estudada em alguns para aprender como o author fez aquilo que vc quer, ou entender melhor como desenvolver o seu próprio do zero.

No meu github, há o tema que utilizo aqui no blog: https://github.com/wbruno/blog-dev. Ele é bem minimalista, e sempre será um “white theme”. Então pode clonar o projeto e dar uma estudada lá.

Fique a vontade para mandar um pull request do seu fork caso você tenha feito alguma implementação legal no projeto. =)

6 Comments

  1. Interessante esse tutorial

  2. Isto aqui ainda é um WordPress? Eu me lembro da época que era. Tem várias coisas que eu sinto falta, como o seu portfólio(você até tinha, mas não tem mais), e um daqueles campos para “se inscrever” no blog, e receber novos posts por email. Amo cada um dos seus posts, mas sempre me esqueço do seu blog. Fiquei 3 meses sem entrar aqui, e só voltei por um email que recebi.

  3. Olá, Bruno. Baixei um tema gratuito e estou tentando modifica-lo de acordo com as minhas necessidades. No entanto conhece quase nada sobre o assunto. O problema atual é centralizar a página para abrir em qualquer navegador em qualquer resolução. De antemão, obrigado.

  4. Ola amigo! Eu Gostaria de Saber, Se Você Desenvolve Template Simples Por Encomenda? Se Sim, Gostaria de Um Orçamento, de
    template de galeria de Filmes Online, plataforma wordpress!

    Fiz uma Montagem de como ele seria, veja as imagens:

    http://1.bp.blogspot.com/-TZ1bol8tXj0/VPfLA9J4YlI/AAAAAAAAAJg/qG7EbOZtAyo/s1600/veja.png

    http://2.bp.blogspot.com/-VrU59AWI6Us/VPfLBGrM8eI/AAAAAAAAAJc/48cT3zZ8BDM/s1600/veja%2B2.png

Deixe uma resposta

Your email address will not be published.

*