Na quinta parte da série de artigos sobre como criar um wordpress template, vamos aprender a criar comments.php, o ficheiro que é responsável por mostrar todos os comentários dos artigos e páginas e também por deixar os usuários comentarem.

Recomendamos que siga este tutorial desde o inicio para acompanhar o nosso raciocínio:

comments.php

Os comentários são parte fundamental de um blog porque é o espaço onde os utilizadores podem exprimir as suas opiniões sobre os artigos e sobre o seu trabalho. O wordpress suporta comentários e o ficheiro responsável por mostrar os comentários e o formulário para comentar é o comments.php. Este ficheiro é chamado pela tag <?php comments_template(); ?> que adicionamos no nosso single.php (ver parte 4 do tutorial).

O código que vamos usar contem um loop que faz várias verificações e mostra os comentários. Ele funciona desta maneira:

  • ver se há comentários e mostra-los;
  • verificar se os comentários ainda estão abertos e mostrar/não mostrar o formulário dos comentários;
  • depois de submeter o comentário ele guarda o comentário na base de dados.

Para começar abra o seu comments.php ou crie um ficheiro com esse nome e depois use o seguinte código:

<?php
// 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">Este artigo está protegido por password. Insira-a para ver os comentários.</p>
	<?php
		return;
	}
?>

<div id="comments">
	<h3><?php comments_number('0 Comentários', '1 Comentário', '% Comentários' );?></h3>

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

		<ol class="commentlist">
		<?php wp_list_comments('avatar_size=64&type=comment'); ?>
    </ol>

		<?php if ($wp_query->max_num_pages > 1) : ?>
		<div class="pagination">
    	<ul>
    		<li class="older"><?php previous_comments_link('Anteriores'); ?></li>
   			<li class="newer"><?php next_comments_link('Novos'); ?></li>
   		</ul>
    </div>
    <?php endif; ?>

	<?php endif; ?>

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

	<div id="respond">
			<h3>Deixe o seu comentário!</h3>

			<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
            <fieldset>
				<?php if ( $user_ID ) : ?>

				<p>Autentificado como <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(); ?>" title="Sair desta conta">Sair desta conta &raquo;</a></p>

				<?php else : ?>

            	<label for="author">Nome:</label>
                <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" />

                <label for="email">Email:</label>
                <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" />

                <label for="url">Website:</label>
                <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" />

                <?php endif; ?>

                <label for="comment">Mensagem:</label>
                <textarea name="comment" id="comment" rows="" cols=""></textarea>

                <input type="submit" class="commentsubmit" value="Enviar Comentário" />

                <?php comment_id_fields(); ?>
                <?php do_action('comment_form', $post->ID); ?>
            </fieldset>
        </form>
        <p class="cancel"><?php cancel_comment_reply_link('Cancelar Resposta'); ?></p>
		</div>
	 <?php else : ?>
		<h3>Os comentários estão fechados.</h3>
<?php endif; ?>
</div>

Estilo dos Comentários:

Com este template os nossos comentários estão prontos e a funcionar, mas a aparencia e organização não são as melhores por isso vamos adicionar estas linhas de css ao style.css do tema:

#comments{
	width:630px;
	float:left;
	border-top:1px solid #bebebe;
	}

#comments h3{
	font-size:14px;
	margin:20px 0;
	}

ol.commentlist{
	list-style:none;
	}

ol.commentlist li{
	margin-bottom:30px;
	}

ol.commentlist ul{
	margin:0px;
	}

ol.commentlist ul li{
	margin:20px 20px 20px 40px;
	}

#respond{
	margin:0 0 30px 0;
	clear:both;
	}

#respond form label{
	float:left;
	clear:left;
	width:60px;
	text-align:right;
	margin-right:10px;
	}

#respond form input{
	float:left;
	width:250px;
	margin-bottom:10px;
	}

#respond form textarea{
	float:left;
	width:400px;
	height:100px;
	margin-bottom:10px;
	}

#respond form input.commentsubmit{
	float:left;
	margin-left:70px;
	}

Este estilo não é o "perfeito", se estiver a criar um tema mesmo para usar recomendamos que personalize ainda mais todos os atributos existentes para tirar o máximo dos comentários.

Como este código e estilo os comentários ficam assim:

Comentários

Download dos ficheiros

Conclusão

Com a criação do comments.php temos toda a parte do conteúdo (artigos) pronta. No próximo artigo vamos criar os ficheiros para a lateral (sidebar.php) e rodapé (footer.php) e por fim, no sétimo artigo vamos criar o functions.php, um ficheiro muito importante no tema.

Não perca o resto deste tutorial, subscreva agora a nossa newsletter:

escreva o seu email:

Qualquer dúvida deixe um comentário! :)

Este post faz parte de uma série de artigos sobre a criação de wordpress themes: