Viamão Lotado

Que o WordPress é um excelente gerenciador de conteúdo, todo mundo já sabe. Que é possível expandir as funcionalidades do WordPress utilizando plugins — e existem milhares deles por aí — todo mundo já cansou de saber.

Entretanto, nem sempre existe um plugin pronto para o que precisamos fazer, principalmente quando se trata de algo aparentemente simples, e quando existe a complicação envolvida é muito grande.

Nestes momentos, saber um mínimo de programação e do funcionamento do WordPress ajuda muito.

Eu tinha uma necessidade muito simples, mas que não encontrava em nenhum plugin pronto uma solução aceitável: eu queria produzir “olhos” (acho que assim que se chama, sou um zero à esquerda em tipografia), ou seja, aquelas caixinhas de texto com um trecho do texto principal em destaque. Tem plugin pra isso, mas usando “custom fields”, um horror de entender a mecânica, nem me animei a implementar. Além disso, eu queria que esses olhos fossem conteúdo adicional, complementar ao post, e não um mero destaque de um excerto. Ou seja, eles precisariam aparecer no feed também!

Escolhi resolver o problema utilizando shortcodes do WordPress, na verdade a mesma técnica já descrita em outro artigo de minha autoria: Monetize seus posts antigos no WordPress.

Assim, criei o shortcode que resolvi chamar de infobox, e que tem o seguinte formato.

[infobox]Texto que vai aparecer destacado[/infobox]

Simples, não?

O efeito visual pode ser conferido “ao vivo” na página Como funciona o GPS do Xperia X1, ou pela imagem abaixo (só da parte que interessa).

Para obter o mesmo resultado em seus posts você só tem que inserir o seguinte código no arquivo style.css do seu tema.

.infobox {
float: right;
font-style: italic;
font-face: Arial;
margin: 12px 0 12px 9px;
border-left: 3px solid #c00;
padding-left: 5px;
width: 240px;
width: 35%;
padding: 4px 0 4px 8px;
font-size: 80%;
clear: right;
background-color: #ffffff;
}

E no arquivo functions.php do tema insira o seguinte código (antes do ?>, naturalmente).

// Meus shortcodes
function janio_infobox($atts, $content=''){
  if (!is_singular())
    return "<em>$content</em>";

  $before = "<div class="infobox">";
  $after = "</div>";

  return $before . $content . $after;
}

add_shortcode('infobox', 'janio_infobox');

O código realmente é muito simples e fala por si.

Primeiro criamos a função que vai interpretar o shortcode, e em seguida a registramos no WordPress.

A nossa funçãozinha então recebe o texto que está no shortcode, e verificamos se estamos numa página singular (um post ou uma página no site), pois não queremos correr o risco de bagunçar o layout da página incial, tampouco queremos deixar o feed bagunçado.

Então, se não for uma página singular, o código apenas o envolve numa tag de itálico (poderia ser um blockquote também), ou poderíamos fazer um return “” para fazer o infobox simplesmente sumir.

Caso seja uma página singular, o código cria a tag DIV com a classe CSS infobox, e retorna a tag inteira, com o conteúdo, para que o WP trate o conteúdo normalmente.

Quais os outros usos que você gostaria de ver para os shortcodes do WordPress? Os comentários são seus!