Tema Para WordPress Parte 3: Criando os Templates

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

Caso você esteja perdido, baixe o arquivo no link abaixo, que traz tudo o que fizemos até agora.

Download Index Tuturial 2

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.

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.

Na próxima eu digo o que está errado e como corrigir.

Não perca nenhum capítulo da série, assine o feed se ainda não o fez, é gratuitamente grátis.

Links Patrocinados:
lander fazer twister, twister 250 fazer 250, logitech mouse logitech, teclado mouse gabinete, premium series hasbro