BOMBOLOM.COM

(wordpress) Atribuir uma classe de CSS no Author Template

Este é um post de José Lopes.

O Wordpress já tem configurado de origem a introdução de uma classe de CSS (Cascading Style Sheet) para o artigo (post) ou categoria activa, i.e., para a entrada em visualização no site. Esta opção é normalmente utilizada no menu lateral (sidebar) ou no menu superior (menu), permitindo criar um layout especial para diferenciar uma entrada activa.

Para o caso da lista de autores esta possibilidade não existe pelo que se tem de fazer algumas alterações para obter esta funcionalidade.

Vamos assim editar o ficheiro /wordpress/wp-includes/author-template.php por modo a incluir duas classes de CSS, uma para quando a entrada é a actual e outra para quando não o é.

No fim do ficheiro (por uma questão de organização) adicionamos a seguinte função:

function check_current_author($authorID) {
	if (is_author($authorID)){
		$css_class = 'current_author';
	}
	else {
		$css_class = 'other_author';
	}
	$output = ' class="' . $css_class . '">';
	return $output;
}

Esta função tem como finalidade devolver a parte do HTML que identifica a classe de CSS.

Explicando o código por linha:

Uma vez definida a função anterior temos de a chamar na função que faz o output da lista de autores. Assim, na função wp_list_authors tem de se substituir o seguinte código:

$link = '<a href="' . get_author_posts_url($author->ID, $author->user_nicename)
 . '" title="' . sprintf(__("Posts by %s"), attribute_escape($author->display_name))
 . '">' . $name . '</a>';

por:

$link = '';
$link .= check_current_author($author->ID);
$link .= '<a href="' . get_author_posts_url($author->ID, $author->user_nicename)
 . '" title="' . sprintf(__("Posts by %s"), attribute_escape($author->display_name))
 . '">' . $name . '</a>';

Explicando o código por linha:

A chamada do estilo de CSS vai ficar dentro da tag li. De mencionar que a alteração detalhada pertence a um loop que corre pela lista de todos os autores daí a colocação aqui da nossa nova função.

Basta depois definir no CSS duas classes current_author e other_author segundo o layout que pretendermos, tendo em atenção que qualquer efeito fica associado ao tag a.

Exemplo de CSS:

.current_author a {
	color:#54290d;
	}

.current_author a:hover {
	color:#000;
	background:#eedcbd;
	}
21.07.2007 | Ler mais | Comentários | Tags ,

Voltar à Página principal | Made with PyBlosxom