Dificilmente você vai achar algum artigo na web com detalhes de como colocar informações sobre o autor do post, neste caso “Quem escreveu?”, mas logo abaixo vou explicar detalhadamente como colocar e como personalizar esse recurso dentro da página do seu blog.

Quando estiver pronto ficará como a imagem acima, mas o resultado pode ser diferente se você quiser que seja. A começar pela inclusão do código CSS, você terá um extenso número de classes para inserir no CSS:

[css]
/*========= AUTHOR INFO =========*/

#boxgraund {
background: url(images/backgroundauthor.pnga) no-repeat;
}

.author_info {
padding: 5px;
color:#666666;
}

.author_photo {
float:left;
margin-right:35px;
width:58px;
}

.author_photo img {
background-color: #FFFFFF;
padding: 3px;
border: 1px solid #cccccc;
width: 80px;
height: 80px;
float:left !important;
}
.author_info p {
font-size:12px;
padding:0px;
margin-bottom:10px;
}
.author_info a {
color:#000000;
text-decoration:none;
padding:0;
}
.author_info a:hover {
text-decoration:underline;
}
.author_info ul, .author_info li {
margin:0px;
padding:0px;
}
.author_info h1 {
font-family:Tahoma, Arial, Segoe Ui;
font-size:20px;
margin-bottom: 10px;
padding: 0px;
}

.author_email a {
float:right;
background-image: url(images/ico-email.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 26px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration:none;
font-weight:bold;
}
[/css]

Coloque do jeito que está aí em cima sem mudar nada, pode ser no começo do style.css, no meio ou no fim, isso é critério seu. O que você pode mudar aí é o tamanho da fonte, o fundo, a cor da letra, o tamanho da imagem ou a borda da caixa, no entanto o jeito que está esse código é o resultado da imagem no começo.

Agora, vamos ao código que devemos inserir no single.php ou em qualquer outro lugar que você quiser para exibir “Quem escreveu” o post. Enfim, aí está ele:

[php]
<div id="boxgraund"><div class="author_info"><h1>Sobre o autor <span style="float:right;font-size:12px;font-famoly:tahoma;arial,segoe ui;"><?php the_author_posts_link(); ?> j&aacute; escreveu <?php the_author_posts(); ?> posts.</span></h3>
<?php $email = get_the_author_email(); $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5($email). "&default=".urlencode($GLOBALS['defaultgravatar'] )."&size=48"; $usegravatar = get_option(‘woo_gravatar’); ?>

<span class="author_photo"><img src="<?php echo $grav_url; ?>" width="80" height="80" alt="" /></span>
<p><?php the_author_description(); ?> <br style="clear:both;" /></p>
<p class="author_email"><a href="/contato">Envie uma mensagem</a></p></div>
</div>
[/php]

A primeira div boxgraund é tudo que envolva o fundo personalizado desse recurso, tanto é, que eu não uso porque não tem muita necessidade, por isso, se você analisar bem o código CSS no começo, verá que o link da imagem PNG, no final está assim: .pnga, justamente pra não exibir a imagem que está dentro da pasta images do tema.

Foi até bom falar isso, pois existe diferenças na pasta images de alguns temas, ou seja, pode ser que a pasta de imagens do seu blog seja “img” e não “images”, ou tanto faz. Se for diferente, troque para o nome que está no seu tema.

No CSS, a classe/class “.author_info p” configura o tamanho da fonte e a margem de distância do texto ao fundo. Você pode inclusive acrescentar a linha “font-family: arial, tahoma, segoe ui;” para modificar a fonte das letras e/ou “color:#ff0000;” para trocar a cor das letras.

Não menos importante e muito funcional existe também o recurso “Enviar Mensagem”, ao clicar no link, o usuário é direcionado até a página de contato do seu blog, mas se você quiser pode configurar para ir para outra página ou abrir o endereço mailto:seuemail@seuemail.com. O código dele no single.php é:

[html]
<p class="author_email"><a href="/contato">Envie uma mensagem</a></p>
[/html]

E no CSS é:

[css]
.author_email a {
float:right;
background-image: url(images/ico-email.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 26px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration:none;
font-weight:bold;
}
[/css]

A partir dessa classe você pode modificar tudo que desejar a respeito do “Enviar Mensagem”, trocar até o ícone, inclusive… Bom, esses são todos os códigos necessários para adicionar o recurso “Quem escreveu?”, espero que tenha ajudado e, se alguma coisa não ocorreu como espero no seu blog, manda um comentário especificando o erro.