Optar por utilizar Wordpress como plataforma para fazer um blog ou site é, certamente, uma bela opção (quando é conveniente para o projeto, claro; porque há casos em que o Wordpress não atende às exigências). Depois deste primeiro passo, de se decidir por qual ferramenta usar, inicia-se uma divertida “maratona” rumo à configuração, instalação de plugins, cadastro em serviços úteis, etc. Uma das chaves para o sucesso de um blog/site é, com certeza, o design apresentado aos visitantes. Criar o próprio tema (ou adaptar um tema já criado) é a solução, neste caso.

Muitas vezes, entretanto, as pessoas que criam/adaptam um tema não conseguem expressar sua criatividade ao usar o Wordpress por ainda não saberem mexer direito – ou ter medo de mexer e “estragar tudo” – no CMS, limitando-se a utilizar “simples” menus, imagens, estruturas, layouts, etc (não que isso seja algo ruim, mas, às vezes, o projeto pede um “algo a mais”).

Rumo a uma feitura/personalização de um tema de qualidade, um recurso muito interessante que pode ser usado é usar qualquer tipo (fonte tipográfica) no blog, seja em menus, barra lateral ou, mesmo, no título dos artigos. Outra coisa é utilizar botões com design melhor, mais bem elaborados, que sejam mais bonitos e chamem mais a atenção dos visitantes.

“Sexy Buttons”

Alex Griffioen ensina, em seu artigo “How to make sexy buttons with CSS“, como fazer botões que sejam mais bonitos e atrativos. Em sua técnica, ele mostra que é simples a técnica para usar, por exemplo, botões arredondados que se adaptem a qualquer tamanho de texto, aumentando e diminuindo conforme o caso (entendeu o “sexy“, agora?).

Sabendo da técnica, é possível usar a cabeça para criar os menus mais fantásticos, garantido a beleza, simplicidade e leveza do código e ainda agradando a pessoas e mecanismos de busca. Como você pode ver no artigo que ensina a fazer “Sexy Buttons”, a técnica é bem simples e envolve somente o uso de algum XHTML e CSS extra para conseguir o efeito. Leia o artigo, aí, que você vai ver como se faz.

Limitações para usar Sexy Buttons no Wordpress

Uma das coisas que devem ser feitas para se conseguir o efeito “Sexy Buttons” é envolver o texto do link em um span. Sem isso, nada feito. A limitação do Wordpress está em, justamente, não ter nenhum tipo de argumento para a função wp_list_pages() para especificar trechos de código para vir antes e depois do nome das páginas.

Na prática, isso significa que não é possível, num primeiro momento, utilizar Sexy Buttons em blogs e sites baseados em Wordpress – utilizando esta ténica do Alex Griffioen.

Como usar Sexy Buttons em menus do Wordpress: mutreta

A primeira mutreta técnica que pode ser usada para usar os tais Sexy Buttons é envolver o título das páginas com o par de tags “span”.

Dessa maneira, surpreendentemente, o Wordpress interpreta corretamente como XHTML e a técnica passa a funcionar. Mas nem tudo são flores. Existem 2 inconvenientes principais ao fazer isso:

1. A descrição da página na tela de listagem de páginas, no painel administrativo, fica com os “<span>” aparecendo (algo que não influencia no funcionamento geral, mas inaceitável para um site encomendado por um cliente).
2. O title (aquele espécia de tooltip que aparece quando se deixa o ponteiro do mouse em cima de um link) da listagem de páginas vai também aparecer envolto ao par de “span”.

Como usar Sexy Buttons em menus do Wordpress: alteração de função nativa

E existe, também, a maneira mais ou menos correta de se conseguir o efeito, que é editar a função nativa do Wordpress de listagem de páginas. Chega até a ser mais fácil dessa maneira, já que não é preciso especificar o par de tags para cada título de página, dado que ele já vai inserir automaticamente.

O arquivo a ser editado é o “classes.php”, que fica na estrutura de pastas wp-includes/classes.php. Mais especificamente, o que deve ser alterado está na linha 578 (na versão 2.6.x, do Wordpress).

Onde está:

$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '">' . apply_filters('the_title', $page->post_title) . '</a>';

Acrescentar o par de span, o que resulta em:

$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '"><span>' . apply_filters('the_title', $page->post_title) . '</span></a>';

O único “porém” deste outro jeito é que todas as exibições de páginas que você fizer vão estar envoltas entre “<span>” e “</span>“, já que a alteração foi realizada diretamente na função do Wordpress. Se o seu blog/site vai ter as páginas listadas somente em um local e/ou não vai interferir em seu CSS este “span”, então pode dormir sossegado!

Viu como é fácil ter sexy buttons em seu Wordpress?  ;-)

Sem sombra de dúvidas, um dos motivos que tornou o Firefox o melhor navegador do mundo é sua capacidade de aceitar extensões (ou plugins) para aprimorar suas funcionalidades e criar funcionalidades totalmente novas. E o fato de que qualquer – com conhecimento necessário – pode criar e disponibilizar sua própria extensão foi o “impulso final” para que os plugins do Firefox se tornassem queridos e populares.

Ante tamanha “oferta” de extensões para Firefox, ficar confuso e não saber qual instalar ou deixar de instalar é uma situação comum de acontecer. A compilação de plugins para Firefox a seguir – divididos em categorias, para facilitar – tem como objetivo ajudar a você se decidir e, quem sabe, conhecer algumas extensões que você nem imaginava existirem.

Extensões para Firefox: navegaçã por abas

• Morning Coffee. Organize web sites para abrir em abas como parte de sua rotina diária (quais sites você visita na Terça? Visites todos somente quando for Terça).
• Tab Mix Plus. Aumente as funcionalidades de abas no Firefox: duplicação de abas, controle de foco, opções para cliques, reabrir abas e janelas fechadas pora acidente, dentre outros.
• ColorfulTabs. Especifique cores para as suas abas e se organize melhor para achar os diferentes web sites abertos em cada uma delas.
• FaviconizeTab. Com esta extensão do Firefox você “faviconiza” suas abas: elas ficam menores e somente o favicon aparece em cada uma.
• IE Tab. Bastante conhecida no “ramo”, esta extensão permite abrir uma aba com o modo de renderização do Internet Explorer (pessoalmente, prefiro abrir o próprio browser quando estou desenvolvendo).

Extensões para Firefox: segurança e anonimato

• NoScript. Bloqueia a execução automática de Javascript, Java, Flash e outros tipos de formatos; é preciso declarar específica e individualmente para cada caso que se trata de um site confiável.
• FoxyProxy. Percorra a web anonimamente, com diversas opções referentes a alterações de proxys para você ficar “oculto” através das páginas que visita.
• Stealther. Apaga todos os seus rastros nos sites que visita, permitindo acessar a web através de um anonimato total (“Suas informações sob o mais absoluto sigilo”).
• Adblock Plus. Bloqueia propagandas (“ads”) dos web sites que visita e permite navegar com mais rapidez e menos poluição visual (acredito eu que isso até melhora a produtividade pessoal).
• Flashblock. Se você quer desabilitar somente os conteúdos em Flash dos web sites que visita, Flashblock é a escolha certa. Isso economiza banda e permite identificar rapidamente um conteúdo em Flash.

Extensões para Firefox: downloads e arquivos

• Open IT Online. Permite abrir documentos e imagens on line, sem precisar de qualquer outro programa complementar (diversos formatos de arquivos sobre documentos, imagens, apresentações, planilhas e mais).
• Video DownloadHelper. Permite baixar, de maneira fácil, diversos tipos de formatos de vídeo na web e convertê-los para os formatos “tradicionais” de vídeo.
• PDF Download. Antes de abrir um arquivo .pdf no Firefox, PDF Download avisa a respeito e permite que escolha baixar o arquivo, abrir ou converter para HTML.
• Download Embedded. Identifica e permite baixar diversos tipos de formatos de arquivos encontrados em web sites (mas não funciona para os vídeos embutidos por Flash, como os vídeos do YouTube, Google Videos, etc).
• DownThemAll!. A proposta do DownThemAll! é aumentar as funcionalidades e performace dos downloads no Firefox, prometendo um aumento de velocidade de até 400%.

Extensões para Firefox: melhoria da experiência na web

• Greasemonkey. Sinceramente, dispensa apresentações para um desenvolvedor web (para mais informações visite o Greasespot).
• iMacros. Automatiza o Firefox, permitindo a criação e execução de macros para tarefas específicas (nunca ouviu falar em “macro”?).
• URL Fixer. Corrige automaticamente os URLs quando você os digita errado (essa vai para os apressadinhos do teclado).
• All-in-One Sidebar. Crie uma nova barra no Firefox que provê acesso às mais usadas funções de forma simples e eficiente.
• FireGestures. Permite configurar ações e espeificar atalhos que são ativados através de “gestos do mouse”; é muito interessante e divertido.

Extensões para Firefox: desenvolvimento para web

• Web Developer. Sem comentários, também. Se você se considera desenvolvedor web e não conhece, revise seus conceitos…
• Firebug. E a observação da extensão anterior vale para esta, também: se não conhece o Firebug, pense seriamente em aprimorar seus conhecimento ou mudar de profissão.
• YSlow. Esta é uma “extensão para extensão”; trata-se de uma extensão para o Firebug que incrementa as funcionalidades, inclusive evidenciando se o web site respeita as diretrizes de performance do Yahoo!.
• ColorZilla. De forma simples e prática, permite selecionar qualquer cor que apareça na tela e permite passar para a área de transferência os valores em diferentes formatos (RGB, Hexadecimal, etc).
• SEO for Firefox. Este plugin permite visualizar diversas estatísticas referentes ao posicionamento de determinado site nos principais – e outros – mecanismos de busca.

Extensões para Firefox: diversos

• Delicious Bookmarks. Extensão oficial do delicious para Firefox, que permite controle total dos favoritos que você salva online, em ações como salvar um favorito, organizar, deletar e todas as outras possíveis.
• Cooliris. Mais conhecida como “PicLens”, esta extensão cria uma galeria 3D para a exibição de imagens nos principais buscadores como Google, Yahoo!, Flickr, dentre outros.
• ScribeFire Blog Editor. Permite publicar artigos em diversos tipos de blogs diretamente do Firefox. Integra um ambiente de publicação de artigos completo diretamente no navegador.
• FoxyTunes. Acrescenta opções ao Firefox para escutar música enquanto navega pela web. Muito bom e permite economizar memória por não abrir um programa somente para tocar músicas.
• FEBE. E, com tantas extensões assim, não poderia faltar a “meta-extensão”, que permite fazer backup de todos plugins e preferência do Firefox e restaurar posteriormente. Excelente!

Uma das (ainda) grandes limitações da web refere-se à usar qualquer fonte tipográfica em web sites. Por padrão, caso a pessoa não tenha determinado tipo que tenha sido especificado para ser exibido, o navegador renderiza por um que seja o mais próximo ou secundário – determinado pelo próprio desenvolvedor. Isso, realmente, é uma limitação, já que não é possível “controlar” inteiramente como será a exibição de tipos nos sites.

Enquanto algo melhor não é implementado por padrão, existe a possibilidade de fazer uma “gambiarra” para se exibir os textos em qualquer fonte tipográfica. São técnicas que variam desde a implementação “na unha” de imagens com textos, passando por javascript, à mudança de tipos usando Flash. São tantas as opções e scripts prontos que é como ir a uma loja onde tudo é gratuito: basta escolher e pegar.

Se você ficou “espantado” com o título deste artigo, “Como usar qualquer tipo (fonte tipográfica) em seu blog Wordpress“, leia algumas considerações sobre fonte, tipo, tipologia e tipografia.

Trocando os tipos dos títulos do blog com Facelift

Dentre as diversas opções de scripts e maneiras para usar qualquer tipo (fonte tipográfica) em web sites, indico o Facelift Image Replacement que, segundo diversos testes que fiz, mostra-se muito simples de instalar e produz resultados eficientes, trocando os textos de qualquer parte do site para qualquer tipo que se queira.

O Facelift faz sua “mágica” criando imagens em tempo real de textos de qualquer lugar de uma página web que você queira (e respeita o CSS especificado para o elemento, inclusive); e faz esta “reposição de tipos” utilizando o arquivo no formato de fontes, como .ttf ou .otf. Quer dizer, ele atua – com a licença do trocadilho – “direto na fonte“!  ;-)

Isso sem falar em sua compatibilidade com os frameworks jQuery, Prototye, Scriptaculous e MooTools e com a grande vantagem de ser ideal para garantir a acessibilidade do blog, já que, se a exibição de imagens estiver desabilitada, o “texto puro” aparece normalmente.

Instalando o Facelift em seu blog Wordpress

O primeiro passo é acessar a página de downloads do Facelift para baixar sua última versão. Para o caso do Wordpress, você tem duas opções:

1. Instalar em uma pasta no tema que você usa. Dessa forma, o script fica vinculado a seu atual tema e, praticamente, fará parte deste (se você mudar o tema, não mais terá o Facelift funcionando).
2. Instalar em uma pasta independente de temas. Instalando o Facelift em uma pasta independente, ele continua funcionando independentemente de você alterar temas ou não (o único “porém” é para algumas linhas de código que devem ser inseridas, caso haja a troca).

Então, segundo a abordagem de instalar o Facelift na pasta do próprio tema, sugiro que seja uma pasta “js” ou “javasript”. Então, vá lá e crie uma pasta “js” na pasta de seu tema para dar prosseguimento à instalação do Facelift.

Depois disso, descompacte o Facelift nesta pasta remota “js” que acabou de criar. Uma observação: a pasta raiz do Facelift vem com a estrutura “facelift-[versão]“; pessoalmente, gosto de retirar o número da versão para manter a coisa enxuta (somente “facelift”); se você não quiser fazer isso, tudo bem, mas fique atento aos códigos de chamada ao Facelift que serão mostrados posteriormente.

Configurando o Facelift para usar qualquer tipo em seu blog Wordpress

Coloque na pasta “fonts” o arquivo do tipo que você vai usar. Então, configure o arquivo config-flir.php. Vá, lá, e altere o que for necessário – o arquivo é bem comentado, não se preocupe.

Depois de devidamente instalado e configurado, é hora de chamar os arquivos necessários ao funcionamento do Facelift e usar qualquer fonte tipográfica no blog! O primeiro passo é “chamar” o corretamente para que se possa usufruir de seus benefícios.

É possível inserir chamadas a javascript no head ou body de documentos web. O indicado é antes de se fechar a tag </body>, pois evita “travar” o carregamento da página e o script só é requisitado quando todos os outros elementos da página já foram carregados. Então, vamos chamar o javascript do face lift antes de fechar o corpo do documento (</body>), o que, provavelmente, deve estar no arquivo footer.php de seu tema Wordpress.

O “macete” é chamar o javascript através de PHP (especificando o local em que se encontra a pasta raiz do script, segundo indicado na documentação oficial do Facelift), já que será preciso identificar o diretório onde ele se encontra utilizando get_bloginfo().

<?php
echo '<script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/facelift/flir.js">;</script>';
?>

Depois, é preciso iniciar o Facelifit e especificar para quais elementos haverá substituição de tipos. Uma grande vantagem é que é possível utilizar a sintaxe do jQuery, devido à compatibilidade nativa que tanto Facelift quanto Wordpress têm do framework! Então, sabendo e identificando os elementos da página que terão tipos personalizados, basta especificar isso no código (como começamos gerando com PHP, vamos continuar).

O código final fica assim (no exemplo, altero os títulos secundários da barra lateral):

<?php
echo '
    <script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/facelift/flir.js"></script>
    <script type="text/javascript">
    FLIR.init({path:"' . get_bloginfo('template_directory') . '/js/facelift/"});
    $("#sidebar h2").each( function() { FLIR.replace(this); } );
    </script>
';
?>

E pronto! Agora seu blog Wordpress pode usar qualquer fonte tipográfica, em qualquer local que você queira!

Importantes observações sobre a troca de tipos com o Facelift

Na verdade, o Facelift pode ser usado em qualquer tipo de site ou blog, seja Wordpress ou não. Entretanto, em função do peso de imagens – ainda mais geradas em tempo real – e performance do blog/site, em geral, é conveniente que se altere os tipos somente dos títulos e/ou áreas de destaque.

Importante notar que, como se trata de inserção de imagens, caso uma imagem estrapole a largura destinada ao elemento que foi “substituído” por ela, seu layout pode quebrar e/ou a imagem ficar semi-oculta, impedindo os leitores de a visualizarem por completo.

Portanto, se você utiliza artigos com título curto e/ou tem um espaço útil para os títulos considerável, use e abuse de tipos personalizados em seu blog/site; do contrário, limite-se a usar os tipos personalizados somente em áres de destaque ou textos que contenham poucas e pequenas palavras.

<update>
Confiram, também, o plugin para WordPress AnyFont.
</update>