Actualizado el diseño de los comentarios

This post was published 9 years ago. It may be exremely outdated.

Desde que actualicé el blog a WordPress 2.7 he estado pensando en cambiar el diseño de los comentarios.

El diseño que hice lo diseñé demasiado rápido, y no me convencía mucho, sinceramente, además lo hicé en base al código que creaba la función wp_list_comments, sin poder personalizar demasiado el estilo.

Pero esta semana he estado viendo el tema del diseño de los comentarios, hasta que he dado con un diseño diferente al anterior.

Además del cambio de diseño he eliminado la opción de comentarios anidados. ¿Por qué? Pues en realidad porque había un conflicto con TinyMCE y no me dejaba escribir cuando le daba a “Responder”, así que para poder responder había que desactivar TinyMCE, darle a “Responder” y activar de nuevo “TinyMCE. También ha influído que los únicos comentarios anidados eran míos :-O .

Cuando descubra cómo arreglar el problema, probablemente volveré a poner los comentarios anidados, mientras, los comentarios no se podrán anidar.

Creo que ahora están mejor que antes, aunque acepto sugerencias, por supuesto.

Estilos CSS para los comentarios de WordPress 2.7

This post was published 9 years ago. It may be exremely outdated.

Vía anieto2k descubro los estilos CSS básicos para diseñar los comentarios en WordPress 2.7.

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Aunque el CSS está vacío, nos puede servir de base para diseñar los comentarios y así evitar tener que crear nuestra propia función personalizada.

Nota mental: A ver cuándo me pongo a arreglar los comentarios del blog… siempre se me acaba olvidando.

Personaliza al máximo la plantilla de comentarios de WordPress 2.7

This post was published 9 years ago. It may be exremely outdated.

Ayer, en anieto2k, publicaron un tutorial para adaptar los comentarios a WordPress 2.7 y personalizar la función de mostrar los comentarios, permitiéndonos crear estructuras personalizadas y dar un toque especial a los comentarios del blog.

Nota mental: A ver cuándo arreglo los comentarios del blog… no me gusta nada el diseño que tienen ahora, me gustaba más el anterior :-S .

Personaliza la estructura de los comentarios en WordPress 2.7

This post was published 9 years ago. It may be exremely outdated.

Una de las cosas que menos me gustaban de las betas y versiones candidatas de WordPress 2.7 era la poca personalización que había en los comentarios.

Sin embargo, desde la aparición de la versión final, y vía Anieto2k he descubierto un método para crear una función nueva para mostrar los comentarios, adaptable a las necesidades de cada momento y además teniendo que modificar sólo el theme, dejando el núcleo de WordPress “tranquilo”.

Podéis leer el tutorial de Andrés aquí.

Elige tu avatar en los blogs creados con WordPress

This post was published 9 years ago. It may be exremely outdated.

A la vista de que pocos de los que comentáis en el blog tenéis avatar propio, voy a explicar brevemente cómo tener un avatar en los blogs que usan WordPress.

El método es sencillo, al escribir un comentario, WordPress nos pide nuestro email.
Busca este email en Gravatar.com y si está registrado, muestra la imagen con la que está asociado.

Si no localiza el email muestra la imagen por defecto, el “Hombre misterioso”, los “MonsterID”, el “Wavatar”, el “Identicon”, el logo de Gravatar o un fondo blanco, según la configuración de WordPress.

Así que los pasos para obtener un avatar son:

  • Registrarse en Gravatar.com.
  • Añadir nuestro email
  • Subir nuestro avatar a la web
  • Asociar el avatar con el email

Gravatar además permite tener varios emails registrados y nos permite subir varios avatares, administrándolo todo desde un único panel de control.

Espero que os sirva este truco 🙂 .

Añade una opción de responder a los comentarios con jQuery

This post was published 9 years ago. It may be exremely outdated.

Vía Anieto2k descubro un excelente tutorial para añadir una nueva funcionalidad a los comentarios en WordPress 2.6.

Media jQuery podemos hacer que los usuarios puedan responder a los comentarios.

Lee el tutorial de Anieto2k.

Cambia la estructura de los comentarios en WordPress 2.7

This post was published 9 years ago. It may be exremely outdated.

Una de las nuevas funciones de WordPress 2.7 son los comentarios anidados y varias mejoras en el sistema de comentarios en general.

Estas mejoras están bien, sin embargo a mí la nueva función wp_list_comments() no me gusta demasiado, y me explico:

Imaginad que queremos tener la fecha de los comentarios en formato DD/MM/AAAA, pues bien, yo he mirado en el panel de control de WordPress 2.7 Beta 3 y no he encontrado dicha opción.

Otra posibilidad es que queramos eliminar el “Says:” de los comentarios (si nos fijamos, después del avatar aparece una línea que dice: “Admin Says:”).

En fin, se entiendo a lo que me refiero, ¿no? A personalizar más la forma en que se muestran los comentarios.

Y bien, he estado investigando un poco y he encontrado la forma de personalizar todas estas cosas (y más) desde el código, no del tema, sinó de WordPress en sí.

Read more →

Añade un editor visual para escribir comentarios

This post was published 10 years ago. It may be exremely outdated.

A la hora de escribir un comentario en un blog podemos usar una serie de etiquetas HTML (como a, blockquote, em, strong, etc).

Muchos visitantes no tienen conocimientos de HTML (ni falta que les hace), por lo que les es imposible poder usar las etiquetas.

En este tutorial explicaré cómo implementar un editor WYSIWYG (un editor visual) que permitirá añadir enlaces, negrita, títulos, etc, sin necesidad de saber nada de HTMl y de tan fácilmente como hacer clic en un botón.

Read more →

Separa y diferencia los trackbacks de los comentarios

This post was published 10 years ago. It may be exremely outdated.

Hace unos días ya hablé sobre cómo diferenciar los comentarios de los administradores y hoy toca hablar sobre cómo distinguir los trackbacks de los comentarios.

Seguimos trabajando en el theme Classic de WordPress, que si habéis seguido los tutoriales que he ido escribiendo tendrá:

  • Múltiples sidebars (tutorial)
  • Distinción entre comentarios de administradores (tutorial)
  • Y ahora diferencia entre comentarios y trackbacks.

El objetivo de este tutorial es hacer que en los trackback aparezca el nombre del autor antes del texto del comentario, y que en el lugar donde antes aparecía el nombre del autor ahora indique que se trata de un trackback y no de un comentario “normal”.

Read more →

Diferenciar comentarios del administrador

This post was published 10 years ago. It may be exremely outdated.

En algunos blogs los comentarios que hace el administrador son de un color diferente (por ejemplo, en este blog mis comentarios aparecen con una etiqeuta que dice “Admin”).

Esto es muy sencillo de lograr en WordPress, y os voy a explicar cómo hacerlo.

Read more →