Comment changer la taille de l'image Gravatar dans WordPress

Si vous cherchez à redimensionner les images Gravatar sur votre site WordPress, vous êtes au bon endroit. Il est arrivé que nous devions redimensionner des tailles personnalisées de Gravatar sur des sites WordPress sur lesquels nous travaillions, mais la méthode diffère selon le thème que vous utilisez.

Un Gravatar est une image utilisée pour représenter un commentateur ou un auteur d'article de blog. Les thèmes WordPress affichent les Gravatars à une taille définie, mais vous préférerez peut-être les rendre plus petits ou plus grands pour mieux correspondre au design de votre site.

Dans cet article, nous vous montrerons comment changer la taille des images Gravatar dans WordPress.

Pourquoi changer la taille des images Gravatar dans WordPress ?

Gravatar est l'acronyme de Globally Recognized Avatar. C'est un service web qui vous permet de créer un profil et d'associer des images d'avatar à votre adresse e-mail.

La plupart des thèmes WordPress affichent un Gravatar à côté du commentaire de l'utilisateur. Certains thèmes affichent également un Gravatar dans la boîte de biographie de l'auteur.

Même si un utilisateur n'a pas de compte Gravatar, votre site affichera toujours l'un des Gravatars par défaut de WordPress.

Parfois, vous voudrez peut-être changer la taille des Gravatars de votre thème. Par exemple, vous pourriez vouloir les agrandir pour qu'ils ressortent, attirant ainsi l'attention du visiteur sur la section des commentaires de votre site.

Cela dit, examinons comment vous pouvez changer la taille de votre image Gravatar personnalisée sur votre site WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder à la méthode que vous souhaitez utiliser :

• Méthode 1 : Changer la taille des Gravatars à l'aide de l'éditeur complet du site (thèmes de blocs uniquement)
• Méthode 2 : Changer la taille des Gravatars en modifiant comments.php (tous les thèmes)
• Méthode 3 : Changer la taille des Gravatars en modifiant style.css (tous les thèmes)
• Method 4: Change Gravatar Size for Author Bios With Code

Méthode 1 : Changer la taille des Gravatars à l'aide de l'éditeur complet du site (thèmes de blocs uniquement)

Si vous utilisez un thème basé sur des blocs tel que Twenty Twenty-Five, vous pouvez changer la taille par défaut des Gravatars WordPress en utilisant l'éditeur complet du site.

Cette méthode ne fonctionne pas avec tous les thèmes. Si vous n'utilisez pas un thème compatible avec les blocs, nous vous recommandons d'utiliser la méthode 2 à la place.

Dans le tableau de bord WordPress, allez dans Apparence » Éditeur.

Vous arriverez maintenant dans l'éditeur complet du site et verrez plusieurs options pour modifier différentes parties de votre site WordPress.

Pour changer la taille par défaut des avatars pour vos commentaires WordPress, cliquez sur l'icône de la barre de recherche en haut du panneau de gauche.

À ce stade, recherchez simplement la partie du modèle des Commentaires.

Cliquez dessus une fois que vous l'avez trouvée.

Sur la page suivante, vous verrez des informations sur la partie du modèle des Commentaires.

Pour modifier la partie de modèle des Commentaires, cliquez sur le bouton crayon. Vous serez ensuite dirigé vers l'interface d'édition.

Vous pouvez maintenant cliquer sur n'importe lequel des Gravatars dans l'aperçu en direct.

Dans le menu de droite, vous pouvez sélectionner l'onglet « Bloc » s'il n'est pas déjà sélectionné.

Vous pouvez maintenant agrandir ou réduire les Gravatars en faisant glisser le curseur « Taille de l'image ».

Lorsque vous déplacez le curseur, tous les Gravatars seront mis à jour automatiquement, vous pouvez donc essayer différentes tailles pour voir ce qui convient le mieux.

De plus, n'hésitez pas à activer le paramètre « Lien vers le profil utilisateur ». Lorsqu'un utilisateur clique sur le Gravatar, il sera dirigé vers la page de profil du commentateur sur votre site web.

Lorsque vous êtes satisfait de la nouvelle taille par défaut de l'image Gravatar, cliquez sur le bouton « Enregistrer ».

Maintenant, si vous visitez une section de commentaires sur votre site web WordPress, vous verrez les changements en direct.

Méthode 2 : Changer la taille des Gravatars en modifiant comments.php (tous les thèmes)

Si vous n'utilisez pas un thème WordPress WordPress par blocs, vous pouvez modifier la taille de l'image de profil Gravatar pour les commentaires WordPress en modifiant le code de votre thème.

Cette méthode nécessite de modifier les fichiers du thème, ce n'est donc pas l'option la plus conviviale pour les débutants. Cependant, cette méthode devrait fonctionner pour la plupart des thèmes WordPress.

Tout d'abord, vous devrez vous connecter à votre site WordPress à l'aide d'un client FTP tel que FileZilla, ou vous pouvez utiliser le gestionnaire de fichiers de votre panneau cPanel d'hébergement WordPress.

Si c'est la première fois que vous utilisez FTP, vous pouvez consulter notre guide complet sur comment vous connecter à votre site en utilisant FTP.

Une fois connecté, vous devez accéder à /wp-content/themes/ et ouvrir le dossier de votre thème WordPress actuel.

Une fois ici, ouvrez le fichier comments.php et recherchez une fonction wp_list_comments. À l'intérieur de cette fonction, vous trouverez avatar_size, qui définit la taille du Gravatar.

Voici un exemple de ce à quoi cela pourrait ressembler :

<?php
wp_list_comments(
    array(
        'avatar_size' => 60,
        'style'       => 'ol',
        'short_ping'  => true,
    )
);
?>

Vous pouvez simplement changer avatar_size pour la taille que vous souhaitez utiliser. Dans l'extrait de code ci-dessus, cela signifierait changer 60 en un autre nombre.

Les Gravatars sont carrés, donc WordPress utilisera la même valeur pour la largeur et la hauteur de l'image. Cela signifie que vous n'avez besoin de saisir qu'un seul nombre.

Après avoir effectué cette modification, assurez-vous de sauvegarder et de téléverser le fichier sur votre compte d'hébergement WordPress. Lorsque vous avez terminé, vous pouvez visiter votre blog WordPress pour voir le changement en action.

Si l'image Gravatar n'a pas changé, cela peut être dû au cache. Pour en savoir plus, consultez notre guide sur comment corriger le fait que WordPress ne se met pas à jour immédiatement.

Si le Gravatar ne change toujours pas, le CSS de votre thème pourrait remplacer les paramètres du fichier comments.php. Dans ce cas, vous devez essayer la méthode suivante.

Méthode 3 : Changer la taille des Gravatars en modifiant style.css (tous les thèmes)

Pour voir si le CSS de votre thème remplace votre fichier comment.php, vous pouvez utiliser l'outil Inspecter de votre navigateur. Les étapes varient selon le navigateur que vous utilisez, mais sur Chrome, vous pouvez simplement faire un clic droit ou Ctrl+clic sur le Gravatar, puis sélectionner « Inspecter ».

Cela affichera le code HTML et CSS de la page dans un nouveau panneau.

Dans ce code, vous devez vous concentrer sur le panneau inférieur et rechercher la ou les classes CSS de l'avatar de l'auteur du commentaire.

Dans notre exemple, il s'agissait de .comment-author et .avatar, et ils contenaient des propriétés CSS pour les valeurs de hauteur et de largeur du Gravatar. Nous le savons car lorsque nous survolons les extraits de code CSS, le Gravatar est mis en surbrillance dans l'aperçu.

Voici à quoi ressemble le code dans notre thème. Notez qu'il peut être différent dans le vôtre :

.comment-author .avatar {
height: 42px;
position: relative;
top: .25em;
width: 42px;
}

Si la taille du Gravatar dans le code CSS est différente de celle que vous avez spécifiée dans le fichier comments.php, cela signifie que le fichier style.css de votre thème remplace vos modifications.

Pour modifier votre fichier style.css, vous devez utiliser WPCode, un plugin d'extraits de code qui facilite l'insertion de code personnalisé dans votre thème. Avec cela, vous pouvez modifier votre fichier style.css sans y accéder directement, réduisant ainsi le risque d'erreurs.

De plus, vous devrez garder l'onglet où vous avez l'outil d'inspection ouvert. Ceci afin que vous puissiez copier et coller le code CSS pour le Gravatar de l'auteur de votre commentaire dans WPCode et le modifier plus tard.

Tout d'abord, installez WPCode sur votre site Web WordPress. Vous pouvez lire notre guide sur comment installer un plugin WordPress pour plus d'informations.

Ensuite, allez dans Extraits de code » + Ajouter un extrait et sélectionnez ‘Ajouter votre code personnalisé (Nouvel extrait).’ Cliquez sur le bouton ‘+ Ajouter un extrait personnalisé’.

Une fois terminé, tapez un nom pour votre nouveau code CSS. Il peut s'agir de quelque chose d'aussi simple que ‘Modifier la taille du Gravatar’.

Pour le Type de code, sélectionnez « Fragment CSS ».

Maintenant, copiez et collez les extraits de code CSS de votre thème d'origine pour la taille du Gravatar dans la boîte d'aperçu du code.

Une fois terminé, vous pouvez modifier les valeurs de hauteur et de largeur dans le code. Dans notre exemple, nous l'avons changé à 50px. Assurez-vous que les tailles de hauteur et de largeur sont identiques.

Une fois terminé, faites défiler vers le bas jusqu'à la section Insertion.

Assurez-vous que la méthode « Insertion automatique » est sélectionnée. Quant à l'Emplacement, choisissez simplement « Pied de page sur l'ensemble du site » afin que votre CSS personnalisé puisse remplacer le code CSS existant.

Après cela, cliquez simplement sur le bouton bascule dans le coin supérieur droit pour rendre le code « Actif » et cliquez sur « Enregistrer le extrait ». Si vous visitez votre blog ou site Web WordPress, vous verrez vos images Gravatar mises à jour.

Maintenant, nous vous recommandons d'essayer de changer la taille de Gravatar dans le fichier comments.php avant d'utiliser la méthode CSS plus simple.

Premièrement, le CSS peut parfois rendre les Gravatars flous, surtout si vous agrandissez les avatars par rapport à l'image d'origine.

Deuxièmement, changer la taille de l'image dans comments.php aide souvent votre site à se charger plus rapidement. En effet, le navigateur doit toujours télécharger l'image en taille réelle, puis utiliser le CSS pour la redimensionner pour l'affichage. Cela peut entraîner une diminution des performances du site Web.

Méthode 4 : Changer la taille de Gravatar pour les bios d'auteur avec du code

Si vous gérez un site WordPress multi-auteurs, une boîte d'auteur peut aider les lecteurs à en savoir plus sur l'auteur de l'article.

Si vous souhaitez ajouter cette fonctionnalité à votre site Web, consultez notre guide sur comment ajouter une boîte d'informations sur l'auteur dans les articles WordPress.

De nombreuses biographies d'auteurs affichent le Gravatar de l'écrivain ainsi que sa biographie. Pour modifier la taille par défaut du Gravatar dans les boîtes de biographie de vos auteurs, vous devez trouver le fichier du thème qui ajoute la biographie.

Connectez-vous simplement à votre site à l'aide d'un client FTP tel que FileZilla ou du gestionnaire de fichiers de votre hébergement WordPress. Une fois connecté, accédez à /wp-content/themes/ et ouvrez le dossier de votre thème WordPress actuel.

Après cela, vous devez ouvrir le dossier template-parts.

Vous devez maintenant trouver le fichier qui contient le code get_avatar . Vous trouverez souvent ce code dans un fichier de partie de modèle appelé author-bio.php, single.php, functions.php, ou similaire.

Voici un exemple de ce à quoi ce code pourrait ressembler :

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

Dans l'extrait ci-dessus, vous pouvez simplement changer le nombre 85 par la taille que vous souhaitez utiliser.

Dans d'autres thèmes, le code peut ressembler à ceci :

get_avatar( get_the_author_meta( 'user_email' ), 85);

Vous pouvez simplement remplacer le nombre par la valeur que vous souhaitez utiliser pour rendre le Gravatar plus grand ou plus petit.

Après avoir modifié la taille, n'oubliez pas de sauvegarder vos modifications. Vous pouvez ensuite visiter votre site Web pour voir la nouvelle boîte de biographie d'auteur en action.

Si les Gravatars n'ont pas changé, vous devrez alors rechercher la classe d'avatar dans le fichier style.css en suivant le même processus décrit dans la Méthode 3. Une fois que vous avez trouvé cette classe, vous pouvez créer un nouveau snippet WPCode et y saisir les nouvelles valeurs de hauteur et de largeur du Gravatar.

Apprenez d'autres façons d'améliorer votre section de commentaires

Vous voulez faire passer vos commentaires WordPress au niveau supérieur ? Consultez ces guides pour personnaliser votre section de commentaires :

• Comment limiter la longueur des commentaires dans WordPress (tutoriel facile)
• Comment changer le texte « Répondre » dans les commentaires WordPress
• Comment permettre à vos utilisateurs de s'abonner aux commentaires dans WordPress
• Comment paginer les commentaires dans WordPress (étape par étape)
• Comment autoriser les utilisateurs à aimer ou à ne pas aimer les commentaires dans WordPress
• Comment supprimer le champ URL du site web du formulaire de commentaire WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment changer la taille de l'image Gravatar dans WordPress. Vous pourriez également vouloir apprendre comment styliser le formulaire de commentaires WordPress ou consulter notre liste des meilleurs plugins WordPress pour les commentaires.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.