SummArg | Cursos y recursos para webmasters

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 (701)

Volver al temario del taller

Dejar un comentario

  1. Felicidades por el tutorial, el mejor que me he encontrado de WordPress.

    Una duda, estoy intentando utilizar la funcion para personalizar los comentarios (mytheme_comments) y no se como hacerlo

  2. Nekko

    Hola joel! Indicanos un poco mas tu problema. La función en cuestión se coloca en el functions.php y la podés modificar para que coincida con el HTML que necesitás generar.

  3. Buenas,
    basicamente lo que he hecho es poner la funcion mytheme_comment en el fichero functions.php siguiendo lo que dice el tutorial pero parece que la funcion no se ejecuta.

    Saludos

  4. esto está genial! cuándo siguen los demás capítulos??

  5. Nekko

    Gracias! Ni bien tenga un poco de tranquilidad en mi trabajo, quiero seguir con el taller.

  6. Las penultima linea del código para los comentarios, que tenemos que poner en functions.php, ¿es correcta?

    <?php <—-
    }

  7. Nekko

    Si, en el caso de la función de comentarios de SummArg la última línea de la sección de comentarios es así y no cierra ?> porque el archivo sigue con otras funciones. Si vos lo colocás al final vas a necesitar colocar su respectivo cierre y que quede: < ?php } ?>

  8. Paul Goethe

    Ei Nekko! Muchas gracias por el tutorial, esta muy bien! Me estoy enterando de todo, cosa que a veces es difícil con muchos de los tutoriales referidos a programación…

    Acabo de descargar el CMS de WP y todavía no lo habia provado nunca, gracias a ti esto aprendiendo un montón!
    He seguido todas las clases que has colgado y estoy (y supongo que los demás seguidores también) ansioso por que lleguen más!

    Felicidades por este pedazo de taller!!!
    Pau

  9. Nekko

    Muchas gracias! Pido un poquito de paciencia para sacar cada clase debido a que mi trabajo no siempre me deja el tiempo libre necesario, pero apunto a terminar las entregas cuanto antes y pasar a concretar otros talleres que me fueron pidiendo.

  10. Tras estudiar este capitulo y buscar hacerlo más sencillo, he encontrado que a partir de WordPress 3.0 ya tiene la función de los comentarios hecha. Es totalmente configurable y con muy poco código.

    No pretendo corregir tu articulo que es estupendo. Esta es la fuente:
    http://www.1stwebdesigner.com/wordpress/comment-form-customization/

  11. Paul Goethe

    Eres dios tio!
    Que guapo cuando las cosas te salen como quieres, brutal!

    Gracias Nekko!!!!!

  12. Esther

    Tiene que ser de cajón porque nadie lo ha preguntado, pero yo me pierdo en la parte donde hablas del html que se genera al insertar

    y si, lo veo en el navegador, pero luego hablas de tocarlo y no se donde hacerlo. Dices: “Todo esto sin necesidad de generar en ningún momento la plantilla comentarios, utilizando sólo el código por defecto que WordPress genera.” ¿dónde?

    Muchas gracias por tu trabajo,

  13. Nekko

    Cuando insertás la siguiente función:

    <?php comments_template(); ?>

    WordPress genera automáticamente el formulario de comentarios, y el listado de los mismos. Nosotros, en el tutorial, añadiremos al CSS lo necesario para darle estilo. Si quisieramos modificar la salida HTML de la función, deberíamos crear el archivo comments.php o hacerlo vía functions.php. Pero como dije, vamos a mantenerlo simple y a darle estilo a la salida por defecto que nos otorga la función. Mas o menos se entiende?

  14. Esther

    ok, entonces solo se añaden los estilos, nada de html si no generamos el commets.php
    muchas gracias por tu respuesta, creo que lo he entendido

  15. Juanma

    Muchas gracias por la información!

  16. Hola Nekko, tengo un problema muy gordo :S jeje, verás puedo hacer todo lo que me enseñas a la perfeccion, o eso creo, el caso es que los comentarios puedo ponerlos siempre que este logueado, si intento ponerlo deslogeado para que me salte el avisador de “mensaje debe ser moderado” me da una pagina extraña de error, “Error 1: Click back and type in the password. ” Seguramente es una chorrada pero no se corregirlo, ¿que hago?

  17. Nekko

    En los foros de soporte de wordpress.org, hablan de problemas con algunos plugins que pueden generar ese error en particular. Probaste desactivandolos todos? Si lo tenés en tu sitio, desinstalá “Spam Free WordPress”. Saludos!

  18. Gracias Nekko, eso era, el spam free, Saludos!!!!!

  19. Bien esta genial el Tutorial, y con la demo de como va quedando y los archivos del Trabajo . FENOMENAL seguire siguiendo los demas capitulos.

    En lo personal al llamar esta funcion que trae los comentarios por defecto , Deberian tener el archivo comments.php con las funciones que trae por defecto WORDPRESS para asi poder manipularlos por completo. Y colocar nuestras propias CLASES e ID.

    Pero entiendo que al realizarlo lo mas simple posible siempre es mejor
    Thank You

  20. Hola! Muchas gracias por las clases, son geniales y de gran ayuda!

    Con vuestro permiso, voy a tomarme la libertad de exponer mi problema por si alguien pudiera contestarme.

    Tengo un pequeño problema con la segunda parte de la clase, concretamente a partir de los niveles de profundidad depth. No consigo aplicar el estilo CSS final para ver los comentarios de esta manera.

    Mis pasos fueron: copiar la función ‘mytheme_comment’ al comienzo del archivo functions, y el estilo CSS al final de style. Pienso que no se ejecuta correctamente mi función porque no varía la apariencia. ¿Es necesario alguna modificación más? Gracias

  21. Hola! estoy aprendiendo mucho de estos cursos, principalmente este de themes para wordpress. el problema que se me presenta es que nunca me carga las imagenes del slider. queda en blanco, con el “loading” girando y no pasa nada mas. el resto me funciona perfecto, pero esto me esta fallando. probe, incluso, usar sus mismas descargas, pero nada. aun no me funciona. podré hacer algo? como se soluciona? y si quiero poner imagenes fijas, en lugar de los post?
    Gracias de antemano.
    Darío Alberto Fernandez

  22. malder

    Hola!

    como dices hago la llamada a en single.php

    pero no aparece nada. ¿esta parte del tutorial esta acabado?

    No habría que crear un fichero comments.php y rellenarlo con el código standar? si fuera asi que código debe contener el comments.php?

    Gracias

  23. […] Clase 10: La plantilla de entrada y de comentarios […]

  24. […] Clase 10: La plantilla de entrada y de comentarios […]

  25. alberto luna

    Excelente articulo, muchas gracias por compartirlo

  26. Excelente sitio, muy bien y entendible todo, excelente

  27. Excelente tutorial. Muy claro y bien explicado

Dejar un comentario