Nenhum produto encontrado nessa seleção.
Provavelmente você já deve ter visto milhares de sites WordPress com Perfil do autor abaixo do post, onde aparece uma pequena biografia, seus links para redes sociais, sua foto e o link de sua página.
Nesse artigo você vai aprender a fazer exatamente isso.
Adicionando os campos extras no perfil
Antes de qualquer coisa, vamos adicionar campos de perfil para as redes sociais do autor, mais especificamente, Twitter, Facebook e Google+.
Eu já expliquei como fazer isso no último tutorial sobre “Campos extras no perfil do usuário WordPress“, todavia, adicione o seguinte no seu functions.php.
/*-----------------------------------------------------------------------------*
Novos campos de contato
*-----------------------------------------------------------------------------*/
if ( ! function_exists('tutsup_new_contact_fields') ) {
function tutsup_new_contact_fields( $contact_fields ) {
// Twitter
$contact_fields['twitter'] = 'Twitter';
// Facebbok
$contact_fields['facebook'] = 'Facebook';
// Google+
$contact_fields['googleplus'] = 'Google+';
return $contact_fields;
} // tutsup_new_contact_fields
add_filter('user_contactmethods', 'tutsup_new_contact_fields', 10, 1);
} // function_exists
Agora acesse seu painel administrativo (seu perfil) e preencha os campos com os valores que preferir.
Criando a função
Ao invés de termos que escrever todo o código diretamente nos arquivos de template toda vez que for necessário, vamos criar uma função dentro do arquivo functions.php e depois executaremos essa função.
Adicione o seguinte:
<?php
/*-----------------------------------------------------------------------------*
Área do autor
*-----------------------------------------------------------------------------*/
if ( ! function_exists('tutsup_author_area') ) {
function tutsup_author_area() {
// Apenas apresentaremos a área do autor em posts na íntegra
if ( is_single() ):
$author_id = get_the_author_meta( 'ID' );
?>
<!-- Área do autor -->
<div class="tp-author-area clearfix">
<!-- Conteúdo interno da área do autor -->
<div class="tp-inner-author-area">
<!-- Gravatar -->
<div class="tp-author-gravatar">
<a class="tp-author-link" href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), 150 ); ?>
</a>
</div> <!-- tp-author-gravatar -->
<!-- Texto sobre o autor -->
<p class="tp-about-autor-text">
<?php _e('Sobre o autor', 'tutsup'); ?>
</p>
<!-- Nome e link do autor -->
<h3 class="tp-about-autor-heading">
<a href="<?php echo get_author_posts_url( $author_id );?>">
<?php echo get_the_author(); ?>
</a>
</h3>
<!-- Descrição do autor -->
<div class="tp-author-info">
<?php the_author_meta( 'description' ); ?>
<!-- Links sociais -->
<p class="tp-social-links clearfix">
<?php if ( get_the_author_meta( 'facebook', $author_id ) ): ?>
<a class="tp-author-social-link" href="<?php
echo get_the_author_meta( 'facebook', $author_id );
?>">Facebook</a>
<?php endif;?>
<?php if ( get_the_author_meta( 'googleplus', $author_id ) ): ?>
<a class="tp-author-social-link" href="<?php
echo get_the_author_meta( 'googleplus', $author_id );
?>?rel=author" rel="author">Google+</a>
<?php endif;?>
<?php if ( get_the_author_meta( 'twitter', $author_id ) ): ?>
<a class="tp-author-social-link" href="<?php
echo get_the_author_meta( 'twitter', $author_id );
?>">Twitter</a>
<?php endif;?>
</p>
</div> <!-- tp-author-info -->
</div> <!-- tp-inner-author-area -->
</div> <!-- tp-author-area -->
<?php endif; // is_single() ?>
<?php
} // tutsup_author_area
} // function_exists
?>
Pronto, agora podemos chamar a função dentro dos nossos arquivos de modelo.
Executando a função
Abra um arquivo de template que contenha o loop do WordPress e adicione o seguinte:
<?php tutsup_author_area();?>
Só isso é suficiente para os dados serem apresentados na tela (sem nenhum estilo configurado).
Por exemplo, estou utilizando o tema TwentyFourteen (padrão do WordPress). Nele, basta adicionar o código acima ao final do arquivo “content.php“.
Adicionando o estilo CSS (style.css)
Agora adicione o seguinte no arquivo “style.css”:
.clearfix:after {
content: '.';
width: 100%;
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
overflow: hidden;
}
.tp-author-area{
padding: 15px 0;
margin: 0;
}
.tp-inner-author-area{
/* Para ajustar ao twentyfourteen - edite conforme seu tema*/
max-width: 478px;
border-top: 1px solid #eee;
padding: 15px 0;
margin: 0 auto;
padding: 10px;
}
.tp-author-area .tp-author-gravatar {
float: left;
margin: 0 15px 15px 0;
width: 100px;
height: 100px;
}
.tp-author-area .tp-author-gravatar img {
border-radius: 50%;
max-width: 100%;
height: auto;
}
.tp-author-link{}
.tp-author-area .tp-about-autor-text, .tp-author-area .tp-about-autor-heading{
margin: 0;
padding: 0;
text-transform: uppercase;
}
.tp-author-area .tp-about-autor-text {
margin-bottom: 5px;
}
.tp-author-area .tp-about-autor-heading {
margin: 10px 0 20px 0;
clear: none;
font-size: 30px;
}
.tp-author-info{
clear: both;
}
.tp-author-area .tp-social-links{
margin: 10px 0;
}
.tp-author-area .tp-author-social-link{
color: #fff;
padding: 2px 5px;
background: #24890d;
}
.tp-author-area .tp-author-social-link:hover{
color: #fff;
}
Isso é suficiente para gerar o seguinte:
Perfil do autor abaixo do post no WordPress
Você pode estilizar com CSS conforme preferir.
Concluindo
Você pode utilizar a função tutsup_author_area() no local onde achar melhor dentro dos seus loops, você pode até mesmo executar essa função fora do loop com o ID do autor se preferir.
Em caso de dúvidas, basta comentar.
