Agregar un Formulario de Comentarios en tu Tema de WordPress

En el artículo anterior Guía completa para crear un Tema de WordPress desde Cero hemos visto como crear un tema para WordPress, pero sólo vimos las páginas principales. Ahora veremos como agregar un formulario de comentarios para los artículos.

Template de comentarios

En WordPress el archivo comments.php se utiliza para visualizar los comentarios enviados por los visitantes, para mostrar el formulario donde se puede agregar un comentario e incluso para la paginación de comentarios de ser necesario.

Para nuestro caso, creamos el archivo comments.php en la carpeta de nuestro tema e incluimos el siguiente código.


<?php
if ( post_password_required() )
    return;
?>
<section class="post-comments">
    <div class="content">
        <h3>Comentarios</h3>

        <?php if ( have_comments() ) : ?>
            <div class="comment-list">
                <?php
                wp_list_comments( array(
                    'style'       => 'div',
                    'short_ping'  => true,
                    'avatar_size' => 48,
                ) );
                ?>
            </div>
        <?php endif; ?>

        <?php comment_form(); ?>
    </div>
</section>

Notar que hemos utilizado las siguientes funciones de WordPress:

post_password_required: Comprueba si el contenido requiere clave para visualizarla.
have_comments: Comprueba si el contenido actual tiene comentarios.
wp_list_comments: Devuelve la lista de comentarios publicados en el contenido actual.
comment_form: Imprime el formulario para agregar comentarios en la página actual.

Incluirlo en el Tema

Ahora que tenemos el template para mostrar el listado y formulario para comentarios lo vamos a incluir en nuestro tema, para ello editamos el archivo single.php y agregamos el siguiente código después el bloque donde de muestra el contenido del artículo.


<?php
if (comments_open() || get_comments_number()) :
    comments_template();
endif;
?>

Notar que usamos la función comments_template que se encarga de incluir el contenido del archivo comments.php en nuestro tema.

Aplicar estilos

Ya tenemos los comentarios, pero estos no tienen diseño, para ello vamos a utilizar CSS para cambiar la apariencia de los diversos elementos que componen los comentarios.


/* comments */
.post-comments { border-top: solid 1px #ccc; margin-top: 24px; }
.post-comments h3 { font-size: 1.4em; }

.comment-list .comment { border-bottom: solid 1px #ccc; margin: 0 0 24px; padding: 0 0 24px; }
.comment-meta { margin-bottom: 20px; margin-left: 60px; }
.comment-author cite a { font-style: normal; font-weight: bold; }
.comment-author .says { display: none; }
.comment-author.vcard { position: relative; padding-left: 60px; }
.comment-author.vcard img { position: absolute; left: 0; top: 5px; }

/* comment form */
.comment-form label { display: block; font-weight: bold; }
.comment-form p { margin: 0 0 12px; }

.comment-form input[type=text],
.comment-form input[type=email],
.comment-form textarea { padding: 8px; height: 50px; border-radius: 4px; border: solid 2px #ccc; }
.comment-form textarea { height: 166px; }

.comment-form input[type=checkbox] { float: left; margin-right: 10px; }
.comment-form input:focus,
.comment-form textarea:focus { border: 2px solid rgba(0,0,0,.4); }
.comment-form input.error,
.comment-form textarea.error { border: 2px solid #dd356e; }

.comment-form .comment-form-author { float: left; width: calc(50% - 12px); margin-right: 12px; }
.comment-form .comment-form-email { float: left; width: calc(50% - 12px); margin-left: 12px; }

Listo, con estos estilos obtenemos el siguiente resultado:

Recomendaciones

Agrega un plugín para evitar SPAM en los comentarios, ejemplo: Akismet o Antispam Bee
Se puede personalizar el formulario (cambiar orden de los campos, nombre de los campos), para ello puedes usar add_filter o también plugins.
Desactiva la aprobación automática de comentarios, de lo contrario pueden publicarse comentarios ofensivos o SPAM en tu web.

Conclusión

Agregar soporte para comentarios en un tema de WordPress es algo sencillo, la tarea principal consiste en aplicar estilos para cambiar la apariencia. Finalmente es importante usar algún plugin para evitar el SPAM en tus comentarios.