Wordpress logo

Muitas pessoas optam por remover o sistema de comentários padrão do WordPress e adicionar algo como disqus, comentários do Facebook ou Google+, ou qualquer outro serviço mais profissional. Isso acontece por milhares de fatores, mas o que acho que mais leva as pessoas à troca são os spammers. Além disso, os outros serviços poupam recursos do servidor, como serviço de e-mail e MySQL.

Quando trocamos o sistema padrão de comentários do WordPress, o novo sistema irá tomar conta do nosso arquivo “comments.php” e não precisaremos nos preocupar com ele, porém, se esse não for o seu caso e você ainda insiste em utilizar o sistema de comentários padrão do WordPress, será necessário criar o template de comentários e estilizar o mesmo com CSS.

Vamos ver como fazer logo abaixo.

Aulas anteriores

Antes de continuar, não se esqueça de seguir as aulas anteriores. Algumas partes desse artigo podem parecer incompletas se você não ler as aulas anteriores.

Criando o arquivo comments.php

Primeiramente é necessário criar o arquivo comments.php, porém, ao invés de ficarmos criando várias funções, pesquisar o Codex inteiro ou ficar perguntando em fóruns. Vamos pegar o arquivo comments.php do tema Twenty fourteen, em seguida o CSS.

Feito isso, vamos modificar conforme precisarmos.

Veja como ficou meu arquivo comments.php:

<?php
/**
 * Aqui vamos garantir que os comentários só vão aparecer em posts, páginas ou
 * anexos. Além disso, também bloqueamos os comentários para páginas com senha,
 * eles só vão aparecer se o usuário digitar a senha.
 */
if ( post_password_required() || ! is_singular() ) {
	return;
}
?>

<?php
/**
 * A área de comentários do tema "TwentyFourteen"
 * com algumas edições necessárias.
 */
?>
<div id="comments" class="comments-area">

	<?php if ( have_comments() ) : ?>

	<h4 class="comments-title">
		Comentários
	</h4>

	<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
	<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
		<h5 class="screen-reader-text">Navegação dos comentários</h5>
		<div class="nav-previous"><?php previous_comments_link( 'Comentários mais antigos' ); ?></div>
		<div class="nav-next"><?php next_comments_link(  'Comentários mais recentes'  ); ?></div>
	</nav><!-- #comment-nav-above -->
	<?php endif; // Check for comment navigation. ?>

	<ol class="comment-list">
		<?php
			wp_list_comments( array(
				'style'      => 'ol',
				'short_ping' => true,
				'avatar_size'=> 34,
			) );
		?>
	</ol><!-- .comment-list -->

	<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
	<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
		<h5 class="screen-reader-text">Navegação dos comentários</h5>
		<div class="nav-previous"><?php previous_comments_link( 'Comentários mais antigos' ); ?></div>
		<div class="nav-next"><?php next_comments_link(  'Comentários mais recentes'  ); ?></div>
	</nav><!-- #comment-nav-above -->
	<?php endif; // Check for comment navigation. ?>

	<?php if ( ! comments_open() ) : ?>
	<p class="no-comments">Os comentários estão fechados.</p>
	<?php endif; ?>
	
	<?php endif; // have_comments() ?>

	<?php comment_form(); ?>

</div><!-- #comments -->

Agora basta adicionarmos o CSS que segue abaixo.

CSS para os comentários

O CSS também é parte do código do tema Twenty Fourteen, porém, editei várias coisas para deixar com a cara que eu queria, veja:

/**
 * A área de comentários do tema "TwentyFourteen"
 * com algumas edições necessárias.
 */
.comments-area {
	margin: 30px auto;
	max-width: 100%;
	font-size: 12px;
}

.comments-area textarea {
	width: 100%;
}

.comment-body  {
	border: 1px solid #ddd;
	background: #f9f9f9;
	padding: 15px;
	margin: 15px 0;
}

.comment-reply-title,
.comments-title {
	font: 700 16px/1.5 sans-serif;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.comment-list {
	list-style: none;
	margin: 0 0 30px 0;
}

.comment-author {
	font-size: 14px;
	line-height: 1.7142857142;
}

.comment-list .reply,
.comment-metadata {
	font-size: 10px;
	text-transform: uppercase;
}

.comment-reply-link {
	padding: 5px 10px;
	color: #fff;
	display: inline-block;
	background: #1e88e5;
}

.comment-author .fn {
	font-weight: 900;
}

.comment-list article,
.comment-list .pingback,
.comment-list .trackback {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 24px;
	padding-top: 24px;
}

.comment-list > li:first-child > article,
.comment-list > .pingback:first-child,
.comment-list > .trackback:first-child {
	border-top: 0;
}

.comment-author {
	position: relative;
}

.comment-author .avatar {
	border: 1px solid rgba(0, 0, 0, 0.1);
	height: 18px;
	padding: 2px;
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
}

.says {
	display: none;
}

.comment-author,
.comment-awaiting-moderation,
.comment-content,
.comment-metadata {
	padding-left: 30px;
}

.comment-edit-link {
	margin-left: 10px;
}

.comment-content {
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	word-wrap: break-word;
}

.comment-content ul,
.comment-content ol {
	margin: 0 0 24px 22px;
}

.comment-content li > ul,
.comment-content li > ol {
	margin-bottom: 0;
}

.comment-content > :last-child {
	margin-bottom: 0;
}

.comment-list .children {
	list-style: none;
	margin-left: 15px;
}

.comment-respond {
	margin-bottom: 24px;
	padding: 0;
}

.comment .comment-respond {
	margin-top: 24px;
}

.comment-respond h3 {
	margin-top: 0;
	margin-bottom: 24px;
}

.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.no-comments,
.form-allowed-tags,
.form-allowed-tags code {
	color: #767676;
}

.comment-notes,
.comment-awaiting-moderation,
.logged-in-as {
	font-size: 14px;
	line-height: 1.7142857142;
}

.no-comments {
	font-size: 16px;
	font-weight: 900;
	line-height: 1.5;
	margin-top: 24px;
	text-transform: uppercase;
}

.comment-form label {
	display: block;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
}

.form-allowed-tags,
.form-allowed-tags code {
	font-size: 12px;
	line-height: 1.5;
}

.required {
	color: #c0392b;
}

.comment-reply-title small a {
	color: #2b2b2b;
	float: none;
	overflow: hidden;
	font-size: 12px;
	display: block;
	clear: both;
}

.comment-navigation {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 48px;
	text-transform: uppercase;
}

.comment-navigation .nav-next,
.comment-navigation .nav-previous {
	display: inline-block;
}

.comment-navigation .nav-previous a {
	margin-right: 10px;
}

#comment-nav-above {
	margin: 15px 0;
}

O trecho de código acima deverá ser adicionado no arquivo css/main-style.css do nosso tema básico.

Nosso sistema de comentários ficou assim:

Sistema de comentários - Tutsup Básico

Sistema de comentários – Tutsup Básico

Download

Se quiser baixar o nosso tema até o momento (com template de comentários WordPress), segue o link:

Em caso de dúvidas é só perguntar nos comentários abaixo.