Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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.
1. Criar todo o visual no Photoshop ou outro programa gráfico, depois codificar tudo
para transformar em um tema.
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.
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.
- Criando o Tema
Agora que você está com tudo pronto para começar, vamos ao passo-a-passo.
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.
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.
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.
<!--header-->
<!--main-->
</div>
<!--main-->
<!--rsidebar-->
<div class="yui-u">
</div>
<!--rsidebar-->
</div>
</div>
</div>
<!--lsidebar-->
<div class="yui-b">
Navigation Pane
</div>
<!--lsidebar-->
</div>
<!--footer-->
</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:
</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">
<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.
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.
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.
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
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.
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;
}
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:
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.
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.
Clique em “update” e visualize o blog para ter certeza que tudo foi feito corretamente.
Sidebars
Agora é a vez das barras laterais.
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”.
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”.
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.
--></small>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries')
?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries
»') ?></div>
</div>
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 ‘<?php single_cat_title();
?>’ Category</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2 class="pagetitle">Posts Tagged ‘<?php single_tag_title();
?>’</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.
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.