Alinhar Texto dos Comentários ao Gravatar

Hoje vou apresentar uma solução interessante para quem trabalha com WordPress e que talvez já tenha visto esse problema de alinhamento entre comentário e gravatar.

Já pegou alguma vez um tema em WordPress em que os comentários não ficam alinhados de maneira alguma ao Gravatar (avatar)?

alinhar gravatar ao WordPress

Vamos aprender alinhar texto dos comentários ao gravatar fazendo alguns ajustes no style do seu tema.

A primeira coisa a fazer: é verificar se o seu tema já exibe o gravatar em seus comentários. Se a resposta for não, então cole o código a seguir dentro do arquivo “comments.php”.

1º Localize a linha abaixo e cole o código após a linha.

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

 

2º Cole o código abaixo após ela

<div>
<?php if (function_exists('get_avatar')) : ?>
<?php echo get_avatar( $comment, 40, get_bloginfo(stylesheet_directory) .'/images/gravatar.gif' ); ?>
<?php endif; ?>
</div>

Para você deixar o texto alinhado à esquerda do Gravatar, você precisa editar o arquivo style.css do tema e adicionar a linha abaixo:

#commentbox .gravatar {background: url(images/avatar-bg.gif) no-repeat;width: 58px;height:55px;margin-top: 3px;padding: 6px 0px 6px 6px;float:left;}

#commentbox .gravatar-author {background: url(images/avatar-bg-author.gif) no-repeat;width: 58px;height:70px;margin-top: 3px;padding: 6px 0px 6px 6px;float:left;}

#commentbox .gravatar img, #commentbox .gravatar-author img {border:solid 1px #000000;background-color: #FFFFFF; padding:0px; margin:0px;}

 

Salve o arquivo style.css e volte ao arquivo comments.php e chame a classe  “commentbox” ficando assim:

 

<ul class="commentlist">

 

O código tem que ser inserido antes da linha abaixo do arquivo comments.php.

 

<!-- You can start editing here. -->

<?php if ($comments) : ?>

 

Ficando assim:

 

<div id="commentbox">

<!-- You can start editing here. -->

<?php if ($comments) : ?>

 

Então é isso gente, qualquer dúvida é só comentar.

Posts Relacionados

Deixe um Comentario