O modelo de comentários do WordPress (retorno de chamada) não é apenas uma das etapas mais complicadas ao criar um tema personalizado do WordPress, mas o código de comentários padrão também é bastante complicado de personalizar. Se você é um desenvolvedor de temas e ficou travado tentando personalizar seus comentários para deixá-los do jeito que você quer, mas não pode porque precisa adicionar classes div extras ou remover algumas, então você precisa conferir este post . Mostrarei como criar facilmente um modelo de retorno de chamada personalizado que o WordPress usará para sua estrutura de comentários, para que você possa ter controle total sobre o design do seu comentário.
Uma nota para os desenvolvedores.. Ao criar um tema WordPress para o diretório WordPress.org ou para redistribuição em qualquer outro mercado, é melhor deixar o design de comentários padrão para garantir que não haja possíveis conflitos com plugins de terceiros. Este tutorial é destinado principalmente para quem procura uma solução personalizada em seu site ativo (fazendo a modificação por meio de um tema filho) ou para quem desenvolve um design personalizado para seu cliente.
Agora para o tutorial real e se você tiver alguma dúvida ou sugestão sobre como podemos melhorar o guia, por favor me avise na seção de comentários abaixo do guia.
Passo 1: Crie better-comments.php
Faça um novo arquivo php para seu tema pai ou filho (você pode chamá-lo de qualquer coisa, mas eu gosto de chamá-lo de better-comments.php) e cole o código abaixo.
<?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.
}
Este é um modelo inicial para você trabalhar, que inclui a saída básica que você deseja para seus comentários com alguns divs extras incluídos para facilitar o estilo.
Etapa 2: inclua seu novo modelo better-comments.php
Coloque o arquivo recém-criado dentro do seu tema pai ou filho, então vá para o seu arquivo functions.php e use a função require_once para carregar seu arquivo. Veja o exemplo abaixo (certifique-se de alterar o local se você adicionou o arquivo better-comments.php a uma subpasta diferente em seu tema – eu costumo colocar minhas funções personalizadas em uma pasta functions ou inc para mantê-la separada do núcleo arquivos de modelo).
Nota : O snippet abaixo tem 2 exemplos que você vai querer usar a linha de código correta dependendo se você estiver adicionando o modelo em um tema pai ou filho.
// 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’;
Você pode adicionar o código onde quiser em seu arquivo functions.php, apenas certifique-se de adicioná-lo dentro das tags <?php e ?>.
Etapa 3: adicionar retorno de chamada de comentários melhores para wp_list_comments
Agora só precisamos dizer ao WordPress para usar nosso modelo de saída personalizado para os comentários. E há duas maneiras de fazer isso dependendo se você está trabalhando com um pai ou alterando a função de tema pai padrão (também conhecido como tema filho ou plugin).
Tema pai : Se você estiver trabalhando com um tema pai, você desejará localizar o arquivo comments.php e editar a função wp_list_comments para incluir o retorno de chamada no array de argumentos como:
<?php
// Display comments
wp_list_comments( array(
‘callback’ => ‘better_comments’
) ); ?>
Tema filho ou plugin : Se você estiver trabalhando com um tema filho ou um plugin e quiser filtrar a saída html do comentário, use o filtro wp_list_comments_args e passe seu novo argumento de retorno de chamada como:
// Filter the comment list arguments
add_filter( ‘wp_list_comments_args’, function( $args ) {
$args[ ‘callback’ ] = ‘better_comments’;
return $args;
} );
E, claro, em ambos os casos estamos referenciando o nome da função que usamos na etapa 1 (better_comments).
Etapa 4: ajustar a saída HTML personalizada
Se você fez tudo corretamente, o WordPress agora usará sua função better_comments para a saída html de comentários em seu tema. Ao contrário de usar apenas a função wp_list_comments , agora você pode editar todo o código que aparecerá com cada comentário. Agora o “céu é o limite”. Edite sua função para que os comentários do WordPress tenham a aparência que VOCÊ deseja. Abaixo estão alguns exemplos das coisas incríveis que você pode fazer:
Exibir pingbacks e comentários regulares de forma diferente
Se você observar o código, verá que ele possui uma instrução switch que é usada para exibir os pingbacks/trackbacks de maneira diferente dos comentários padrão. Embora normalmente recomendemos desabilitar os pingbacks/trackbacks se você os usar em seu site ou quiser que eles tenham uma boa aparência para o seu produto final (se você for um desenvolvedor de temas), então você pode usar este método para alterar completamente a saída dependendo do comentário tipo.
Exibir um “crachá” de usuário de comentário
Se você estiver executando um blog estilo comunidade onde seus leitores estão logados, você pode inserir um “crachá” para cada comentário que mostra o “papel” da pessoa que deixou o comentário. Assim, você pode exibir um selo para assinante, 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 }
}
Alterar tamanho do Gravatar
Outra coisa legal que você pode fazer com os comentários melhores é alterar o tamanho do avatar, com certeza, você poderia ter alterado manualmente através do array wp_list_comments ou usando o filtro wp_list_comments_args mas agora você também pode alterá-lo manualmente, isso significa que você pode até use tamanhos diferentes dependendo do comentário (talvez você queira que o avatar do autor seja maior, isso pode ser legal).
Altere o Gravatar padrão ou remova-o completamente
Você pode modificar a função get_avatar para adicionar um terceiro parâmetro para um gravatar padrão se quiser definir manualmente o URL do ícone de avatar padrão. Isso significa que você pode adicionar um avatar padrão divertido que corresponda ao seu site. Alternativamente, você pode remover o código do avatar completamente se preferir não usá-lo (isso pode ser uma boa ideia para sites com toneladas de comentários, pois gravatars podem carregar um pouco devagar e também inchar o site).
<?php echo get_avatar( $comment, $avatar_size, ‘URL TO CUSTOM DEFAULT AVATAR’ ); ?>
Bônus: destaque comentários do autor
Tecnicamente, isso não tem nada a ver com sua saída de comentário personalizado, mas vale a pena mencionar, pois muitos temas não integram isso por padrão. Na saída comment_class, se o comentário foi feito pelo autor da postagem, o comentário incluirá o nome da classe bypostauthor e isso permite que você estilize os comentários do autor da postagem de maneira diferente dos outros comentários, para que você possa destacá-los.
.bypostauthor {fundo: #ffff99;}
