Como criar seu tema para WordPress – Parte 3

O style.css precisa ser criado com algumas regras definidas pelo WordPress. É obrigatório ter isso mas, todo o estilo e sua customização é feita de acordo com a preferência do usuário.

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/

Qual é o motivo da obrigatoriedade desses termos? Primeiro, serve para deixar seu tema mais organizado. Mas, esse cabeçalho do CSS será usado para exibição do nome do tema e das informações que ficam localizadas na página Aparência do Painel de Administração.

O que eu vou colocar no meu tema será o seguinte:

/*
Theme Name: Just2Learn
Theme URI: http://www.dicaswp.com.br/
Description: É apenas um tema criado para o tutorial Como criar seu tema para WordPress
Author: Yeltsin Lima
Version: 1.0
Tags: simple, widget-ready, two-columns, portuguese
*/

Você poderá usar o que desejar. Isso vale tanto para o tema que deixei disponibilizei para download, quanto para o tema que você baixou. Outra coisa é o nome do arquivo: não salve como estilo.css, salve como style.css e coloque no diretório raiz do tema. O que eu recomendo para deixar o tema mais organizado é fazer o seguinte:

1. Crie uma pasta chamada CSS.
2. Crie um arquivo style.css, que deverá ser colocado na raíz do diretório
3. Crie os arquivos que você deseja, para deixar o tema mais estruturado, por exemplo (e coloque na pasta CSS)
   1. tipografia.css
   2. divs.css
   3. reset.css
4. Agora você só precisa linkar esses arquivos no style.css

Para linkar é bem simples, basta inserir o seguinte código (alterando o nome da página, caso você tenha criado outras):

/* TIPOGRAFIA */
@import url("css/tipografia.css");

/* DIVS */
@import url("css/divs.css");

/* RESET */
@import url("css/reset.css");

Lembrando que, esse é apenas um exemplo. A minha recomendação é você fazer da sua maneira. Ou seja, o cabeçalho do nosso style.css ficou assim:

/*
Theme Name: Just2Learn
Theme URI: http://www.dicaswp.com.br/
Description: É apenas um tema criado para o tutorial Como criar seu tema para WordPress
Author: Yeltsin Lima
Version: 1.0
Tags: simple, widget-ready, two-columns, portuguese
*/

/* TIPOGRAFIA */
@import url("css/tipografia.css");

/* DIVS */
@import url("css/divs.css");

/* RESET */
@import url("css/reset.css");

Quer dizer que agora o meu estilo está pronto? Não, na verdade, estamos apenas começando! :)