Para quem visita regularmente o Mashable.com, provavelmente já deverá ter percebido que além de ser o maior site de tecnologia do planeta, é também um site com imensas particularidades próprias e um nível de funcionalidade muito alto. Um dos aspectos mais interessantes do Mashable é na verdade a sua seção de Trending Topics, que por norma está situada na barra lateral do blog, e que incluem os tópicos mais quentes do momento, tendo como base os grupos de usuários neles inscritos, e a movimentação que eles geram. Tendo em consideração que o WordPress é extremamente flexível, é possível criar uma seção semelhante de trending topics (tópicos quentes) baseada em Tags com imagens, conforme os colegas do wplift explicaram recentemente, exceptuando o botão Follow que o Mashable inclui para os seus usuários seguirem determinados tópicos, exigindo o registro do usuário no sistema.

trending topics

ASSOCIAR IMAGENS A CATEGORIAS E TAGS

O WordPress não suporta a associação de imagens a categorias, tags e taxonomias customizadas. Caso você pretenda associar uma imagem a uma determinada categoria ou tag, você terá forçosamente de usar um plugin, ou então desenvolver você o seu próprio código. Na preparação para criar uns trending topics deste tipo, como o Mashable, você vai precisar de decidir primeiro qual a dimensão das imagens que pretende utilizar. Neste tutorial iremos usar imagens com 40×40 pixeis, para não tornar os trending topics demasiado berrantes na sidebar do nosso blog.

PLUGIN: TAXONOMY IMAGES

O plugin Taxonomy Images criado por Michael Fields, permite-lhe associar imagens às suas categorias, tags, links de categorias, e taxonomias customizadas usando o sistema de carregamento de ficheiros do WordPress, e depois mostrar essas imagens nos seus temas WordPress. Você poderá usar este plugin para mostrar estas imagens em qualquer lugar do seu blog, seja dentro dos artigos, barra lateral, ou arquivos de template. Iremos usar este plugin para criar associações entre as imagens e tags, e aproveitaremos as suas funcionalidades para criarmos a nossa seção de trending topics.

Depois de instalar e ativar o plugin, vá no separador de gestão de Tags do WordPress, e você irá ver uma caixa ao lado de cada uma das suas tags. Se clicar nesta caixa, ela irá abrir o sistema de carregamento de ficheiros do WordPress e você poderá adicionar imagens a essa tag em particular. Tenha a certeza de que faz isso para as tags mais populares do seu blog.

associar imagens

MOSTRAR IMAGENS DE TAGS NA BARRA LATERAL

Para mostrarmos as nossas tags mais populares com imagens na barral lateral do nosso blog WordPress, iremos precisar de criar um pequeno código. Para o conseguirmos fazer, iremos começar por copiar e colar o seguinte código dentro do ficheiro functions.php do nosso template:

function my_trending_tags() {
echo "<div class='trending_topics'><ul>";
	$categories =  get_categories(array( 'taxonomy' => 'post_tag', 'orderby' => 'count', 'number' => '10' ));
	 foreach ($categories as $category) {
		$termlink = get_category_link( $category->term_id );
		$termname = $category->cat_name;
	 	$tax_term_id = $category->term_taxonomy_id;
 		$images = get_option('taxonomy_image_plugin');
 		echo '<li><a href="' . $termlink . '">';
		echo wp_get_attachment_image( $images[$tax_term_id], 'full' );
		echo '</a><br /><a href="' . $termlink . '">' . $termname . '</a></li>';
 }
	echo "</ul></div>";
}

O nosso problema agora é como mostrar esta função dentro de um widget na barra lateral. A grande maioria dos templates utiliza widgets e não é possível colocar código PHP dentro de um widget. Para resolver este problema, você deverá descarregar e ativar o plugin WordPress PHP Code Widget. Este plugin permite-lhe colocar código PHP dentro de um widget na sidebar do seu blog. Depois de ativar o plugin, vá no separador de widgets do seu blog WordPress e arraste o PHP Code Widget para a barra lateral do seu blog. Dentro desse mesmo widget, coloque a seguinte linha de código PHP:

<?php my_trending_tags(); ?>

php code widget

Guarde o seu widget e agora vá na homepage do seu blog para visualizar o aspecto final, o qual deverá ser semelhante a isto:

trending tags

ESTILIZANDO OS SEUS TRENDING TOPICS

O resultado final não é de facto muito bonito, pelo que é necessário estilizar um pouco o código, para eliminar os pontos da listagem e deixar os nosso trending topics mais agradáveis à vista dos leitores. Na folha de estilos CSS do seu template, acrescente o seguinte código:

.trending_topics ul {
list-style-type:none;
list-style:none;
}
.trending_topics li {
border-bottom:1px solid #ccc;
padding:5px;
background:#eee;
}

Logicamente, a estilização dos trending topics ficará à sua responsabilidade. Com algumas linhas de código CSS é possível criar uns trending topics bem interessantes e que lhe permitam atrair os seus usuários ao clique e à navegação por essas categorias de tags.

Até Já!