Cómo crear un recordatorio de comentarios personalizados en WordPress

Cómo crear un recordatorio de comentarios personalizados en WordPress

La plantilla de comentarios de WordPress (recordatorio) 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 vous êtes un développeur de thèmes et que vous êtes resté coincé en essayant de personnaliser vos commentaires pour les rendre comme vous le souhaitez, mais que vous ne pouvez pas parce que vous devez ajouter des classes div supplémentaires ou en supprimer, alors vous devez consulter este artículo . Le mostraré cómo crear fácilmente una plantilla de recordatorio personalizada que WordPress usará para la estructura de sus comentarios para que pueda tener un control total sobre el diseño de sus comentarios.

Una nota para los desarrolladores. Al crear un tema de WordPress para el WordPress.org o para su redistribución en cualquier otro mercado, es mejor dejar el diseño de comentario predeterminado para asegurarse de que no haya posibles conflictos con complementos de terceros. Este tutorial está destinado principalmente a aquellos que buscan una solución personalizada en su sitio activo (realizando el cambio a través de un tema secundario) o aquellos que desarrollan un diseño personalizado para su cliente.

Ahora pasemos al tutorial 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 en 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 cualquier resultado básico que desee 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 en su tema principal o secundario, luego navegue hasta 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 agregó el archivo better-comments.php a una subcarpeta diferente de su tema; por lo general, coloco mis funciones personalizadas en una carpeta de funciones o inc para mantenerlas separadas de los archivos del modelo del kernel ).

Notar: El fragmento a continuación contiene 2 ejemplos en los que querrá usar la línea de código correcta dependiendo de si está agregando la plantilla en 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 en cualquier lugar que desee en su archivo functions.php, solo asegúrese de agregarlo en las etiquetas .

Paso 3: agregue un mejor recordatorio de comentarios a wp_list_comments

Ahora solo tenemos que 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 cambiando la función predeterminada del tema principal (es decir, 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 de esta manera:

<?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, desea utilizar el wp_list_comments_args filtrar y pasar su nuevo argumento de devolución de llamada como este:

// 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: ajuste la salida HTML personalizada

Si ha hecho todo correctamente, WordPress ahora usará su función better_comments para la salida html de comentarios en su tema. En lugar 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”. Cambie su función para que los comentarios de WordPress se parezcan a USTED. A continuación, se muestran algunos ejemplos de grandes cosas que puede hacer:

Muestre pingbacks y comentarios regulares de manera diferente

Si observa el código, puede ver que tiene una declaración de cambio que se usa para mostrar pingbacks / trackbacks de manera diferente a los comentarios estándar. Aunque normalmente recomendamos que desactive los pingbacks / trackbacks si los usa en su sitio o desea que se vean bien para su producto final (si es un desarrollador de temas), puede usar este método. Para modificar completamente la salida de acuerdo con el tipo de comentario.

Mostrar una “insignia” de usuario de comentario

Si tiene un blog de estilo comunitario en el que sus lectores están conectados, puede insertar una “insignia” para cada comentario que indique el “rol” de la persona que dejó el comentario. Por lo tanto, puede mostrar una insignia para 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 del gravatar

Otra cosa interesante que puede hacer con los mejores comentarios es cambiar el tamaño del avatar, estamos seguros de que podría haberlo cambiado manualmente a través de la matriz wp_list_comments o usando el filtro wp_list_comments_args, pero ahora también puede cambiarlo manualmente, eso significa que incluso podría usar diferentes tamaños dependiendo del comentario (tal vez quieras que el avatar del autor sea más grande, eso puede ser genial)

Cambie el gravatar predeterminado o elimínelo 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 lentamente 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 sus comentarios personalizados, pero vale la pena mencionarlo porque muchos temas no lo tienen por defecto. En la salida comment_class, si el comentario fue realizado por el autor de la publicación, el comentario incluirá el nombre de la clase por autor posterior y esto le permite diseñar los comentarios del autor de la publicación de manera diferente a otros comentarios para que se destaquen.

.bypostauthor {background: #ffff99;}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba