La plantilla de comentarios de WordPress (devolución de llamada) no es solo uno de los pasos más complicados al crear un tema personalizado de WordPress, sino que el código de comentarios predeterminado también es bastante complicado de personalizar. Si es un desarrollador de temas y se ha quedado atascado al intentar personalizar sus comentarios para que se vean como desea, pero no puede porque necesita agregar clases div adicionales o tiene que eliminar algunas, entonces debe consultar esta publicación. . Le mostraré cómo crear fácilmente una plantilla de devolución de llamada personalizada que WordPress usará para la estructura de su comentario para que pueda tener un control total sobre el diseño de su comentario.
Una nota para los desarrolladores … Al crear un tema de WordPress para WordPress.org directorio o para su redistribución en cualquier otro mercado, es mejor dejar el diseño de comentario predeterminado para asegurarse de que no haya ningún conflicto posible con complementos de terceros. Este tutorial está destinado principalmente a quienes buscan una solución personalizada en su sitio activo (mediante la modificación a través de un tema secundario) o para quienes desarrollan un diseño personalizado para su cliente.
Ahora pasemos al tutorial real y si tiene alguna pregunta o sugerencia sobre cómo podemos mejorar la guía, hágamelo saber en la sección de comentarios debajo de la guía.
Paso 1: Crea better-comments.php
Cree un nuevo archivo php para su tema principal o secundario (puede llamarlo de cualquier manera, pero me gusta llamarlo better-comments.php) y pegue el código a continuación.
<?php
// My custom comments output html
function better_comments( $comment, $args, $depth ) {
// Get correct tag used for the comments
if ( 'div' === $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
} ?>
<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>">
<?php
// Switch between different comment types
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' : ?>
<div class="pingback-entry"><span class="pingback-heading"><?php esc_html_e( 'Pingback:', 'textdomain' ); ?></span> <?php comment_author_link(); ?></div>
<?php
break;
default :
if ( 'div' != $args['style'] ) { ?>
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<?php } ?>
<div class="comment-author vcard">
<?php
// Display avatar unless size is set to 0
if ( $args['avatar_size'] != 0 ) {
$avatar_size = ! empty( $args['avatar_size'] ) ? $args['avatar_size'] : 70; // set default avatar size
echo get_avatar( $comment, $avatar_size );
}
// Display author name
printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>', 'textdomain' ), get_comment_author_link() ); ?>
</div><!-- .comment-author -->
<div class="comment-details">
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"><?php
/* translators: 1: date, 2: time */
printf(
__( '%1$s at %2$s', 'textdomain' ),
get_comment_date(),
get_comment_time()
); ?>
</a><?php
edit_comment_link( __( '(Edit)', 'textdomain' ), ' ', '' ); ?>
</div><!-- .comment-meta -->
<div class="comment-text"><?php comment_text(); ?></div><!-- .comment-text -->
<?php
// Display comment moderation text
if ( $comment->comment_approved == '0' ) { ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'textdomain' ); ?></em><br/><?php
} ?>
<div class="reply"><?php
// Display comment reply link
comment_reply_link( array_merge( $args, array(
'add_below' => $add_below,
'depth' => $depth,
'max_depth' => $args['max_depth']
) ) ); ?>
</div>
</div><!-- .comment-details -->
<?php
if ( 'div' != $args['style'] ) { ?>
</div>
<?php }
// IMPORTANT: Note that we do NOT close the opening tag, WordPress does this for us
break;
endswitch; // End comment_type check.
}
Esta es una plantilla de inicio con la que puede trabajar, que incluye la salida básica que querrá para sus comentarios con algunos divs adicionales incluidos para facilitar el estilo.
Paso 2: incluye tu nueva plantilla better-comments.php
Coloque el archivo recién creado dentro de su tema principal o secundario, luego vaya a su archivo functions.php y use la función require_once para cargar su archivo. Vea el ejemplo a continuación (asegúrese de cambiar la ubicación si ha agregado el archivo better-comments.php a una subcarpeta diferente en su tema; por lo general, coloco mis funciones personalizadas en una carpeta de funciones o inc para mantenerlas separadas del núcleo archivos de plantilla).
Nota: El fragmento a continuación tiene 2 ejemplos, querrá usar la línea de código correcta dependiendo de si está agregando la plantilla a un tema principal o secundario.
// Include better comments file from a Parent theme
require_once get_parent_theme_file_path( '/functions/better-comments.php' );
// Or include via a child theme
require_once get_stylesheet_directory() . '/functions/better-comments.php';
Puede agregar el código donde quiera en su archivo functions.php, solo asegúrese de agregarlo dentro de las etiquetas .
Paso 3: agregue mejores comentarios de devolución de llamada a wp_list_comments
Ahora solo necesitamos decirle a WordPress que use nuestra plantilla de salida personalizada para los comentarios. Y hay dos formas de hacer esto dependiendo de si está trabajando con un padre o alterando la función predeterminada del tema principal (también conocido como un tema secundario o complemento).
Tema principal: Si está trabajando con un tema principal, querrá ubicar el archivo comments.php y querrá editar la función wp_list_comments para incluir la devolución de llamada en la matriz de argumentos como tal:
<?php
// Display comments
wp_list_comments( array(
'callback' => 'better_comments'
) ); ?>
Tema o complemento infantil: Si está trabajando con un tema secundario o un complemento y desea filtrar la salida html del comentario, entonces desea usar el wp_list_comments_args filtrar y pasar su nuevo argumento de devolución de llamada como tal:
// Filter the comment list arguments
add_filter( 'wp_list_comments_args', function( $args ) {
$args[ 'callback' ] = 'better_comments';
return $args;
} );
Y, por supuesto, en ambos casos estamos haciendo referencia al nombre de la función que usamos en el paso 1 (better_comments).
Paso 4: Ajustar la salida HTML personalizada
Si hizo todo correctamente, WordPress ahora usará su función better_comments para la salida de comentarios html en su tema. A diferencia de simplemente usar el wp_list_comments función ahora puede editar todo el código que aparecerá con cada comentario. Ahora el «cielo es el límite». Edite su función para que los comentarios de WordPress se vean como USTED desea. A continuación se muestran algunos ejemplos de las cosas increíbles que puede hacer:
Mostrar pingbacks y comentarios habituales de forma diferente
Si observa el código, puede ver que tiene una declaración de cambio que se usa para mostrar los pingbacks / trackbacks de manera diferente a los comentarios estándar. Si bien normalmente recomendamos deshabilitar los pingbacks / trackbacks si los usa en su sitio o si desea que se vean bien para su producto final (si es un desarrollador de temas), puede usar este método para alterar completamente la salida según el comentario escribe.
Mostrar una «insignia» de usuario de comentario
Si está ejecutando un blog de estilo comunitario donde sus lectores están conectados, puede insertar una «insignia» para cada comentario que muestre el «rol» de la persona que dejó el comentario. Por lo tanto, podría mostrar una insignia de suscriptor, colaborador, autor, administrador, etc.
global $wp_roles;
if ( $wp_roles ) {
$user_id = $comment->user_id;
if ( $user_id && $user = new WP_User( $user_id ) ) {
if ( isset( $user->roles[0] ) ) { ?>
<div class="comment-user-badge <?php echo esc_attr( $user->roles[0] ); ?>"><?php esc_html( translate_user_role( $wp_roles->roles[ $user->roles[0] ]['name'] ) ); ?></div>'
<?php }
} else { ?>
<div class="comment-user-badge guest"><?php esc_html_e( 'Guest', 'textdomain' ); ?></div>
<?php }
}
Cambiar el tamaño de Gravatar
Otra cosa interesante que puedes hacer con los mejores comentarios es cambiar el tamaño del avatar, seguro, podrías haberlo cambiado a través de la matriz wp_list_comments manualmente o usando el filtro wp_list_comments_args, pero ahora también puedes cambiarlo manualmente, esto significa que incluso podrías use diferentes tamaños según el comentario (tal vez desee que el avatar del autor sea más grande, eso podría ser genial).
Cambiar Gravatar predeterminado o eliminarlo por completo
Puede modificar la función get_avatar para agregar un tercer parámetro para un gravatar predeterminado si desea establecer manualmente la URL de su icono de avatar predeterminado. Esto significa que puede agregar un avatar predeterminado divertido que coincida con su sitio web. Alternativamente, puede eliminar el código de avatar por completo si prefiere no usarlos (esto puede ser una buena idea para sitios con toneladas de comentarios, ya que los gravatars pueden cargar un poco lento y también inflar el sitio).
<?php echo get_avatar( $comment, $avatar_size, 'URL TO CUSTOM DEFAULT AVATAR' ); ?>
Bono: Resalte los comentarios del autor
Técnicamente, esto no tiene nada que ver con la salida de comentarios personalizados, pero vale la pena mencionarlo, ya que muchos temas no lo integran de forma predeterminada. En la salida comment_class, si el comentario fue hecho por el autor de la publicación, el comentario incluirá el nombre de la clase del autor posterior y esto le permite diseñar los comentarios del autor de la publicación de manera diferente a los otros comentarios para que pueda resaltarlos.
.bypostauthor {background: #ffff99;}