Criando um site do zero com WordPress - #18 Criando formulário de comentários
22/03/2018No tutorial de hoje, vamos aprender como disponibilizar para o usuário a oportunidade de deixar um comentário no post do site. O primeiro passo para liberar os comentários para os usuários é inserir a função abaixo na página que desejamos que apareça o formulário de comentário.
<div class="SingleComentario">
<?php comments_template(); ?>
</div>
Se repararmos, ao utilizarmos a função acima, o WordPress buscará o formulário padrão do sistema. Para estilizarmos esse formulário, vamos criar o arquivo comments.php.
Desenvolvendo o arquivo comments.php
No arquivo comments estilizaremos nosso formulário de comentários, exibindo o formulário da forma que desejarmos.
<strong>Deixe seu comentário:</strong><br>
<form name="commentform" id="commentform" action="<?php echo get_option('siteurl').'/wp-comments-post.php' ?>" method="post">
<?php if($user_ID){ ?>
<p>Autenticado como <a href="<?php echo get_option('/wp-admin/profile.php'); ?>"><?php echo $user_identity; ?></a> | <a href="<?php echo wp_logout_url(); ?>">Sair</a></p>
<?php }else{ ?>
<div class="SingleFormulario">
Autor: <br>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" required>
</div>
<div class="SingleFormulario">
Email: <br>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" required>
</div>
<div class="SingleFormulario">
Website: <br>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" required>
</div>
<?php } ?>
<div class="SingleFormulario">
Escreva seu comentário: <br>
<textarea name="comment" id="comment" required></textarea>
</div>
<div class="SingleFormulario">
<input type="submit" value="Comentar">
</div>
<?php comment_id_fields(); ?>
</form>
Abaixo, exemplificamos o código de exibição dos comentários já realizados. No exemplo, selecionamos apenas os comentários aprovados pelo administrador do site.
<!--Parte de exibição dos comentários-->
<?php
$comment_array = get_approved_comments($post->ID);
$iComentarios=1;
arsort($comment_array);
foreach($comment_array as $comentarios){
if($iComentarios <=2){
?>
<div class="SingleComentarioRealizados">
<strong><?php echo $comentarios->comment_author; ?></strong>
<br>
<?php echo $comentarios->comment_content; ?>
</div>
<?php
}
$iComentarios++;
}
?>
Estilizando o formulário de comentários
Vamos utilizar o CSS para estilizar nossos comentários.
.SingleComentario{float: left; width: 80%; margin: 30px 10%; border-top: 5px dotted #333; padding-top: 30px; text-align: center;}
.SingleFormulario{float: left; width: 50%; margin: 20px 25%;}
.SingleFormulario input[type='text']{float: left; width: 100%; height: 40px;}
.SingleFormulario textarea{float: left; width: 100%; height: 250px;}
.SingleFormulario input[type='submit']{float:left; width: 40%; height: 40px; margin: 20px 30%; font-size: 17px; color:#FFF; font-weight: bold; text-align: center; border:0; cursor:pointer; background: #83AA4B;}
.SingleComentarioRealizados{float:left; width: 50%; margin: 20px 25%; border-bottom: 1px dashed #999; padding: 15px 0;}