Vous souhaitez modifier la taille des images Gravatar sur votre site WordPress ?

Gravatar est un service qui associe l'adresse e-mail d'un utilisateur à sa photo. Les thèmes WordPress affichent les images Gravatar à une certaine taille, mais certains propriétaires de sites Web peuvent préférer des images plus grandes ou plus petites.

Dans cet article, nous allons vous montrer comment modifier la taille des images Gravatar dans votre thème WordPress.

Comment changer la taille de l'image Gravatar dans WordPress

Qu'est-ce que Gravatar ?

Gravatar signifie Avatar mondialement reconnu. Il s'agit d'un service Web créé et géré par la société du co-fondateur de WordPress, Matt Mullenweg, appelée Automattic. Il vous permet de créer un profil et d'associer des images d'avatar à vos adresses e-mail.

La plupart des thèmes WordPress ajoutent un Gravatar à côté de chaque commentaire utilisateur. Certains affichent également un Gravatar dans la boîte de bio de l'auteur. Lorsqu'un utilisateur n'a pas de compte Gravatar, l'image Gravatar par défaut s'affiche à la place.

Gravatar de personne mystère par défaut dans WordPress

Étant donné que la taille des images Gravatar est définie par votre thème, vous devrez modifier vos fichiers de thème pour modifier ce paramètre sur votre site Web WordPress.

Si vous n'êtes pas familiarisé avec la modification du code de vos fichiers WordPress, nous vous recommandons de sauvegarder d'abord votre site Web et de consulter notre guide du débutant sur la façon de coller des extraits de code dans WordPress.

Vous aimerez peut-être également consulter notre guide du débutant sur la façon d'utiliser FTP pour accéder à vos fichiers WordPress.

Cela dit, voyons comment vous pouvez modifier la taille de l'image Gravatar sur votre site WordPress. Vous pouvez utiliser la liste ci-dessous pour accéder à la section qui vous intéresse le plus.

La première chose que vous devez faire est de vous connecter à votre site Web à l'aide d'un logiciel FTP, puis d'aller sur /wp-content/themes/. Ouvrez ensuite le dossier du thème que vous utilisez actuellement.

Alternativement, si votre hébergeur WordPress propose un gestionnaire de fichiers, vous pouvez modifier ce fichier à l'aide de l'interface Web de votre cPanel.

Une fois là-bas, vous devez ouvrir le fichier comments.php situé dans votre dossier de thèmes. Ensuite, vous devez trouver le code suivant : avatar_size

Ce sera à l'intérieur du wp_list_comments une fonction.


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

Modifiez simplement la taille selon les dimensions que vous souhaitez. Dans la capture d'écran ci-dessus, vous remplaceriez 60 par un autre nombre. Les gravatars sont carrés, donc la valeur que vous définissez sera la même pour la largeur et la hauteur.

Allez-y et enregistrez vos modifications. Si vous utilisez FTP, téléchargez les modifications sur votre serveur.

Ouvrez maintenant une publication contenant des commentaires pour voir si vos modifications sont en ligne. C'est ainsi que notre site de démonstration apparaît avant et après l'augmentation de la taille de Gravatar de 60 à 70 pixels. Nous utilisons le thème par défaut Twenty Twenty-One.

Aperçu du changement de taille de l'image Gravatar dans les commentaires

Si la taille de l'image Gravatar n'a pas changé, cela peut être dû à votre cache. Consultez d'abord notre guide sur la façon de réparer WordPress qui ne se met pas à jour immédiatement.

S'il ne change toujours pas, cela peut être dû au fait que le CSS de votre thème remplace le paramètre dans comments.php. La meilleure façon de vérifier est d'utiliser l'outil Inspecter dans votre navigateur.

Faites simplement un clic droit sur le Gravatar dans votre navigateur et cliquez sur Inspecter.

Faites un clic droit sur le Gravatar dans votre navigateur et cliquez sur Inspecter

Cela divisera l'écran de votre navigateur en deux parties. Au bas de l'écran, vous verrez le code HTML et CSS de la page.

Vous devez regarder la hauteur et la largeur de l'image Gravatar pour voir si elle reflète la valeur que vous avez définie. Lorsque le code sur lequel votre souris pointe met en évidence le Gravatar, vous devriez pouvoir voir la taille à laquelle il est affiché.

Regardez la hauteur et la largeur de l'image Gravatar

Vous remarquerez que la taille de l'image ici 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 la taille d'image par défaut.

De nombreux thèmes tels que le thème Twenty Sixteen utilisent CSS pour contrôler la taille de l'image Gravatar pour différentes tailles d'écran.

Vous devez ouvrir le fichier style.css dans le dossier de votre thème et rechercher l'avatar. Vous trouverez probablement une classe CSS comment-author .avatar qui contiennent un code comme celui-ci :


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

Allez-y et modifiez la largeur et la hauteur pour qu'elles correspondent à la valeur que vous avez définie précédemment dans le fichier comments.php.

C'est tout. Vous avez réussi à modifier la taille de l'image Gravatar dans vos commentaires WordPress.

Maintenant, vous vous demandez peut-être pourquoi nous commençons par changer avatar_size dans le fichier comments.php lorsque vous pouvez simplement remplacer la taille de l'image à l'aide de CSS. Il y a deux raisons.

Tout d'abord, pour éviter les images floues. Si vous utilisez CSS pour faire apparaître l'image plus grande qu'elle ne l'est réellement, elle paraîtra floue.

Deuxièmement, pour des temps de chargement plus rapides. Si vous utilisez CSS pour faire apparaître l'image plus petite, votre site Web doit toujours charger l'image plus grande. En modifiant la taille dans comments.php, vous réduisez l'image réelle et elle se charge plus rapidement.

Comment afficher des images Gravatar rondes

Vous avez peut-être remarqué que les images Gravatar sur WPBeginner sont rondes et souhaitez faire de même sur votre propre site. Certains thèmes, tels que Twenty Twenty-One et Astra, affichent des Gravatars ronds par défaut.

Si votre thème affiche par défaut des Gravatars carrés, vous pouvez créer le même effet en utilisant du code. Nous utiliserons la propriété border-radius de CSS3.

La première chose que vous devez faire est de modifier le fichier style.css de votre thème à l'aide d'un programme FTP. Alternativement, vous pouvez ajouter le CSS en allant à Apparence » Personnaliser » CSS supplémentaire dans votre administrateur WordPress.

Ensuite, vous souhaitez ajouter le code suivant :


.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

gravatarsizeroundadditionalcss - Sabma Digital
Ajoutez le CSS en allant dans Apparence » Personnaliser » CSS supplémentaire

Cela devrait fonctionner sur la plupart des thèmes WordPress. Voici des captures d'écran avant et après de notre site de démonstration utilisant le thème Twenty Twenty.

Aperçu de l'image ronde du gravatar

Cependant, si cela ne fonctionne pas sur votre thème, il y a probablement un plugin ou votre fonction de thème qui perturbe les classes par défaut utilisées pour Gravatar dans WordPress.

Afin de savoir quelles images Gravatar de classe CSS utilisent dans votre thème, vous devez ouvrir un article de blog contenant des commentaires. Faites défiler jusqu'à la section des commentaires et cliquez avec le bouton droit sur l'image Gravatar pour sélectionner Inspecter.

Faites un clic droit sur l'image Gravatar pour sélectionner Inspecter

Cela divisera l'écran de votre navigateur en deux parties. Au bas de l'écran, vous verrez le code HTML et CSS de la page. Vous devez survoler le code jusqu'à ce que l'image Gravatar soit mise en surbrillance, puis trouver la classe CSS de l'image.

Trouver la classe CSS de l'image Gravatar

Si la classe est autre chose que ‘avatar', utilisez-la au lieu de .avatar dans le code CSS ci-dessus.

Comment changer la taille de Gravatar pour les bios de l'auteur

Certains thèmes WordPress utilisent également Gravatar pour les boîtes bio de l'auteur. Vous devrez peut-être d'abord saisir quelque chose dans le champ Informations biographiques du profil de l'utilisateur. En savoir plus dans notre guide sur la façon d'ajouter une boîte d'informations sur l'auteur dans les publications WordPress.

Vous pouvez modifier la taille par défaut de Gravatar ici d'une manière très similaire au modèle de commentaires.

Tout d'abord, vous devez localiser le fichier de thème qui ajoute la bio. Vous devez rechercher les fichiers de modèle du thème pour le code get_avatar.

Le thème par défaut Twenty Twenty-One utilise le fichier de partie de modèle appelé author-bio.php. Dans d'autres thèmes, cela pourrait être dans le fichier single.php, le fichier functions.php ou ailleurs.

Voici le code dans le fichier author-bio.php de Twenty Twenty-One :


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

Vous n'aurez qu'à changer le nombre 85 en ce que vous voulez.

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


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

Après avoir modifié la taille, actualisez la page pour voir si la taille a été mise à jour. Si ce n'est pas le cas, vous devrez rechercher la classe d'avatar dans le fichier style.css comme nous l'avons montré pour les commentaires, et y mettre également à jour la taille.

Voici comment notre site de démonstration apparaît avant et après avoir réduit la taille de Gravatar de 85 à 60 pixels lors de l'utilisation du thème par défaut Twenty Twenty-One.

Prévisualisez le changement de taille de l'image Gravatar dans la biographie de l'auteur

Nous espérons que ce didacticiel vous a aidé à apprendre à modifier la taille de l'image Gravatar dans WordPress.

Vous pouvez également apprendre à créer une adresse e-mail professionnelle gratuite ou consulter notre liste des meilleurs services d'hébergement WordPress.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.