Personalizando o autor do post sem uso de plugins no Wordpress

Veja neste artigo como fazer para inserir em cada autor de seu blog uma descrição, foto e links para suas redes sociais pelo painel administrativo do WordPress sem a necessidade de instalar nenhum plugin.

por Rodrigo dos Messias

Esta técnica permite que cada autor atualize de forma independente e a hora que desejar suas informações e descrições, como não utilizaremos nenhum plugin para fazer essa personalização nosso site carregará mais rápido, por evitar o excesso de plugins instalados e isso contribui para que seu blog tenha um ranqueamento melhor, pois terá um tempo de carregamento menor, não sou contra a utilização de plugins, mas a maioria deles insere muitos códigos e requisições, que se fizermos nós mesmos poderemos evitar e ganhar tempo e na internet tempo é tudo.

Listagem 1: Personalizando o autor do post com gravatar, redes sociais e biografia na página single.php de seu tema

<div class="autor">
<div class="avatar"><?php $email = get_the_author_email(); $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5($email). "&default=".urlencode($GLOBALS['defaultgravatar'] ); $usegravatar = get_option('woo_gravatar');?><img src="<?php echo $grav_url; ?>" alt="" width="80" height="80" /></div>
<div class="autorcontent">
<div class="nomeautor"><a href = "<?php the_author_url ();?>" itemprop="url"><?php the_author(); ?></a></div>
<div class="texto"><?php the_author_description ();?></div>
</div>
<div class="redesautor">
<div class="autorredes"><a href="<?php the_author_meta( 'googleuser' ); ?>?rel=author" target="_blank"><img src="inserir caminho da imagem" width="22" height="23" /></a>
<?php if ( get_the_author_meta( 'googleuser' ) ) { ?><a href="<?php the_author_meta( 'googleuser' ); ?>?rel=author" title="Acesse nosso Google +" target="_blank">Google +</a><?php } ?></div>
<div class="autorredes"><a href="<?php the_author_meta( 'twitteruser' ); ?>" target="_blank"><img src="inserir caminho da imagem" alt="Twitter" width="23" height="23" /></a>
<?php if ( get_the_author_meta( 'twitteruser' ) ) { ?><a href="<?php the_author_meta( 'twitteruser' ); ?>" title="Acesse nosso Twitter" target="_parent">Twitter</a><?php } ?></div>
<div class="autorredes"><a href="<?php the_author_meta( 'facebookuser' ); ?>" target="_blank"><img src="inserir caminho da imagem" alt="Facebook" width="23" height="23" /></a>
<?php if ( get_the_author_meta( 'facebookuser' ) ) { ?><a href="<?php the_author_meta( 'facebookuser' ); ?>" title="Acesse nosso Facebook" target="_blank">Facebook</a><?php } ?></div>
</div>
</div>

Este código é responsável por inserir todos os campos personalizados na single.php que é página de posts de seu blog, mas antes de partir para a próxima etapa precisamos explicar como este código funciona:

Listagem 2: Este código serve para capturarmos a foto do Gravatar do autor do post

<div><?php $email = get_the_author_email(); $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5($email). "&default=".urlencode($GLOBALS['defaultgravatar'] ); $usegravatar = get_option('woo_gravatar');?><img src="<?php echo $grav_url; ?>" alt="" width="80" height="80" /></div>

Listagem 3: Este para inserir o nome do autor com um link para sua página exclusiva de postagens no blog

<div><a href = "<?php the_author_url ();?>" itemprop="url"><?php the_author(); ?></a></div>

Listagem 4: Este serve para mostrar sua descrição personalizada

<div><?php the_author_description ();?></div>

Listagem 5: Este serve para inserir as redes sociais

<div><a href="<?php the_author_meta( 'googleuser' ); ?>?rel=author" target="_blank"><img src="inserir caminho da imagem" width="22" height="23" /></a>
<?php if ( get_the_author_meta( 'googleuser' ) ) { ?><a href="<?php the_author_meta( 'googleuser' ); ?>?rel=author" title="Acesse nosso Google +" target="_blank">Google +</a><?php } ?></div>
<div><a href="<?php the_author_meta( 'twitteruser' ); ?>" target="_blank"><img src="inserir caminho da imagem" alt="Twitter" width="23" height="23" /></a>
<?php if ( get_the_author_meta( 'twitteruser' ) ) { ?><a href="<?php the_author_meta( 'twitteruser' ); ?>" title="Acesse nosso Twitter" target="_parent">Twitter</a><?php } ?></div>
<div><a href="<?php the_author_meta( 'facebookuser' ); ?>" target="_blank"><img src="inserir caminho da imagem" alt="Facebook" width="23" height="23" /></a>
<?php if ( get_the_author_meta( 'facebookuser' ) ) { ?><a href="<?php the_author_meta( 'facebookuser' ); ?>" title="Acesse nosso Facebook" target="_blank">Facebook</a><?php } ?></div>

Estes temos que tomar muito cuidado, pois são os campos personalizados, então não podemos trocar as entradas de "the_author_meta" elas estão referenciadas em seu functions.php, a alteração neste código será necessário somente no campo das imagens dos ícones, você terá que substituir onde esta escrito "inserir caminho da imagem" pelo caminho da imagem do ícone correspondente.

Figura 1: Informações do Autor personalizadas na página

Listagem 6: Adaptando o functions.php para personalizar a página do autor

<?php
// Produz um avatar compatível com hCard
function commenter_link() {
	$commenter = get_comment_author_link();
		if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {
			$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );
		} else {
			$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );
		}
	$avatar_email = get_comment_author_email();
	$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );
	echo $avatar . ' <span class="fn n">' . $commenter . '</span>';
} // end commenter_link
?>
<?php
// Campos do perfil personalizado
add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );
function my_show_extra_profile_fields( $user ) { ?>
<h3>Você nas redes sociais</h3>
<table class="form-table">
<tr>
<th><label for="googleuser">Google+</label></th>
<td>
<input type="text" name="googleuser" id="googleuser" value="<?php echo esc_attr( get_the_author_meta( 'googleuser', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">O seu perfil no Google+ (URL)</span>
</td>
</tr>
<tr>
<th><label for="twitter">Twitter</label></th>
<td>
<input type="text" name="twitteruser" id="twitteruser" value="<?php echo esc_attr( get_the_author_meta( 'twitteruser', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">O seu nome de usuário do Twitter</span>
</td>
</tr>
<tr>
<th><label for="facebookuser">Facebook</label></th>
<td>
<input type="text" name="facebookuser" id="facebookuser" value="<?php echo esc_attr( get_the_author_meta( 'facebookuser', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">O seu perfil no Facebook (URL)</span>
</td>
</tr>
</table>
<?php } ?>
<?php
// Guardar e manter as infos nos campos
add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
	function my_save_extra_profile_fields( $user_id ) {
		if ( !current_user_can( 'edit_user', $user_id ) )
		return false;
	update_usermeta( $user_id, 'googleuser', $_POST['googleuser'] );
	update_usermeta( $user_id, 'twitteruser', $_POST['twitteruser'] );
	update_usermeta( $user_id, 'facebookuser', $_POST['facebookuser'] );
	}
?>

Figura 2: Página “Seu Autor” personalizada

Com este código você personalizou a página "Seu Perfil" dentro do painel administrativo do WordPress, o novo campo se chama "Você nas redes sociais" e agora cada usuário poderá inserir de forma independente suas redes sociais e sua foto será a mesma que ele possuir no Gravatar. Depois de tudo isso pronto, você poderá personalizar o css de seus autores se baseando pela class das divs utilizadas na página single.php.

Utilizando essa técnica seu blog ficará mais leve, reduzindo o tempo de carregamento de sua página você terá um ponto a mais nos motores de busca, veja também como otimizar os posts relacionados de seu blog. Caso você ache muito complicado esta técnica sempre é possível instalar mais um plugin em seu site, então em último caso eu utilizaria o WP About Author .

Caso tenha alguma dúvida ou sugestão é só deixar um comentário. Obrigado e até o próximo artigo.