Você está na página 1de 12

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 páginas fixas.

Você pode definir os valores que quiser. A configuração que eu utilizei resulta em uma área

. Além disso, é uma largura boa para exibir listas de categorias e

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.

Você pode definir os valores que quiser. A configuração que eu utilizei resulta em uma área

Criado o index.php, hoje vamos deixá-lo pronto para entrar em ação.

Se você fez tudo certo, ao acessar a administração do WordPress offline, em “Design > Themes”, você deverá encontrar um link para ativar o tema, com o thumbnail em

branco.

Clique para ativar e depois visualize o blog. Você deverá ver algo parecido com o mostrado na imagem abaixo. Clique para ampliar.

Criado o index.php, hoje vamos deixá-lo pronto para entrar em ação. Se você fez tudo certo,WordPress offline, em “Design > Themes”, você deverá encontrar um link para ativar o tema, com o thumbnail em branco. Clique para ativar e depois visualize o blog. Você deverá ver algo parecido com o mostrado na imagem abaixo. Clique para ampliar. Antes de continuar, vamos definir e identificar algumas áreas do index . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Base Page</title> <link rel="stylesheet" href="http://yui.yahooapis.com/ 2.5.1/build/reset-fonts-grids/ reset-fonts-grids.css" type="text/css"> </head> <body> <div id="doc4" class="yui-t1"> <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> <div id="bd"> <div id="yui-main"> <!--header--> <!--main--> <div class="yui-b"><div class="yui-gc"> <div class="yui-u first"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. </div> <!--main--> <!--rsidebar--> <div class="yui-u"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. </div> <!--rsidebar--> " id="pdf-obj-3-12" src="pdf-obj-3-12.jpg">

Antes de continuar, vamos definir e identificar algumas áreas do index.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title>YUI Base Page</title> <link rel="stylesheet" href="http://yui.yahooapis.com/

2.5.1/build/reset-fonts-grids/

reset-fonts-grids.css" type="text/css"> </head> <body> <div id="doc4" class="yui-t1"> <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> <div id="bd"> <div id="yui-main">

<!--header-->

<!--main-->

<div class="yui-b"><div class="yui-gc">

<div class="yui-u first">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.

</div>

<!--main-->

<!--rsidebar-->

<div class="yui-u">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.

</div>

<!--rsidebar-->

</div>

</div>

</div>

<!--lsidebar-->

<div class="yui-b">

Navigation Pane

</div>

<!--lsidebar-->

</div>

<!--footer-->

<div id="ft">Footer is here.</div>

</div>

</body>

</html>

Conforme o layout que você escolheu, a posição das barras laterais pode mudar, mas é

fácil identificar por alguns detalhes. “Navigation Pane” sempre identifica a barra esquerda. A direita é a que contém “lorem ipsum”.

Se ficar na dúvida, coloque uma palavra diferente no início de cada trecho com lorem ipsum e visualize a página.

O index que você criou não passa de uma página em html, por enquanto.

Para que ele possa exibir seus posts, é necessário incluir os códigos em php que chamam os dados para que sejam exibidos pelo navegador.

Você pode pegar esses códigos no Codex do Wordpress, mas para quem não tem muita prática, pode ser muita informação para juntar e colocar em uso.

Para facilitar, vamos utilizar uma versão modificada dos códigos encontrados no tema padrão do WordPress.

Eu prefiro usar esses códigos, já que estão sempre de acordo com a versão mais recente do sistema.

1. Header

Localize o código abaixo na área do index que você demarcou como header:

"http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title>YUI Base Page</title> <link rel="stylesheet" href="http://yui.yahooapis.com/

2.5.1/build/reset-fonts-grids/

reset-fonts-grids.css" type="text/css"> </head>

Substitua por esse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content=" <?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php if ( is_home() ) { bloginfo('name') ?> |

<?php bloginfo('description'); } else { wp_title(''); ?> | <?php bloginfo('name'); } ?></title>

<link rel="stylesheet" href="<?php bloginfo ('template_directory'); ?> /reset-fonts-grids.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" media="screen,projection" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href=" <?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo ('pingback_url'); ?>" />

<?php wp_head(); ?>

</head>

Logo abaixo, localize esse código:

<body> <div id="doc4" class="yui-t1"> <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> <div id="bd"> <div id="yui-main">

Substitua por esse:

<body> <div id="doc4" class="yui-t1"> <div id="hd"><div id="blogname"><a href="

<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?>

</a> </div> <div id="desc"> <?php bloginfo('description'); ?></div> </div>

<div id="bd"> <div id="yui-main">

Clique em update e visualize o blog, se você fez tudo certo, deve aparecer uma página como a mostrada na imagem abaixo.

<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?> </a> </div> <div id="desc"> <?php bloginfo('description'); ?></div> </div> <div id="bd">nesse link . Depois de descompactado, localize o arquivo reset-font-grids.css , ele fica na pasta reset-font-grids, que por sua vez se localiza na pasta grids. O caminho é esse, para facilitar a localização: yui_2.5.2\yui\build\reset-fonts-grids Arraste o arquivo reset-fonts-grids.css para a mesma pasta onde se encontra o index.php e o style.css do seu tema. Ele ja está linkado no header e não é necessário fazer mais nada. A função desse arquivo de css é limpar toda e qualquer formatação que possa ser definida por navegadores, garantindo que nada vai interferir na exibição. Ele também traz todas as informações sobre o posicionamento de todas as seções da página. Clique em update e visualize a página. Agora você deve ver tudo no lugar, como na imagem. Clique para ampliar. Agora, vá até a pasta base, no caminho abaixo, também na pasta do Yahoo Grids: yui_2.5.2\yui\build\base " id="pdf-obj-6-10" src="pdf-obj-6-10.jpg">

Para concluir o header, precisamos da css que vai dar forma ao blog. Como ela fica linkada no header.php, é bom incluí-la já no tema, para evitar esquecimentos futuros.

Descompacte o arquivo que você baixou do Yahoo Grids, se não baixou ainda, baixe nesse link.

Depois de descompactado, localize o arquivo reset-font-grids.css, ele fica na pasta reset-font-grids, que por sua vez se localiza na pasta grids.

O caminho é esse, para facilitar a localização: yui_2.5.2\yui\build\reset-fonts-grids

Arraste o arquivo reset-fonts-grids.css para a mesma pasta onde se encontra o index.php e o style.css do seu tema. Ele ja está linkado no header e não é necessário fazer mais nada.

A função desse arquivo de css é limpar toda e qualquer formatação que possa ser definida por navegadores, garantindo que nada vai interferir na exibição.

Ele também traz todas as informações sobre o posicionamento de todas as seções da página.

Clique em update e visualize a página. Agora você deve ver tudo no lugar, como na imagem. Clique para ampliar.

<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?> </a> </div> <div id="desc"> <?php bloginfo('description'); ?></div> </div> <div id="bd">nesse link . Depois de descompactado, localize o arquivo reset-font-grids.css , ele fica na pasta reset-font-grids, que por sua vez se localiza na pasta grids. O caminho é esse, para facilitar a localização: yui_2.5.2\yui\build\reset-fonts-grids Arraste o arquivo reset-fonts-grids.css para a mesma pasta onde se encontra o index.php e o style.css do seu tema. Ele ja está linkado no header e não é necessário fazer mais nada. A função desse arquivo de css é limpar toda e qualquer formatação que possa ser definida por navegadores, garantindo que nada vai interferir na exibição. Ele também traz todas as informações sobre o posicionamento de todas as seções da página. Clique em update e visualize a página. Agora você deve ver tudo no lugar, como na imagem. Clique para ampliar. Agora, vá até a pasta base, no caminho abaixo, também na pasta do Yahoo Grids: yui_2.5.2\yui\build\base " id="pdf-obj-6-43" src="pdf-obj-6-43.jpg">

Agora, vá até a pasta base, no caminho abaixo, também na pasta do Yahoo Grids:

yui_2.5.2\yui\build\base

Nessa pasta, você vai encontrar o arquivo base.css, ele traz uma formatação básica para a tipografia do blog.

Abra-o com um editor de html, até o Frontpage serve. O bloco de notas não é recomendado nessa parte, já que aqui, pelo menos, ele incluiu caracteres estranhos.

Copie tudo que se encontra no arquivo, desde:

h1 { /*18px via YUI Fonts CSS foundation*/

font-size:138.5%;

}

até:

p,fieldset,table,pre { /*so things don't run into each other*/

margin-bottom:1em;

}

Vá até seu arquivo style.css e cole, logo abaixo das tags.

Amanhã, incluiremos os códigos para gerar a página principal. Para adiantar, aproveite e crie vários posts no seu blog offline. Isso vai ser importante na próxima parte do tutorial.

Não é necessário ficar escrevendo, use um gerador de lorem ipsum para isso. Não esqueça de colar no bloco de notas e copiar novamente dali antes de utilizar, para remover possíveis formatações que o site inclua.

Se você fez tudo corretamente, tem um arquivo index.php pronto, gerando uma página semelhante a essa:

Nessa pasta, você vai encontrar o arquivo base.css , ele traz uma formatação básica para agerador de lorem ipsum para isso. Não esqueça de colar no bloco de notas e copiar novamente dali antes de utilizar, para remover possíveis formatações que o site inclua. Gerador de lorem ipsum Se você fez tudo corretamente, tem um arquivo index.php pronto, gerando uma página semelhante a essa: Compare com o seu para ver o que está errado. " id="pdf-obj-7-37" src="pdf-obj-7-37.jpg">

Compare com o seu para ver o que está errado.

Você pode até usá-lo diretamente, caso queira utilizar o mesmo formato, mas eu não aconselho, já que a idéia aqui é aprender a fazer um tema, não copiá-lo.

Você pode até usá-lo diretamente, caso queira utilizar o mesmo formato, mas eu não aconselho, já

Fatiando o Index

Agora é a hora de criar os arquivos individuais que fazem um tema.

É possível rodar um blog com apenas o index.php, mas não é sábio, já que isso torna muito mais difícil modificar áreas específicas ou mesmo personalizá-las.

Header

Copie todo o código marcado como header, desde <!header> até o topo da página, clique com o botão direito do mouse e escolha “recortar”. No lugar onde ficava o código recortado, escreva “header”, apenas para não correr o risco de se perder.

Cole o arquivo recortado no bloco de notas e salve como header.php, na mesma pasta onde está o index.

Onde você escreveu “header”, substitua por <?php get_header()?> e clique em “update”.

Visualize seu blog, tudo deve ser exibido exatamente como antes.

Footer

Repita o processo anterior, dessa vez copiando tudo desde <!footer> até o final da página. Recorte, cole no bloco de notas e salve como footer.php, sempre na mesma pasta utilizada para o tema.

No lugar do código recortado, coloque <?php get_footer()?>.

Clique em “update” e visualize o blog para ter certeza que tudo foi feito corretamente.

Sidebars

Agora é a vez das barras laterais.

Copie todo o código identificado como <!rsidebar–>, recorte, escreva “rsidebar” no lugar onde o código estava, cole no bloco de notas e salve como rsidebar.php.

Substitua “rsidebar” pelo código abaixo:

<?php include (TEMPLATEPATH . "/rsidebar.php"); ?>

Repita o processo para o código marcado como <!lsidebar>.

Substitua “lsidebar” pelo código abaixo:

<?php include (TEMPLATEPATH . "/lsidebar.php"); ?>

Clique em “update” e visalize o blog para conferir o resultado.

O que restou é o seu index.php, que será utilizado mais tarde para criar os templates secundários.

Validando o XHTML

Antes de continuar, vamos ver se o código que temos até agora valida como XHTML.

Ter um tema com XHTML válido é muito útil, já que reduz as chances de você ter problemas de exibição em diferentes navegadores.

Adicione esse link para o W3C Markup Validator, ja que vamos utilizá-lo freqüentemente.

Visualize seu blog e, na barra superior do navegador, clique em arquivo > código fonte. Selecione todo o código que será exibido e copie.

Vá até o W3C Validator e escolha a aba “validate by direct input”, clique em “more options” e marque a caixa “show source”.

Cole o código que você copiou na caixa de texto e clique em “check”.

Se você fez tudo certo, serão reportados 4 erros de XHTML.

Na verdade, é apenas um pequeno trecho de código que gera esses 4 erros. Erros em XHTML costuma ter efeito cascata.

Tente você mesmo encontrar o erro e corrigi-lo, guiando-se pelo código fonte que será exibido.

Antes de continuar, você deve estar lembrado que havia um erro de XHTL no código para corrigir.

Se você não encontrou, aqui vai a dica. No footer.php, antes da tag </body>, acrescente </div>.

Nem sempre uma tag faltando vai quebrar o template de um blog, mas vai, sim, fazer com que o código deixe de validar.

Corrigida a lição de casa, vamos à aula de hoje. Prepare um café porque hoje a coisa vai longe

.
.

Antes de estilizar o CSS do nosso tema, vamos criar os subtemplates, que personalizam a exibição das páginas fixas, arquivos, categorias etc.

Páginas Fixas

O subtemplate page.php é responsável pela exibição das páginas fixas, como páginas

de contato, sobre, política de privacidade e outras. São páginas que não entram na

cronologia de publicação do blog, daí o termo “fixas”.

Por sua característica informativa, normalmente dispensam comentários e não são categorizadas. Por isso, são um pouco diferentes do template index.php.

Vá até o seu index.php, copie todo o código e cole no bloco de notas ou no editor de texto de sua preferência.

Localize o trecho abaixo:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();

?></a></h2>

Substitua por esse:

<h1><?php the_title(); ?></h1>

Localize os códigos abaixo e delete todos eles:

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?>

--></small>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit',

'',

'

|

');

?>

<?php comments_popup_link('No Comments &#187;', '1

Comment &#187;', '% Comments &#187;'); ?></p>

<div class="navigation"> <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div> <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div> </div>

Salve como page.php, junto dos outros templates do seu tema.

Arquivos

Copie o código do seu index.php, cole no editor de textos e insira o código abaixo logo

após <?php if (have_posts()) : ?>.

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a category archive */ if (is_category()) { ?> <h2 class="pagetitle">Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2> <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?> <h2 class="pagetitle">Posts Tagged &#8216;<?php single_tag_title();

?>&#8217;</h2>

<?php /* If this is a daily archive */ } elseif (is_day()) { ?> <h2 class="pagetitle">Archive for <?php the_time('F jS, Y'); ?></h2> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <h2 class="pagetitle">Archive for <?php the_time('F, Y'); ?></h2> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <h2 class="pagetitle">Archive for <?php the_time('Y'); ?></h2> <?php /* If this is an author archive */ } elseif (is_author()) { ?> <h2 class="pagetitle">Author Archive</h2> <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <h2 class="pagetitle">Blog Archives</h2> <?php } ?>

Para evitar a geração de conteúdo duplicado, o que não vai ajudá-lo em nada na indexação junto aos mecanismos de busca em geral e Google em particular, vamos substituir o código responsável pela exibição dos posts.

Localize <?php the_content('Read the rest of this entry &raquo;'); ?> e substitua por <?php the_excerpt() ?>.

Salve como archive.php.

Comentários

Os comentários que serão exibidos junto aos posts são gerados pelo arquivo comments.php. para criá-lo, copie o código abaixo, cole no editor de textos e salve-o como comments.php.

O código é uma versão ligeiramente modificada do encontrado no tema padrão do WordPress. Ele exibe os comentários separados dos trackbacks, que vem abaixo dos comentários normais.