Como criar um tema simples para o Tumblr

Post escrito por Yeltsin Lima

Isso é uma das coisas que mais reclamo do Blogger. É extremamente complicado desenvolver temas para a plataforma. Inclusive, as buscas sobre “Como criar um tema para Blogger” só retornam tutoriais sobre WordPress! Criar um tema para Tumblr é uma coisa extremamente fácil e só precisa ter conhecimento em CSS e HTML. Diferentemente do WordPress que é necessário ter um conhecimento básico em PHP.

O Tumblr utiliza duas formas de operadores especiais para renderizar o conteúdo de forma dinâmica no HTML. São as variáveis - que inserem dados dinâmicos como a descrição do blog e o título:

<html>
    <head>
        <title>{Title}</title>
    </head>
    <body>
        ...
    </body>
</html>

E os blocos, que inserem alguns tipos de dados como artigos, ou links como “Página anterior”. Esses blocos são os famosos “loops” utilizados no WordPress.

<html>
    <body>
        <ol id="posts">
            {block:Posts}
                <li> ... </li>
            {/block:Posts}
        </ol>
    </body>
</html>

Primeiro, abra o seu editor de arquivos favorito. Algumas pessoas preferem o bloco de notas, vou utilizar a solução gratuita chamada TextWrangler para Mac OS X. Vamos iniciar com um documento .html padrão, sem nenhuma tag especial (estou utilizando o HTML 5 para ensinar. É mais fácil, é mais rápido e é mais atual!).

<!doctype html>
<html>

	<head>
		<title></title>
	</head>

	<body>
	</body>

</html>

Mas, cadê a abertura do PHP? ASP? Não precisa. A idéia do Tumblr é exatamente essa: a criação de temas é feita por puro HTML. Bastando inserir as variáveis correspondentes e/ou blocos.

No header, temos as seguintes tags padrão:

		<title>{Title}</title>
		<link rel="shortcut icon" href="{Favicon}">
		<link rel="alternate" type="application/rss+xml" href="{RSS}">

A tag {Title} obviamente vai chamar o título. O tag {Favicon} vai chamar aquele ícone de 16×16 em PNG ou formato ICO. E a tag {RSS} vai chamar o endereço do feed do seu blog (sim, apesar de pouco usado, Tumblr possui feeds).

O que é mais “diferente” é a tag de descrição que é gerada através de um bloco.

        {block:Description}
        <meta name="description" content="{MetaDescription}" />
        {/block:Description}

Eu não sou muito fã da estrutura que o Tumblr usa para montar os artigos. Ela usa uma lista em formato ol, ou seja, uma lista ordenada para criar os artigos. Nesse caso, eu prefiro usar os termos do novo HTML 5. Como vocês podem ver, eu abri o código do body com uma div (para aplicar o efeito dele centralizado, e coloquei as informações principais em um header.

<div id="container">
	<header>
		<h1>{Title}</h1>

		{block:Description}
            	<h2>{Description}</h2>
        	{/block:Description}

	</header>
</div>

Agora que criamos o “cabeçalho” do nosso site, chegou a hora de chamarmos os blocos correspondentes a cada tipo de “categoria”: Textos, Fotos, Galeria de Fotos, Frases, Link, Chat, Video e Aúdio. Sim… você vai ter que criar uma classe para cada um desses tipos. Ajuda a customizar o tema depois.

Esse é o exemplo da tag para o bloco de textos.

<section id="page">
	{block:Posts}
		{block:Text}
			<article class="text">
				<header>
					{block:Title}
						<h3><a href="{Permalink}">{Title}</a></h3>
				        {/block:Title}
				</header>
				<section class="content">
					{Body}
				</section>
			</article>
		{/block:Text}
	{/block:Posts}
</section>

Perceba que inicalmente chamamos a tag {block:Posts}. É ela que vai indicar que: é ali que começa o loop do blog. Depois passaremos a chamar cada block para cada categoria. Como acima temos o exemplo só dos textos, começamos com {block:Text}.

E perceba que o bloco de título se repete em todos. Mas, ali ele não vai repetir o título do blog mas, na verdade, o título do artigo. Já a variável {Body} é o que representa o início do texto do blog. Todo o texto escrito (e as tags do texto, como negrito e itálico) serão preenchidas automaticamente ali.

Para o artigo de imagens, temos uma coisa bem interessante:

{block:Photo}
	<article class="photo">
		<figure>
			<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
			<figcaption>
				{block:Caption}
					{Caption}
				{/block:Caption}
			</figcaption>
		</figure>
	</article>
{/block:Photo}

Você percebeu que o código para o link da imagem tem um número 500 escrito? Para que serve isso? Bom, você pode usar até 6 tipos diferentes de tamanhos de fotos:

{PhotoURL-500} – Imagens com largura de até 500 pixels
{PhotoURL-400} – Imagens com largura de até 400 pixels
{PhotoURL-250} – Imagens com largura de até 250 pixels
{PhotoURL-100} – Imagens com largura de até 100 pixels
{PhotoURL-75sq} – Uma versão quadrada da foto com 75×75 pixels
{PhotoURL-HighRes} – A versão em alta resolução da foto

Essa estrutura se repete para todas as outras categorias existentes. Baixe nossa tema. Em breve vou soltar a documentação da criação de tema do Tumblr, totalmente em português e livre para cópias!

Hospede tudo no Tumblr!

O Tumblr possui algumas regras bem “chatas” para hospedar seu tema lá, principalmente se o seu interesse é fazer parte do Theme Garden.

Hospede TODOS os arquivos no Tumblr. Seja imagens, css, arquivos Javascript, entre outros. Utilize a página de envio de arquivos estáticos. São permitidos até 5MB por arquivo e 15MB por dia.
Não é permitido usar widgets de terceiros como Disqus, Flickr, entre outros. Tem que usar os códigos disponíveis na documentação.
Precisa suportar todos os tipos de categorias (lembra que eu citei lá em cima?).
Precisa suportar as tags padrão do sistema.
Precisa seguir os padrões do Tumblr.

Essas regras, é claro, só são válidas se o seu objetivo é enviar seu tema para o Theme Garden. Caso queira usar somente em seu blog, ignore tudo isso.

Se você quiser dar uma olhada na documentação, ela está aqui: toda em inglês.

Atualização: Como indicado pelo Luan Muniz (aka @layermind), no rodapé do tema, eu havia esquecido de fechar as duas tags li. Agora está disponível a versão atualizada e vocês podem efetuar o download por aqui (ou no link lá em cima).

Que tal continuar a leitura?

Artigo por Yeltsin Lima

Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.

29 Comentários

Eliene disse:

25 de janeiro de 2011 às 3:24 pm

*_* thanks

Como criar um tema simples para o Tumblr

Hospede tudo no Tumblr!

Que tal continuar a leitura?

Artigo por Yeltsin Lima

29 Comentários

Deixe um comentário

Junte-se a galera!

Tweets Recentes

Tags Mais Usadas

Enquete