Personalizar títulos de widgets

Esta dica foi escrita por Myst, nosso colaborador do Forum.

Cada widget possui seu título e dependendo do layout que estamos construindo pode ser interessante dar uma personalizada a mais nestes títulos.

Um exemplo simples é dar duas cores para os títulos dos widgets.

Quem já tentou adicionar códigos html nestes títulos já deve ter notado que eles são interpretados como texto comum, então para fazer isso precisamos preparar os títulos para receberem este código de forma diferente, veja como.

Adicione ao seu function.php a função.

add_filter('widget_title', 'color_title_widget');
function color_title_widget( $texto ){
   return str_replace(array('[color]', '[/color]'), array('<span class="color_title_widget">', '</span>'), $texto);
}

Nesta função estamos preparando os títulos dos widgets para receberem novos códigos como [color] [/color], caso encontre no título esse código a função irá substituir por

<span class="color_title_widget">', '</span>

Vá agora a um dos seus widgets e adicione no título o código
[color][/color].

Supondo que o título do seu widget seja “Categorias” adicione o código da seguinte maneira.

Cate[color]gorias[/color]

Ao adicionar a função e este código no título você poderá ver que nada mudou em sua página, mas se reparar no código fonte você verá a tag span sendo aplicada neste título esperando para ser personalizada.

Então agora adicione em seu style.css a personalização que você deseja, como por exemplo.

. color_title_widget
   { 
   color:red
   }

Visite sua página e você verá que o texto que está entre o código [color][/color ]agora está em vermelho, deixando o título do seu widget de duas cores.

Simples, prático e inútil para muitos 🙂

Então vamos agora a outro exemplo seguindo a mesma ideia, mas agora vamos aplicar uma legenda para o título.

Adicione ao seu function.php a função:

add_filter('widget_title', 'color_title_widget');
function color_title_widget( $texto ){
   return str_replace(array('[legenda]', '[/legenda]'), array('<br /><span class="legenda_title_widget">', '</span>'), $texto);
}

Desta vez preparamos ele para receber o código [legenda][/legenda] e além de adicionar a tag span, desta vez ele irá aplicar uma tag br para que a legenda fique abaixo do título original por assim dizer.

Vá agora a um dos seus widgets e adicione no título o código [legenda][/legenda].
Ainda supondo que o título do seu widget seja “Categorias” vamos adicionar a legenda “especiais” ao título da seguinte maneira.
Categorias [legenda]especiais[/legenda]

Novamente adicione em seu style.css:

. legenda_title_widget
{
  font-size:12px;
  color:#blue;
  margin-left:5px;
}

Visite sua página e você verá que o texto que está entre o código [legenda][/legenda] agora está em azul, com uma fonte menor e afastado 5 pixels da margem esquerda, deixando o título do seu widget com uma pequena legenda de nome especiais.

Espero que tenham gostado e não se limitem a estes exemplos simples, pois as possibilidades são muitas.