Clase 10: La plantilla de entrada y de comentarios

Las plantillas de vista de entrada son parte esencial del look and feel de un sitio y deben tener un espacio amplio para poder colocar dentro cualquier tipo de contenido (texto, imágenes, videos, descargas, etc). Esta clase, con un poco de suerte, les resultará muy fácil de entender ya que estuvimos viendo los conceptos que trataremos a continuación pero aplicado a otras plantillas.

Al visualizar una entrada, WordPress buscará primero la plantilla single.php, y en caso de no encontrarla pasará a mostrar el contenido utilizando la plantilla index.php. Les recuerdo que pueden encontrar una muy buena gráfica sobre jerarquías de plantilla en el sitio oficial.

Single.php, layout y contenido

Es la plantilla para la vista individual de una entrada y su estructura básica es como muestra la siguiente imagen.

Pasamos en limpio lo que vamos a hacer: llamamos al header, en el área de contenidos usamos las funciones the_title (el título) y the_content (el contenido), luego llamamos a la sidebar y finalmente al footer. Para que the_title y the_content puedan “traernos” contenido desde la base de datos correspondiente al ID de la entrada que estamos consultando, necesitamos colocarlos dentro del bucle.

Esto se traduce en el siguiente contenido (que es el que ya tenemos desde la clase 4).

<?php get_header(); ?>
 <div id="wrapper">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="dos-tercios listado">
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 </div><!-- end of dos-tercios -->
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
 </div><!-- end of wrapper-->
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>

La función the_content nos trae todo el contenido publicado en una entrada: su texto, imágenes, galerías, listas, etc. Y para aprovechar la oportunidad aquí es en donde necesitamos definir la alineación de las imágenes que, tal como el editor de WordPress lo señala al subir una imagen, la posición de las mismas puede ser centrada respecto del texto, a la izquierda del texto, a la derecha del texto o sin bordear por texto. Esto se traduce en el siguiente CSS.

/* alignments */
.center {text-align: center;}
img.center, img[align="center"] {display: block;margin-left: auto;margin-right: auto;}
.alignleft {float: left;}
img.alignleft, img[align="left"] {float:left;margin: 2px 10px 5px 0px;}
.alignright {float: right;}
img.alignright, img[align="right"] {float:right;margin: 2px 0px 5px 10px;}
.clear {clear:both;}
hr.clear {clear:both;visibility: hidden;margin: 0px;padding: 0px;height:0px;}

Generalmente en la vista de entrada también se suele colocar información como la fecha de publicación, en qué categoría se encuentra, etiquetas, cantidad de comentarios y el autor. Y para esta sección nos vamos a ayudar con algunos íconos para que la sección luzca lo mejor posible. En este caso nos decidimos por este set de íconos genial llamado gcons.

Vamos a construir debajo del cierre del contenedor .dos-tercios, un contenedor con class .metabox en donde colocaremos todas las funciones dentro de etiquetas span para luego insertarles algún ícono. Utilizaremos las siguientes funciones: the_category, the_time, the_author_posts_link, comments_popup_link y the_tags (cada función tiene su link al codex, aprendan a consultarlo).

<div class="metabox">
 <span class="time meta">Publicado el <?php the_time('j') ?> de <?php the_time('F, Y') ?> | </span><span class="author meta">Por <?php the_author_posts_link(); ?> | </span>
 <span class="comments meta"><?php comments_popup_link('Sin Comentarios', '1 Comentario', '% Comentarios'); ?> | </span><span class="category meta">En la categor&iacute;a <?php the_category(' '); ?> | </span>
 <span class="tags meta">Con las siguientes etiquetas <?php the_tags(); ?></span>
 </div>

El resultado, sin ningún tipo de estilo aplicado:

Los íconos gcons tienen un set en color azul. Tomamos algunos para utilizar en nuestros spans y los llevamos a tamaño 16px x 16px con Photoshop o algún programa de edición.

Al .metabox le colocamos un color azul oscuro, tipografía de color blanco, bordes redondeados y un padding para que no queden pegados al borde los elementos que ubicamos dentro.

.metabox {
 padding: 10px;
 background: #2d435a;
 color:white;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 margin: 10px 0;
 display:block;
 float:left;
 }

La clase .meta se repetirá luego dentro de cada span, los cuales tienen dos clases (ej. class=”category meta” suma dos clases, .category y .meta), por eso colocamos las propiedades background-repeat y background-position, que modificarán el ícono que insertaremos luego en la otra clase de cada span. Colocamos también un padding-left para que el texto deje un espacio para que se vea el ícono.

.meta {
 background-repeat: no-repeat;
 padding-left:20px;
 margin-bottom: 4px;
 float:left;
 height:16px;
 background-position: center left;
 }

Y colocamos el link a cada ícono.

.time {
 background-image: url(images/calendar.png);
 }
 .author{
 background-image: url(images/agent.png);
 }
 .comments {
 background-image: url(images/chat-.png);
 }
 .category {
 background-image: url(images/connections.png);
 }
 .tags{
 background-image: url(images/tag.png);
 }

Este es el resultado de nuestro trabajo.

Los comentarios

Ahora podemos insertar el llamado a la plantilla de comentarios. Bastará con colocar la siguiente función dentro del bucle (o sea, antes del endwhile).

<?php comments_template(); ?>

Y automáticamente veremos el siguiente contenido.

Si nos fijamos en el código, el HTML generado es el siguiente:

<ol class="commentlist">
 <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-31">
 <div id="div-comment-31" class="comment-body">
 <div class="comment-author vcard">
 <img alt='' src='http://0.gravatar.com/avatar/a1b6b0dc561b8146fba6224e6c71a1be?s=32&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&amp;r=G' class='avatar avatar-32 photo' height='32' width='32' /> <cite class="fn">admin</cite> <span class="says">dice:</span>
 </div>
<div class="comment-meta commentmetadata"><a href="http://localhost/?p=694#comment-31">
 19 mayo, 2012 a las 23:56</a>&nbsp;&nbsp;<a class="comment-edit-link" href="http://localhost/wp-admin/comment.php?action=editcomment&amp;c=31" title="Editar comentario">(Editar)</a>
 </div>
<p>Hola! Este es un comentario <img src='http://localhost/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<div class="reply">
 <a class='comment-reply-link' href='/?p=694&#038;replytocom=31#respond' onclick='return addComment.moveForm("div-comment-31", "31", "respond", "694")'>Responder</a>
 </div>
 </div>
 </li>
 </ol>

Claro que podemos simplificar un poco si sabemos a lo que apuntamos y podemos ignorar algunas clases muy específicas como .bypostauthor en nuestra etiqueta <li>. La estructura básica que vamos a tomar es la siguiente:

<ol class="commentlist">
 <li>
 <div class="comment-author">
 <img alt='' src='/link/a/gravatar/' height='32' width='32' />
 <cite class="fn">admin</cite> <span class="says">dice:</span>
 </div>
 <div class="comment-meta"><a href="http://localhost/?p=694#comment-31">
 19 mayo, 2012 a las 23:56</a>&nbsp;&nbsp;<a href="link/a/editar" title="Editar comentario">(Editar)</a>
 </div>
 <p>Hola! Este es un comentario</p>
 <div class="reply">
 <a class='comment-reply-link' href='/link/para/responder'>Responder</a>
 </div>
 </li>
 </ol>

¿Qué sucedió? Simplificamos. Eliminamos clases que no necesitabamos declarar así como una etiqueta div que contenia a todo el comentario y que resultaba innecesario para un estilo básico. Ahora colocamos las clases y etiquetas correspondientes en el CSS. Al inicio de mi nueva sección coloco entre /* y */ un comentario para utilizar de referencia a futuro. Lo único que agregué que no estaba en el HTML es la clase .comment-awaiting-moderation, que aparece cuando un mensaje está pendiente de moderación, tal como lo dice su nombre.

/* Comments! */
 ol.commentlist {}
 ol.commentlist li {}
 .comment-author {}
 .comment-author img {}
 .fn {}
 .says {}
 .comment-meta {}
 .comment-awaiting-moderation {}
 .comment-meta a {}
 ol.commentlist li p {}
 .reply a {}

Es importante destacar que vamos a trabajar con comentarios anidados (o sea que puedo responder al comentario de alguien y mi comentario aparecerá debajo del mismo) y del modo en que lo estamos maquetando aparecerá un comentario dentro del otro. Así que lo mejor es utilizar anchos que no sean fijos, sino relativos (o sea que cubran determinado porcentaje del contenedor padre).

/* Comments! */
 ol.commentlist {
 list-style-type: none;
 width:600px;
 }
 ol.commentlist li {
 width:95%;
 position:relative;
 overflow:hidden;
 background: #e1e1e1;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 1px solid #ccc;
 padding:10px;
 margin: 10px 0;
 }
 .comment-author {
 width: 60%;
 float:left;
 height:40px;
 }
 .comment-author img {
 float:left;
 border: 1px solid #ccc;
 margin: 2px;
 }
 .fn {
 color: #2d435a;
 font-weight:bold;
 font-size:14px;
 }
 .says {}
 .comment-meta {
 width: 40%;
 float:left;
 height:40px;
 text-align:right;
 overflow:hidden;
 }
 .comment-awaiting-moderation {
 position:absolute;
 left:0px;
 top:10px;
 width:100%;
 margin-right:10px;
 text-align:right;
 }
 .comment-meta a {}
 ol.commentlist li p {}
 .reply a {
 padding: 5px 10px;
 background: #2d435a;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 1px solid #ccc;
 color:white;
 text-decoration:none;
 margin: 5px 0;
 }

El resultado será:

Claro que no se diferencian bien las respuestas del original. Pero como vimos antes el comentario tiene una clase de acuerdo a su nivel dentro de los comentarios anidados, basta con leer el código HTML generado por esta página:

<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2 parent" id="comment-34">

Existen, entonces, varios niveles de “profundidad” (depth) en nuestros comentarios. Eliminemos el background de ol.comments li y colocamos las siguientes clases con diferentes tonos de gris por fondo:

.depth-1 {background: #e1e1e1;}
.depth-2 {background: #f1f1f1;}
.depth-3 {background: #f9f9f9;}

Y obtendremos:

Todo esto sin necesidad de generar en ningún momento la plantilla comentarios, utilizando sólo el código por defecto que WordPress genera. Para el caso de que queramos modificar drásticamente nuestra sección de comentarios podemos generar un archivo comments.php o bien podemos hacerlo vía hooks desde el functions.php.

En este taller no vamos a ir mas allá, ya que en SummArg constantemente sacamos notas con trucos para personalizar algunas plantillas de modo original. Pero a cambio les vamos a dejar de ejemplo el código que estamos usando en nuestra plantilla para mostrar los comentarios por si les sirve de referencia.

En nuestro functions.php colocamos la siguiente función para mostrar los comentarios con código personalizado.

<?php
 function mytheme_comment($comment, $args, $depth) {
 $GLOBALS['comment'] = $comment; ?>
 <li class="comment">
 <div class="comment-top">
 <?php echo get_avatar($comment,$size='36',$default='<path_to_url>' ); ?>
 <?php printf(__('<div class="fn">%s</div>'), get_comment_author_link()) ?>
 <?php if ($comment->comment_approved == '0') : ?>
 <em><?php _e('Tu comentario espera moderaci&oacute;n.') ?></em>
 <br />
 <?php endif; ?>
 <div class="comment-meta commentmetadata">
 <br />
 <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
 <?php comment_date('j-n-y'); ?>
 </a><?php edit_comment_link(__('(Edit)'),' ','') ?></div>
 </div><!-- end of comment-top-->
 <div class="comment-text">
 <?php comment_text() ?>
 <div class="reply">
 <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
 </div>
 </div><!-- end of comment-text -->
 </li>
 <?php
 }

Y el CSS

.commentlist li.comment {
 width: 600px;
 display:block;
 margin: 5px auto;
 float:left;
 }
.infos {
 width:565px;
 float:left;
 display:block;
 border-top: 1px double #ccc;
 padding: 5px;
 margin: 5px 0;
 font:normal 12px "tahoma", "arial", Sans-serif;
 color: #999;
 }
.comment-top {
 background-color: #405e76;
 color: #fff;
 width:150px;
 float:left;
 border: 2px solid #405e76;
 padding: 5px;
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 0px;
 -moz-border-radius-bottomleft: 5px;
 -webkit-border-radius: 5px 0px 0px 5px;
 border-radius: 5px 0px 0px 5px;
 }
 .comment-top a {
 color: #fff;
 }
 .fn a, .fn{
 font-size:12px;
 font-weight:bold;
 color: #fff;
 float:right;
 text-decoration: none;
 }
 .comment-text {
 background: url(images/comments-arrow.png) no-repeat;
 background-position: left top;
 border: 2px solid #405e76;
 background-color: #f1f1f1;
 width:407px;
 float:right;
 padding: 5px 5px 5px 20px;
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 0px;
 -webkit-border-radius: 0px 5px 5px 0px;
 border-radius: 0px 5px 5px 0px;
 }

La única imagen que agregamos es comments-arrow.png, que no es mas que el triángulo que está al lado del cuadro azul con el avatar y el nombre del comentador. Se las dejamos a continuación para que la descarguen y utilicen si lo desean:

El resultado es el siguiente:

Esperamos que la clase de hoy les haya resultado esclarecedora. Como siempre, les dejamos el demo funcionando y los archivos de la clase para descargar.

Demo | Descargar themeTaller | Clase 10 (419)

Volver al temario del taller