Embed Size (px)
Citation preview
Como criar um tema simples para o Tumblr
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 fotoEssa 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.
1. 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.
2. Não é permitido usar widgets de terceiros como Disqus, Flickr, entre outros. Tem que usar os códigos disponíveis na documentação.
3. Precisa suportar todos os tipos de categorias (lembra que eu citei lá em cima?).
4. Precisa suportar as tags padrão do sistema.5. 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 downloadpor aqui (ou no link lá em cima).
Como exibir artigos relacionados no Tumbr (RelPosts Widget)
O Eduardo Miranda entrou em contato comigo pelo formulário de contato do blog, falando sobre um plugin bem interessante para Tumblr que ele desenvolveu. A finalidade é mostrar artigos relacionadosao artigo atual. Existem uma infinidade de plugins desse tipo para WordPress mas, assim como ele também sentiu falta, não encontrei nenhum que realiza tal funcionalidade no Tumblr.
O desenvolvedor explica como o plugin funciona:
Primeiro, ele pega todas as tags do artigo; Depois “chama” a API do Tumblr em busca de artigos com as mesmas
tags; Adiciona o título e endereço do artigo na página.Como utilizar?Para inserir em seu Tumblr, basta copiar o código do plugin e inserir no local em que você deseja que ele exiba a parte de “Artigos relacionados”. Lembre-se de inserir na parte {block:Posts} … {/block:Posts}. E se o seu tema já possuir os blocos {block:HasTags} e {block:Permalink} lembre-se de inserir o código dentro deles.
{block:HasTags}
{block:Permalink}
<--! Start Tumblr Related Posts widget -->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script src="http://relposts.googlecode.com/svn/trunk/relposts.js?
tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<--! End Tumblr Related Posts widget -->
{/block:Permalink}
{/block:HasTags}
Opções avançadasVocê pode fazer diversas customizações no plugin, como, por exemplo: alterar a estilização do plugin; alterar o tamanho máximo de caracteres exibidos no título do artigo (padrão é 60) e a quantidade de artigos que serão exibidos na lista (padrão é 8).
A documentação do widget está disponível em inglês no site do desenvolvedor.
Artigos Relacionados: Como exibir artigos relacionados no Tumbr (RelPosts Widget) Documentação do Tumblr em Português (Parte 1) [SÉRIE] Como criar o seu tema para Tumblr – Parte 2 Colocando ícone (favicon) em seu website [SÉRIE] Como criar o seu tema para Tumblr – Parte 1 Termos que originaram visitas para esse artigo: como criar um tema para tumblr como fazer um tema para tumblr como criar um theme como fazer temas para tumblr como fazer um theme como fazer um theme para tumblr como fazer themes para tumblr como criar themes para tumblr criar tema para tumblr como criar um theme para tumblr
