desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web

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?  ;-)