Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
WordPress parece estar en todas partes en estos días, y no es de extrañar con su facilidad de uso y facilidad de personalización. En este tutorial, analizaré la estructura de comments.php del tema de WordPress predeterminado y te daré varios fragmentos de código para facilitar tu creación.
Para tu referencia, también incluí una pequeña tabla de contenido.
- El backend de PHP
- Código general
- Visualización de los comentarios
- El formulario de comentarios
- Algunos pequeños trucos
- Conclusión
1. El backend de PHP
1 |
<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?> |
2 |
<?php endif; ?> |
3 |
|
4 |
<?php if(!empty($post->post_password)) : ?> |
5 |
<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?> |
6 |
<?php endif; ?> |
7 |
<?php endif; ?> |
8 |
|
9 |
<?php if($comments) : ?> |
10 |
<?php foreach($comments as $comment) : ?> |
11 |
<?php if ($comment->comment_approved == '0') : ?> |
12 |
<?php endif; ?> |
13 |
<?php endforeach; ?> |
14 |
<?php else : ?> |
15 |
<?php endif; ?> |
16 |
|
17 |
<?php if(comments_open()) : ?> |
18 |
<?php if(get_option('comment_registration') && !$user_ID) : ?>
|
19 |
<?php else : ?> |
20 |
<?php if($user_ID) : ?> |
21 |
<?php else : ?> |
22 |
<?php endif; ?> |
23 |
<?php endif; ?> |
24 |
<?php else : ?> |
25 |
<?php endif; ?> |
26 |
Este es el código PHP sin procesar que hace que tu archivo comments.php funcione. Para un novato, esto puede parecer intimidante. Sin embargo, no te preocupes: con este tutorial, ¡todo en tu archivo de comentarios se volverá muy claro!
2. Código General
Impedir el acceso directo a comments.php
1 |
<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?> |
2 |
<?php endif; ?> |
Esta línea de código evita que los usuarios vean comments.php por accidente. Esta página está destinada a incluirse en una página de publicación, no por separado. Podrías considerar esto como una medida de seguridad. Dentro de la declaración, puedes insertar cualquier mensaje que quieras que se muestre a la persona que ve el archivo comments.php, preferiblemente una declaración die.
1 |
<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?> |
2 |
<?php die('You can not access this page directly!'); ?>
|
3 |
<?php endif; ?> |
¿Se requiere una contraseña?
1 |
<?php if(!empty($post->post_password)) : ?> |
2 |
<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?> |
3 |
<?php endif; ?> |
4 |
<?php endif; ?> |
Esta declaración (bueno, 2 en realidad, pero tiene más sentido si las ves como una) verifica si se requiere una contraseña para ver la publicación. Obviamente, si no tienes la contraseña para ver la publicación, tampoco puedes ver los comentarios.
El primer if comprueba si hay una contraseña configurada. La segunda instrucción if comprueba si hay una cookie con una contraseña y muestra el mensaje correspondiente cuando no está allí. Puedes personalizar el mensaje de error colocando lo que elijas dentro de la segunda instrucción if.
3. Visualización de los comentarios
1 |
<?php if($comments): ?> |
2 |
<?php foreach ($comments as $comment) : ?> |
3 |
<?php if ($comment->comment_approved == '0') : ?> |
4 |
<?php endif; ?> |
5 |
<?php endforeach; ?> |
6 |
<?php else : ?> |
7 |
<?php endif; ?> |
Esta primera instrucción condicional (if($comments)) comprueba si hay comentarios y, luego, los recorre con una instrucción foreach. Dentro de la instrucción foreach, notarás la siguiente instrucción condicional: if($comment->comment_approved == '0'). Esto verifica si el comentario ha sido aprobado y muestra un mensaje si aún no está aprobado.
Un ejemplo de esto sería el siguiente fragmento de código.
1 |
<?php if($comments) : ?> |
2 |
<ol> |
3 |
<?php foreach($comments as $comment) : ?> |
4 |
<li> |
5 |
<?php if($comment->comment_approved == '0') : ?> |
6 |
<p>Your comment is awaiting approval</p> |
7 |
<?php endif; ?> |
8 |
<p>Your comment</p> |
9 |
</li> |
10 |
<?php endforeach; ?> |
11 |
</ol> |
12 |
<?php else : ?> |
13 |
<p>No comments</p> |
14 |
<?php endif; ?> |
Etiquetas de plantilla de comentario básico
Para hacer de esto un código funcional, deberás utilizar las etiquetas de plantilla que proporciona WordPress.
| Etiqueta de plantilla | Descripción |
|---|---|
<?php comment_ID(); ?> | el ID de un comentario |
<?php comment_author(); ?> | el autor de un comentario |
<?php comment_author_link(); ?> | el autor de un comentario, envuelto con un enlace a su sitio web si especificó uno |
<?php comment_type(); ?> | el tipo de comentario; pingback, trackback o un comentario |
<?php comment_text(); ?> | el comentario real |
<?php comment_date(); ?> | la fecha en que se publicó |
<?php comment_time(); ?> | la hora en que se publicó |
El resultado final
1 |
<?php if($comments) : ?> |
2 |
<ol> |
3 |
<?php foreach($comments as $comment) : ?> |
4 |
<li id="comment-<?php comment_ID(); ?>"> |
5 |
<?php if ($comment->comment_approved == '0') : ?> |
6 |
<p>Your comment is awaiting approval</p> |
7 |
<?php endif; ?> |
8 |
<?php comment_text(); ?> |
9 |
<cite><?php comment_type(); ?> by <?php comment_author_link(); ?> on <?php comment_date(); ?> at <?php comment_time(); ?></cite> |
10 |
</li> |
11 |
<?php endforeach; ?> |
12 |
</ol> |
13 |
<?php else : ?> |
14 |
<p>No comments yet</p> |
15 |
<?php endif; ?> |
Insertar esto en comments.php te daría una lista ordenada con los comentarios y la información requerida o mostraría un mensaje indicando que no hay comentarios.
4. El formulario de comentarios
¿Aún me sigues? ¡Bien! Ya casi terminamos. Solo necesitamos procesar ese formulario de comentarios... Bueno, tal vez mentí sobre casi estar allí. El formulario de comentarios es en realidad una de las partes más difíciles de todo el archivo del tema comments.php.
Serás bombardeado con varias declaraciones condicionales (se requiere un inicio de sesión, iniciaste sesión, ...). Esta parte es donde la mayoría de los skinners principiantes tienen más problemas: perder los elementos del formulario podría evitar que el formulario funcione en absoluto, sin dar un error específico de PHP.
Para darte una idea de las instrucciones condicionales que están involucradas en el formulario de comentarios, primero explicaré esas declaraciones e incluiré el HTML más adelante explicando por qué debería estar donde está.
Información general sobre instrucciones condicionales
1 |
<?php if(comments_open()) : ?> |
2 |
<?php if(get_option('comment_registration') && !$user_ID) : ?>
|
3 |
<?php else : ?> |
4 |
<?php if($user_ID) : ?> |
5 |
<?php else : ?> |
6 |
<?php endif; ?> |
7 |
<?php endif; ?> |
8 |
<?php else : ?> |
9 |
<?php endif; ?> |
La primera declaración condicional que encuentras es <?php if(comments_open()) : ?> . Esto básicamente comprueba si los comentarios están abiertos. Obviamente, si los comentarios están cerrados, no puedes publicar un comentario y el formulario de comentarios no es necesario. Puedes poner el mensaje que quieres que se muestre si los comentarios están cerrados entre los últimos <?php else : ?> y<?php endif; ?>.
La segunda sentencia condicional (<?php if(get_option('comment_registration') &&!$user_ID) : ?>) comprueba si necesitas estar registrado para publicar un comentario y si iniciaste sesión. Si se cumple la instrucción condicional, el script debe mostrar un enlace a un lugar donde los usuarios puedan iniciar sesión. Si no es necesario registrarse o ya iniciaste sesión, el script continuará con la parte else y mostrará el formulario.
Nuestra declaración condicional final luego verifica si iniciaste sesión o no. Obviamente, si ya estás conectado, es inútil que vuelvas a completar tu nombre, correo electrónico y sitio web.
Insertar el formulario
Felicitaciones, revisamos todas las instrucciones condicionales en el archivo comments.php. Ahora, todo lo que queda es agregar el formulario allí.
Lo primero que puedo oírte pensar es: ¿dónde diablos va a empezar ese formulario? Bueno, solo tienes que seguir el sentido común. La segunda instrucción condicional comprueba si tienes que iniciar sesión o no, por lo que no tendrías que mostrar ningún formulario hasta después de esta instrucción. Por lo tanto, todo el formulario se encuentra dentro de esta instrucción condicional.
1 |
<?php if(comments_open()) : ?> |
2 |
<?php if(get_option('comment_registration') && !$user_ID) : ?>
|
3 |
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
|
4 |
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
|
5 |
<?php if($user_ID) : ?> |
6 |
<?php else : ?> |
7 |
<?php endif; ?> |
8 |
</form> |
9 |
<?php endif; ?> |
10 |
<?php else : ?> |
11 |
<p>The comments are closed.</p> |
12 |
<?php endif; ?> |
También incluí el enlace a la página de inicio de sesión, tal como lo encontré en el archivo comments.php predeterminado. Como dije antes, la última instrucción condicional comprueba si iniciaste sesión o no. Obviamente, los campos de entrada de nombre, correo electrónico y sitio web solo se muestran si no iniciaste sesión. ¡Lancémoslos allí!
1 |
<?php if(comments_open()) : ?> |
2 |
<?php if(get_option('comment_registration') && !$user_ID) : ?>
|
3 |
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
|
4 |
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
|
5 |
<?php if($user_ID) : ?> |
6 |
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>
|
7 |
<?php else : ?> |
8 |
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> |
9 |
<label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p> |
10 |
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> |
11 |
<label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p> |
12 |
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> |
13 |
<label for="url"><small>Website</small></label></p> |
14 |
<?php endif; ?> |
15 |
</form> |
16 |
<?php endif; ?> |
17 |
<?php else : ?> |
18 |
<p>The comments are closed.</p> |
19 |
<?php endif; ?> |
¡Bien! ¡Ya casi terminamos! Solo necesitamos agregar algunas líneas simples de código, como un área de texto y un botón de envío. Estos van después de la última instrucción condicional, ya que es irrelevante para estos elementos si estás conectado o no.
1 |
<?php if(comments_open()) : ?> |
2 |
<?php if(get_option('comment_registration') && !$user_ID) : ?>
|
3 |
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
|
4 |
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
|
5 |
<?php if($user_ID) : ?> |
6 |
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>
|
7 |
<?php else : ?> |
8 |
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> |
9 |
<label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p> |
10 |
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> |
11 |
<label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p> |
12 |
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> |
13 |
<label for="url"><small>Website</small></label></p> |
14 |
<?php endif; ?> |
15 |
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> |
16 |
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> |
17 |
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p> |
18 |
<?php do_action('comment_form', $post->ID); ?>
|
19 |
</form> |
20 |
<?php endif; ?> |
21 |
<?php else : ?> |
22 |
<p>The comments are closed.</p> |
23 |
<?php endif; ?> |
Este código debe ser bastante autoexplicativo. Un campo de área de texto para el comentario, un botón de envío, un campo de entrada oculto con la ID futura de los comentarios y un fragmento de código PHP (<?php do_action('comment_form', $post->ID); ?>) WordPress requiere que el formulario de comentarios funcione.
¡Voilá! ¡Eso es todo amigos! Ahora tienes tu archivo comments.php completamente listo. Mira este archivo para obtener todo el código PHP y HTML que se requiere. Deberías terminar con esto (simplemente reemplacé el archivo comments.php del tema predeterminado con el nuestro y le agregué algunos estilos menores).
5. Algunos pequeños trucos
Por supuesto, ahora solo tienes un archivo básico comments.php. Hay muchas cosas que podrías hacer para mejorarlo aún más. Enumeraré algunos pequeños consejos y trucos para ayudarte en tu camino.
Gravatars
A partir de WordPress 2.5, hay una etiqueta de plantilla de WordPress personalizada para incrustar gravatars. Extrae el gravatar del correo electrónico que el visitante ingresó. El código para hacer esto es muy simple.
1 |
<?php echo get_avatar($author_email, $size, $default_avatar ); ?> |
Puedes reemplazar $author_email con el ingenioso get_comment_author_email(); función, $size es la altura (y el ancho) del avatar y $default_avatar es un enlace a la imagen de avatar predeterminada (que se muestra cuando el comentarista no tiene gravatar).
Inserta este código dentro del bucle foreach que muestra los comentarios. La salida es una imagen con las clases avatar y avatar-$size (donde $size es el tamaño que especificaste). Con alguna edición de CSS menor, podrías terminar con algo como esto:
Números de comentarios
A propósito, omití los encabezados en el archivo comments.php que creamos más tarde, ya que creía que generarían un exceso de código en un proceso de aprendizaje que ya es bastante difícil. Obviamente, no los estoy olvidando.
Por lo general, las personas tienen un título que muestra algo similar a "3 comentarios hasta ahora". Esto es realmente fácil de lograr gracias a las etiquetas de plantilla que ofrece WordPress.
1 |
<?php comments_number($zero_comments, $one_comment, $more_comments); ?> |
Es bastante autoexplicativo: $zero_comments es el texto que se muestra cuando no hay comentarios, $one_comment cuando hay un comentario y $more_comments cuando hay varios comentarios. Un ejemplo de la vida real sería así:
1 |
<?php comments_number('No comments', 'One comment', '% comments'); ?>
|
Utilicé % para múltiples comentarios, ya que la función comments_number reemplaza el % con el número de comentarios (2, 3, ...)
Usado en nuestro archivo comments.php, terminarás con algo como esto:
Enlaces de los comentarios
Para mostrar un enlace a la parte de comentarios (con el número de comentarios también), simplemente usa el siguiente código.
1 |
<?php comments_popup_link($zero_comments, $one_comment, $more_comments, $css_class, $comments_closed); ?> |
Los primeros 3 parámetros de esta función son los mismos que los de la función comments_number anterior. $css_class es, obviamente, la clase css que le das a la etiqueta <a> y $comments_closed es el texto que se debe mostrar cuando se cierran los comentarios. Al aplicarle esto a un tema, esta es una forma posible de usarlo.
1 |
<?php comments_popup_link('No comments', 'One comment', '% comments', 'comments-link', 'Comments are closed'); ?>
|
Esto te daría un enlace con la clase comments-link
Edición de comentarios
A veces querrás editar inmediatamente un comentario. Afortunadamente, con la función edit_comment_link, puedes ir fácilmente a la página correcta para editarla, en lugar de tener que navegar a tu panel de administración para finalmente llegar a ese comentario. El uso es como tal:
1 |
<?php edit_comment_link($link_text, $before_link, $after_link); ?> |
Tienes que poner esto dentro del bucle de comentarios foreach. Los parámetros son bastante obvios: $link_text es el texto de anclaje para el enlace de edición, $before_link y $after_link respectivamente son el texto o código que se muestra antes o después del vínculo.
Esto realmente hace que sea fácil cambiar un comentario; simplemente puedes agregar un pequeño enlace 'Editar' a la metainformación de tu comentario (solo visible para el administrador). Así es como podría verse:
Colores alternos para comentarios
Es posible que quieras tener colores de fila alternos para tus comentarios, para hacer una separación más clara. Hacer esto es relativamente fácil. En primer lugar, agrega el siguiente código a la parte superior de la página:
1 |
function alternate_rows($i){ if($i % 2) { echo ' class="alt"'; } else { echo ''; }
|
2 |
} |
Luego agrega lo siguiente dentro del bucle foreach (nuevamente). Podrías simplemente reemplazar <li id="comment-<?php comment_ID(); ?>"> con esto:
1 |
<?php $i++; ?> |
2 |
<li<?php alternate_rows($i); ?> id="comment-<?php comment_ID(); ?>"> |
Esto le dará a todos los demás comentarios la clase alt, lo que hará posible cambiar su apariencia a través de CSS.
Decidí crear una función para ello, para tener menos desorden en tu archivo de tema real. Puedes agregar la definición de la función en tu archivo functions.php si así lo quieres, pero para mí tiene más sentido tenerlo en la parte superior de tu página.
Las filas alternas facilitan la distinción de diferentes comentarios; una vez implementado, es posible que tengas algo así:
Visualización de las etiquetas permitidas
Para mostrar el código que los visitantes pueden usar en sus comentarios, simplemente usa este pequeño fragmento de código.
1 |
Allowed tags: <?php echo allowed_tags(); ?> |
Luego, simplemente obtendrás una lista de las etiquetas que están permitidas en tus comentarios, como esta:
Enlace de comentarios RSS
Para obtener un enlace a la fuente RSS para los comentarios de una publicación determinada, simplemente inserta el siguiente código en tu archivo comments.php en el lugar donde quieras que esté.
1 |
<?php comments_rss_link($link_text); ?> |
Luego, simplemente reemplaza $link_test con el texto de anclaje para el enlace RSS.
Esto puede ser útil si quieres darle a tus visitantes la oportunidad de suscribirse a la fuente de comentarios para un artículo específico o una publicación de blog. Podrías implementarlo así:
6. Conclusión
Espero que hayas disfrutado de este *ejem* pequeño artículo sobre el diseño de tu archivo comments.php de WordPress. Puedes obtener el código completo aquí, con los trucos que mostré incluidos en él:
- gravatars,
- colores de fila alternativos,
- editar enlace,
- enlace de comentarios rss.
Obviamente, el enlace de comentarios no está incluido ya que esto tiene que usarse dentro del bucle.
¡Mucha suerte en tus aventuras de desollado de WordPress!
By
