Ter um formulário de comentários numa página ou artigo de um blog, é muito comum. O que é menos comum é ver esse mesmo formulário e a lista de comentários do tal artigo completamente personalizado e exclusivo de um determinado site. Depois de ler este artigo, ficará a saber o que precisa de fazer para personalizar o seu template de comentários, adicionando também a opção de responder a um comentário que não é nativa em todos os temas WordPress.

comentarios

A grande vantagem de ter um estilo de comentários é, principalmente, a exclusividade. Para construir uma marca de sucesso com o seu site ou blog, é nos pormenores que tem que marcar a diferença. Tal como disse em cima, é muito fácil encontrar uma caixa para comentar num artigo de um blog qualquer na internet. O difícil será mesmo encontrar uma caixa agradável e visivelmente exclusiva de um qualquer site de topo. Como vemos, mesmo fazendo a referência a estes dois exemplos conseguimos fazer uma dualidade entre a exclusividade (site de topo) e a banalidade (qualquer site ou blog tem). Qual acham mais benéfico para o seu projeto?

Como personalizar os meus comentários?

 

Para começar, vá ao editor HTML (ou na dashboard do seu WordPress, vá a Aparência, Editor) e abra a sua página functions.php.

Functions.php

Cole o seguinte código, no fundo da página, que será a nova função que irá chamar o seu novo template de comentários:

<?php //this function will be called in the next section
function advanced_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
 
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
   <div class="comment-author vcard">
     <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
       <div class="comment-meta"<a href="<?php the_author_meta( 'user_url'); ?>"><?php printf(__('%s'), get_comment_author_link()) ?></a></div>
       <small><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?><?php edit_comment_link(__('(Edit)'),'  ','') ?></small>
     </div>
     <div class="clear"></div>
 
     <?php if ($comment->comment_approved == '0') : ?>
       <em><?php _e('Your comment is awaiting moderation.') ?></em>
       <br />
     <?php endif; ?>
 
     <div class="comment-text">	
         <?php comment_text() ?>
     </div>
 
   <div class="reply">
      <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
   </div>
   <div class="clear"></div>
<?php } ?>

 
 

Comments.php

Depois disso, abra o seu template de comentários (comments.php). Apague todo o seu conteúdo e cole lá o seguinte código:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 * EscolaBlog.com
 */
 
// Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
 
	if ( post_password_required() ) { ?>
		<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>
 
<!-- You can start editing here. -->
 
<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
 
	<ol class="commentlist">
		<?php wp_list_comments('type=comment&callback=advanced_comment'); //this is the important part that ensures we call our custom comment layout defined above 
                ?>
	</ol>
	<div class="clear"></div>
	<div class="comment-navigation">
		<div class="older"><?php previous_comments_link() ?></div>
		<div class="newer"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->
 
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>
 
	<?php endif; ?>
<?php endif; ?>
 
 
<?php if ( comments_open() ) : ?>
 
<div id="respond">
 
<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
 
<div class="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>
 
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
 
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
<?php if ( is_user_logged_in() ) : ?>
 
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>
 
<?php else : //this is where we setup the comment input forums ?>
 
<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
 
<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
 
<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
 
<?php endif; ?>
 
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
 
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
 
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Post" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
 
</form>
 
<?php endif; // If registration required and not logged in ?>
</div>
 
<?php endif; // if you delete this the sky will fall on your head ?>

 
 

Ativar as respostas de comentários

Para ativar as respostas de comentários, basta ir, no seu painel de administração do WordPress, a Opções, Discussão, e deixar um visto em Activar conversação de comentários até X níveis. Escolha um nível que desejar, no entanto um número considerável será, por exemplo 5.

comentarios resposta

Adicionar o estilo de comentários ao ficheiro style.css

Para dar um toque de maior exclusividade, cole a seguinte lista de estilos no ficheiro style.css:

/****************
Estilo de comentários
****************/

h3#comments,.comment-navigation,.comment-navigation:after,#respond:after,.comment-rss{display:block} 
ol.commentlist{width:100%} 
h3#comments,#respond h3{height:25px;text-align:left;background:#4c7faa;color:#fff;padding:5px 0 0 5px} 
ol.commentlist,li.authorcomment,li.comment,#respond h3,form#commentform,input#submit{margin:0}
ol.commentlist,ol.commentlist ul,form#commentform{padding:0}  
ol.commentlist{border-bottom:1px solid #ccc} 
ol.commentlist ul{margin:0 0 0 20px} 
li.authorcomment,li.comment,form#commentform textarea,form#commentform input{border:1px solid #ccc}
li.authorcomment,li.comment{padding:10px 0 0 10px;list-style:none;border-bottom:none} 
li.even{background:#fff} 
li.odd{background:#efefef} 
.authorcomment{background:#deebf9} 
ul.children ul{margin-left:20px} 
ul.children li{border-right:none} 
.vcard img{float:left;background:#c4c4c4} 
.vcard img,.comment-navigation .newer a,.comment-navigation .older a{padding:5px} 
.comment-meta,ol.commentlist li small,p.subscribe-to-comments label{position:relative} 
.comment-meta,ol.commentlist li small{top:10px;left:10px} 
.comment-text{margin:0 10px 0 0} 
.reply,.comment-navigation .newer,input#submit{float:right} 
.reply,.comment-navigation .newer a,.comment-navigation .older a,input#submit{background:#4c7faa} 
.reply{margin:0 10px 10px 0} 
a.comment-reply-link,.reply a:link,
.comment-navigation .newer a,.comment-navigation .older a,input#submit{display:inline-block;text-align:center;cursor:pointer;color:#fff} 
a.comment-reply-link,.reply a:link{padding:5px 0} a.comment-reply-link,.reply a:link,input#submit{width:70px} 
a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,
.comment-navigation .older a:hover,input#submit:hover{background:#e7e7e7;text-decoration:none;color:#4c7faa;font-weight:bold} 
a.comment-reply-link:hover,.reply a:hover,input#submit:hover{width:68px} 
a.comment-reply-link:hover,.reply a:hover{padding:4px 0} 
a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,.comment-navigation .older a:hover{border:1px solid #4c7faa} 
.comment-navigation{margin:10px 0 10px 0} .comment-navigation:after,#respond:after{content:".";height:0;visibility:hidden} 
.clear{clear:both} 
.comment-navigation .newer a:hover,.comment-navigation .older a:hover{padding:4px} 
form#commentform textarea,form#commentform input{padding:2px 3px} 
form#commentform textarea{width:442px} 
input#submit{padding:5px 0 !important;border:0 !important} 
input#submit,p.subscribe-to-comments input{outline:0} 
input#submit:hover{padding:4px 0 !important;border:1px solid #4c7faa !important} 
p.subscribe-to-comments{background:url('images/email_32.png') no-repeat} 
p.subscribe-to-comments,.comment-rss{height:32px;text-indent:42px;padding:5px 0 0 0} 
p.subscribe-to-comments input{margin:5px 3px 3px 3px !important;border:0} 
p.subscribe-to-comments label{top:-2px;color:#666} 
.comment-rss{background:url('images/rss_32.png') no-repeat} 

/*comment total stlying*/

.comment-total{text-align: center;font-size: 1.5em;color: #fff;}
.comment-total span{font-size: 2em;color: #800000;}

Poderá editar a lista de estilos se se sentir à vontade com isso, para tornar o seu site mais seu e ainda mais exclusivo, destacando-se ainda mais da sua concorrência!

E pronto, já está, agora tem os seus comentários completamente personalizados!

Até já!