Tutorial WordPress: Como Mostrar o Perfil do Autor no Post
Imagem: stock.xchng
Personalizar o blog e mostrar ao visitante quem é você, o que você faz e, principalmente, deixar com que as pessoas saibam que quem está ali é um ser humano, acessível, é bom e dá credibilidade.
Uma das formas de fazer isso é “dar sua cara para bater”, ou seja, mostrar seu rosto, deixar com que as pessoas saibam não só quem é você, mas o que você faz.
E uma boa ferramenta para isso é mostrar o seu perfil ao final de cada post!
O grande problema é: Como fazer?
Não mais, vamos aprender agora!
A maneira mais simples de se fazer isso é usar as informações que você já tem no seu perfil do autor no Dashboard.
E para fazer isso, tudo o que vamos precisar é incluir um pequeno código na página single.php que é a responsável pelos posts individuais do blog (quando a página está aberta aparecendo os comentários).
Na página single.php vamos encontrar a função the_content() e inserir o seguinte trecho de código logo após ela:
<!– INICIO PERFIL –>
<div id=”perfildoautor”>
<?php echo get_avatar (get_the_author_id() , 80 ); ?>
<a href = “<?php the_author_url(); ?>”>
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a> – <?php the_author_description(); ?><br />
<span><a href=”mailto:<?php the_author_email(); ?>” title=”Enviar e-mail”>Enviar e-mail</span></p>
</div>
<!– FIM PERFIL –>
Vamos entender:
O <div id=”perfildoautor”> é a chave que vamos usar para aplicar os estilos depois.
O <?php echo get_avatar (get_the_author_id() , 80 ); ?> puxa a imagem do avatar usado pelo autor (se você ainda não tem um um clique aqui e faça o seu) com 80 pixels de altura e largura.
O <?php the_author_url(); ?> puxa a url (endereço) da página do autor especificada no seu perfil e cria o link para ela.
O <?php the_author_firstname(); ?> puxa o primeiro nome do autor e o <?php the_author_lastname(); ?> puxa o sobrenome do autor.
O <?php the_author_description(); ?> puxa a descrição do autor.
O <?php the_author_description(); ?> puxa o e-mail do autor.
O <?php the_author_email(); ?> puxa o -mail do autor (no caso está ligado ao mailto: para abrir o assistente de e-mail do leitor).
Agora vamos cuidar dos estilos!
Para acrescentar estilos ao código, vá até a página style.css e acrescente ao final dela:
#perfildoautor {
height: 80px;
padding: 10px;
margin: 10px 0;
background: #cccccc;
border: 1px solid #000000;
}#perfildoautor h4 {
margin: 0 0 10px 0;
font-size: 1.2em;
}#perfildoautor img {
margin: 0 15px 10px 0;
float: left;
border: 1px solid #000000;
}
Agora vamos entender os estilos que acabamos de aplicar:
No primeiro estilo #perfildoautor (área do perfil completa)
O height: 80px; controla a altura da área de perfil, você pode e deve alterar o número para mais ou para menos até chegar na altura desejada.
O padding: 10px; controla o espaço interno da área do perfil.
O margin: 10px 0; controla a margem entre a borda da área de perfil e o seu conteúdo.
O background: #cccccc; controla a cor de fundo da área de perfil.
O border: 1px solid #000000; exibe uma borda ao redor da área de perfil.
No segundo estilo #perfildoautor h4 (Nome e link do autor)
O margin: 0 0 10px 0; controla a margem entre o título e o restante do conteúdo.
O font-size: 1.2em; controla o tamanho da fonte.
No terceiro estilo #perfildoautor img (Imagem do autor)
O margin: 0 15px 10px 0; controla a margem entre a imagem e o restante do conteúdo.
O float: left; controla onde a imagem vai aparecer.
O border: 1px solid #000000; exibe uma borda ao redor da imagem.
*Criei esse código como está e os estilos, depois testei localmente. Mesmo assim, qualquer dúvida deixe nos comentários!
Ah! Já ia me esquecendo! Esse é o resultado final do perfil como está aí no nosso código (é uma imagem claro, só para ilustrar):
Até o próximo tutorial!
Olá,
Fiz exatamente como pediu só que o fundo aparece branco… =/
Como devo proceder?
Grato desde já.
Já consegui, era só fazer umas modificações. Valeu pela dica!
Olá, Este artigo me ajudou, era o que estava procurando. Agora gostaria de saber como criar um campo personalizado para que as informações biográficas apareçam apenas em alguns posts. Alguém pode me ajudar???
Obrigado.
gostaria de saber como mudar a imagem de Admin (post) do meu blog o [ wordpress-2.9.2 ]
por favor entre em contato comigo no meu email.
Grato.
e como NÃO MOSTRAR nada acerca do perfil do Autor “assinando” as postagens? Há como desabilitar isso?
Perfeito adorei, só não consigo mudar a cor do fundo do perfil para dar destaque ás letras, ja mudei mas não está funcionando, alguma dica?
outra coisa minha foto não está aparecendo e estou registrada no gravatar