Récemment, un de nos lecteurs nous a demandé s’il était possible de changer la taille de l’image Gravatar. La réponse est oui. Dans ce tutoriel, nous allons vous montrer comment changer la taille de l’image Gravatar sur WordPress.
Gravatar est un avatar mondialement reconnu qui relie l’adresse email d’un utilisateur à une image. Les applications populaires comme WordPress et d’autres l’utilisent pour afficher la photo de l’utilisateur sur un site.
La plupart des thèmes WordPress par défaut ajoutent un Gravatar à côté de chaque commentaire d’utilisateur. Certains l’utilisent même pour la bio de l’auteur.
Jetons un coup d’œil à la façon dont vous pouvez modifier la taille de l’image Gravatar sur votre site WordPress.
Remarque: Comme la taille de l’image Gravatar est définie par votre thème, vous devez modifier les fichiers de votre thème pour le changer.
Comment modifier la taille de Gravatar pour les commentaires WordPress
La première chose que vous devez faire est d’ouvrir le fichier comments.php situé dans le dossier de votre thème.
Vous auriez besoin de vous connecter à votre site Web en utilisant un client FTP puis d’accéder au répertoire de votre thème, suivant un chemin similaire à ceci : « /wp-content/themes/votretheme/ ».
Alternativement, si votre fournisseur d’hébergement offre un gestionnaire de fichiers, vous pouvez éditer ce fichier en utilisant l’interface web dans votre cPanel.
Dans le fichier comments.php, vous devez retrouver le code suivant: « avatar_size »
Il sera à l’intérieur de la fonction « wp_list_comments » comme ceci:
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 32,
) );
?>
Il suffit de changer la taille pour des dimensions que vous souhaitez. Les Gravatars sont carrés, de sorte que la valeur définie sera le même pour la largeur et la hauteur.
Allez-y et enregistrer vos modifications. Si vous utilisez un client FTP, alors vous devrez renvoyer votre fichier sur le serveur. Maintenant, ouvrez un article qui a des commentaires pour voir si vos modifications ont pris effet.
Si ce n’est pas le cas, alors probablement le CSS de votre thème est la cause. La meilleure façon de le vérifier est d’utiliser l’outil « Inspecter l’élément ».
Il suffit de faire un clic droit sur le Gravatar de votre navigateur et cliquez sur Inspecter l’élément.
Vous devez regarder à la hauteur et la largeur de l’image Gravatar pour voir si cela correspond à l’image que vous avez définit.
Lorsque vous faites survolez votre souris dessus, il mettra également en évidence les dimensions réelles de Gravatar et les dimensions définie dans ses attributs.
Vous remarquerez que les deux sont différents. Cela signifie que le fichier style.css de votre thème est responsable de la taille de l’image par défaut. De nombreux thèmes y compris le thème par défaut Twenty Sixteen utilise du CSS pour modifier la taille des images.
Vous devez ouvrir le fichier style.css dans le dossier de votre thème et de rechercher avatar. Vous trouverez probablement une classe CSS: « .comment-author .avatar » qui contient un code comme ceci:
.comment-author .avatar {
height: 42px;
position: relative;
top: 0.25em;
width: 42px;
}
Allez-y et modifiez la largeur et la hauteur pour correspondre à la valeur définie précédemment dans le fichier comments.php.
C’est tout. Vous avez réussi à changer la taille de l’avatar « gravatar » dans vos commentaires WordPress.
Maintenant, vous vous demandez peut-être, s’il est possible de remplacer la taille de l’image en utilisant le CSS, alors pourquoi le faire dans le fichier comments.php?
Il y a deux avantages à le faire avec cette méthode :
1 – Pas d’images floues
Si vous souhaitez redimensionner le Gravatar que propose WordPress et le rendre plus grand, le faire par le CSS rendra cette image floue.
2- Temps de chargement plus rapides
Maintenant, si vous souhaitez définir une taille d’image plus petite que celle par défaut, dans un souci d’optimisation, l’utilisation du code CSS pour rendre l’image petite n’optimisera pas le chargement de l’image.
Cependant en changeant la taille des images sur « comments.php », vous pourrez rendre l’image plus petite, ce qui pourra optimiser le chargement des images.
C’est tout pour ce tutoriel, n’hésitez pas à partager ce tutoriel avec vos amis sur vos réseaux sociaux préférés.