Como Criar Um Tema Matador Para WordPress

A maioria dos tutoriais que se encontram pela rede partem de temas simples e de duas colunas para WordPress. Basicamente, eles ensinam a recriar um tema existente.

isso pode ser interessante para aprender a mexer com o código básico, mas não ajuda muito a quem quer um tema novo que vá ser realmente utilizado.

Pensando nisso, resolvi criar essa série. Ao final dela, você será capaz de criar um tema exclusivo e personalizado para o seu blog.

Há três maneiras de fazer isso:

1. Criar todo o visual no Photoshop ou outro programa gráfico, depois codificar tudo para transformar em um tema.

2. Transformar um template estático existente em um tema.

3. Criar um tema todo baseado em CSS, utilizando imagens em lugares estratégicos, como o cabeçalho, área dos posts e barra lateral.

Nesse tutorial, vamos utilizar a terceira opção. Nem todo mundo tem habilidade ou criatividade o suficiente para a primeira, e a segunda foge do nosso objetivo, que é criar um tema único.

Dito isso, vamos começar.

Parte 1

- Preparando as Ferramentas Básicas

Para criar um tema para WordPress, você precisa de alguns programas básicos instalados. Vamos ao checklist.

1. Editor de textos simples, o próprio bloco de notas do Windows, se for o caso, serve.

2. Uma instalação offline do WordPress. Mesmo que você não tenha problemas com consumo de banda, fazer tudo online demanda mais tempo e você ainda fica sujeito a quedas de conexão.

Para fazer a instalação, siga as instruções encontradas aqui.

- Criando o Tema

Agora que você está com tudo pronto para começar, vamos ao passo-a-passo.

Na instalação offline que você fez, vá até
C:\xampplite\htdocs\wordpress\wp-content\themes. Se você fez a instalação em C:, basta copiar o endereço em vermelho e colar na barra de navegação de qualquer pasta do Windows, clicar em ir ou enter e você chega direto lá.

Uma vez na pasta “themes”, crie uma nova pasta e dê o nome do seu tema. Se ainda não pensou em um, use um nome qualquer, isso pode ser mudado depois. Eu vou chamar de “Tema Tutorial” e utilizar esse nome onde for necessário.

1. Folha de Estilos ou style.css

Abra o bloco de notas, copie e cole o código abaixo, depois salve na pasta que você criou com o nome style.css.

/*
Theme Name: Tutorial WordPress Theme
Theme URI: http://www.seudominio.com/
Description: Tema exclusivo do blog <a href="http://seudominio.com/">Seu Blog</a>.
Version: 1.0
Author: Dono do Blog
Author URI: http://seudominio.com/
Tags: blue, fixed width, three columns, widgets*/

Esse código é fundamental em um tema para WordPress. É a ele que o sistema procura para saber qual tema deve ser exibido ao carregar a página. Na falta dele no tema ativo, o tema padrão será ativado.

Não custa lembrar que seudominio.com deve ser substituído pela url do seu blog.

As tags não são obrigatórias, mas devem ser incluídas se você pretende submeter seu tema ao Diretório de Temas do WordPress. Substitua as que eu utilizei por tags que descrevam o que você tem em mente. Utilize-se de tags em inglês, isso vai fazer com que mais gente encontre seu tema, caso ele seja aprovado e exibido no diretório.

2. Criando a Estrutura do Tema

Antes de entrarmos em mais detalhes, precisamos definir alguns detalhes do tema, como largura total, número e largura das colunas.

Eu decidi utilizar o Yahoo Grids, que facilita a criação do layout básico. Baixe o arquivo nesse link.

Uma ferramenta online facilita em muito essa parte do processo. O Grid Builder gera a base em html que vai ser utilizada no nosso tema.

A Toolbox à esquerda pode ser arrastada para qualquer lugar na página. Eu defini 974px de largura, que garante uma boa exibição em resoluções a partir de 1024×768, sidebar left 160px e o restante do conteúdo dividido na razão 66/33. Clique na imagem que ilustra isso para vê-la em tamanho maior.

Você pode definir os valores que quiser. A configuração que eu utilizei resulta em uma área de um pouco mais de 500 px de largura para os posts e uma barra lateral direita que tem a largura ideal para exibir postagens e comentários recentes, caixas para assinatura de feed por email e outros fru-frus que ficam melhor em larguras maiores.

A barra lateral esquerda comporta anúncios no formato padrão 160×600, porque ganhar dinheiro é uma boa . Além disso, é uma largura boa para exibir listas de categorias e páginas fixas.

Depois de definir os valores, clique em show code, na janela que se abrirá, marque a caixa include lorem ipsun e clique em view plain. Copie o código que vai ser gerado, cole no bloco de notas e salve como index.php, na mesma pasta onde já se encontra o style.css.

Se você quiser utilizar os valores que eu defini, é só clicar no link abaixo e baixar o código para ganhar tempo.

Index Tutorial

Por hoje e só, amanhã continuamos com a criação do index.php.

Se você não quer perder nenhum passo, aproveite e assine o feed.

Links Patrocinados:
laptop notebook pelicula, memoria notebook ddr, externo notebook usb, frete unico p, hd notebook 250gb