Advertisement
  1. Code
  2. WordPress

Truco rápido: Aplicar estilo a los comentarios del autor en WordPress

Scroll to top
Read Time: 2 min

() translation by (you can also view the original English article)

Una característica empleada con frecuencia en los blogs de WordPress es la habilidad de aplicar un estilo a los comentarios del autor distinto a los del resto de usuarios para destacarlos. Aquí, editaremos los comentarios nativos de WordPress para añadir algunos sutiles estilos a los comentarios del autor de cada entrada.




Paso 1 - Comando If

Abre el archivo comments.php ubicado en el directorio raíz de tu tema (aunque esta ubicación puede cambiar de un tema a otro): \wp-content\themes\tu-tema Justo bajo la siguiente línea:

1
<?php foreach ($comments as $comment) : ?>

Encontramos lo siguiente:

1
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

Edítalo para que diga lo que sigue:

1
<li class="<?php echo $oddcomment; ?> 

2
<?php if ($comment->comment_author_email == get_the_author_email()) { echo 'author_comment'; } ?>" 
3
id="comment-<?php comment_ID() ?>">

En la segunda línea hemos incluido una declaración 'if', que dice (en inglés): "If the email address of the comment author matches that of the post's author (meaning it's the same person) - then insert the text 'author'_comment'" (Si la dirección de email del autor del comentario coincide con la del autor de la entrada (es decir, se trata de la misma persona) - inserta el texto 'author_comment'".

Advierte también que hemos abierto una clase en la primera línea. Esto es así porque por defecto, el tema hace esto automáticamente para su variable '$oddcomment'. Debemos corregir esto.

Paso 2 - Solucionar $oddcomment

Si dejamos nuestro código tal cual, en cualquier comentario 'odd', las clases entrarían en conflicto. Para solucionarlo, busca lo siguiente en la parte superior del archivo, (normalmente se sitúa en la línea 17):

1
$oddcomment = 'class="alt" ';

Edítala para que sea semejante a esto:

1
$oddcomment = 'alt';

Después, desplázate hacia abajo (sobre la línea 48), y busca esto:

1
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Sustitúyelo por lo siguiente:

1
$oddcomment = ( empty( $oddcomment ) ) ? 'alt' : '';

En las dos últimas ediciones, simplemente hemos eliminado el texto clase=" " para evitar los conflictos con los comentarios impares.

Paso 3 - ¡Aplícale estilo!

Abre el archivo style.css ubicado en el directorio del tema. Al final del mismo, añade las siguientes líneas:

1
ol.commentlist .author_comment {
2
border-bottom: 1px solid #0066CC;
3
border-top: 1px solid #0066CC;
4
}

Esto cambiará los colores del borde de los comentarios del autor (fíjate que estamos editando la clase author_comment) para cambiarlos a un azul claro. Puedes cambiar el estilo como más te guste, aquí sólo estamos buscando un cambio sutil.

¡Eso es!

PreviewPreviewPreview
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.