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!

Comments

comments