Criando um site do zero com WordPress - #18 Criando formulário de comentários

No 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;}