Comment afficher le Gravatar à partir de l'e-mail de l'utilisateur dans WordPress

Gravatar est un service web qui associe l'adresse e-mail d'un utilisateur à un avatar en ligne.

WordPress affiche automatiquement les Gravatars des visiteurs dans la section des commentaires, mais vous pourriez vouloir les ajouter à d'autres zones de votre site web. Cela peut aider à créer une expérience utilisateur plus attrayante et à stimuler l'engagement.

Dans cet article, nous vous montrerons comment afficher facilement un Gravatar à partir de l'e-mail de l'utilisateur dans WordPress en explorant diverses méthodes pour vous offrir des options flexibles.

Qu'est-ce que Gravatar et pourquoi l'afficher ?

Gravatar est l'acronyme de Globally Recognized Avatar (Avatar mondialement reconnu) et permet aux gens de lier une image à leur adresse e-mail.

Si un site web prend en charge Gravatar, il peut récupérer l'image de la personne et l'afficher à côté de son nom. Par exemple, lorsqu'un utilisateur laisse un commentaire avec son e-mail sur un site WordPress, WordPress affichera le Gravatar de cette personne à côté de son commentaire.

Les Gravatars peuvent encourager les utilisateurs à participer à la conversation, à créer un sentiment de communauté et à rendre vos pages plus intéressantes. Tout cela peut vous aider à obtenir plus de commentaires sur vos articles WordPress.

Selon la configuration de votre site, WordPress peut afficher des Gravatars dans d'autres emplacements, tels que la biographie de l'auteur. Cependant, vous voudrez peut-être changer l'endroit où les Gravatars des utilisateurs apparaissent sur votre blog ou site Web WordPress. Par exemple, vous pourriez afficher le Gravatar de l'utilisateur dans la barre d'outils de votre site Web ou dans le profil de l'utilisateur.

Cela dit, examinons comment vous pouvez afficher le Gravatar à partir d'un e-mail d'utilisateur dans WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder à la méthode que vous préférez :

• Méthode 1 : Modifier votre thème WordPress (Idéal pour la cohérence)
• Méthode 2 : Utiliser un shortcode WordPress personnalisé (Entièrement personnalisable)
• Bonus : Charger les Gravatars en différé dans les commentaires WordPress

Méthode 1 : Modifier votre thème WordPress (Idéal pour la cohérence)

Tout d'abord, vous pouvez ajouter un Gravatar à votre thème WordPress en utilisant du code. C'est un bon choix si vous souhaitez afficher un Gravatar au même endroit sur l'ensemble de votre site, comme dans la barre latérale ou au-dessus de l'en-tête. Cependant, vous devrez modifier vos fichiers de modèle, ce n'est donc pas la méthode la plus conviviale pour les débutants.

Cette méthode affiche le Gravatar de la personne actuellement connectée à votre site Web. Ceci est utile pour les sites d'adhésion, les boutiques en ligne ou tout autre site Web où l'utilisateur doit se connecter à un compte.

Pour ajouter un Gravatar à votre thème, vous devrez coller du code dans vos fichiers de thème. Si vous ne l'avez jamais fait auparavant, consultez notre guide pour débutants sur comment coller des extraits du Web dans WordPress.

La façon la plus simple d'ajouter des extraits de code à votre site WordPress est d'utiliser WPCode. C'est le meilleur plugin d'extraits de code pour WordPress qui vous permet d'ajouter du PHP, du CSS, du JavaScript et plus encore à votre site.

Tout d'abord, vous devrez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Après l'activation, visitez la page Extraits de code » + Ajouter un extrait » dans le tableau de bord WordPress. Ici, vous verrez tous les extraits prêts à l'emploi que WPCode peut ajouter à votre site.

Survolez simplement votre souris sur « Ajouter votre code personnalisé (Nouvel extrait) » et cliquez sur le bouton « Utiliser l'extrait » lorsqu'il apparaît.

Pour commencer, tapez un titre pour le snippet de code. Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Après cela, ouvrez le menu déroulant ‘Type de code’ et sélectionnez ‘Extrait PHP.’

Vous pouvez maintenant coller ce qui suit dans l'éditeur de code :

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
	echo $getuseremail;
	
} 

Ce code crée une fonction simple qui vous permet d'ajouter un Gravatar n'importe où dans vos fichiers de modèle WordPress.

Après avoir collé le code, faites défiler jusqu'à la section « Insertion » et sélectionnez « Insertion automatique ». Vous devrez également ouvrir le menu déroulant « Emplacement » et choisir « Exécuter partout ».

Une fois cela fait, faites défiler jusqu'en haut de la page et cliquez sur le commutateur « Inactif » pour qu'il affiche « Actif » à la place.

Ensuite, cliquez simplement sur le bouton « Enregistrer le extrait ».

Désormais, vous pouvez afficher le Gravatar de l'utilisateur n'importe où sur votre site Web WordPress en utilisant la fonction suivante :

<?php wpbeginner_display_gravatar(); ?>

Ajoutez simplement cette fonction au bon fichier de modèle. Par exemple, si vous souhaitez afficher le Gravatar de l'utilisateur dans l'en-tête de votre site Web, vous modifierez généralement le fichier header.php.

Cependant, cela peut varier en fonction de votre thème WordPress. Pour vous aider à trouver le bon fichier de modèle pour vos besoins, consultez notre aide-mémoire sur la hiérarchie des modèles WordPress.

Méthode 2 : Utiliser un shortcode WordPress personnalisé (Entièrement personnalisable)

Vous pouvez également ajouter un Gravatar à n'importe quelle page, article ou zone prête pour les widgets en créant un shortcode personnalisé.

C'est un bon choix si vous souhaitez contrôler exactement où les Gravatars apparaissent sur chaque page ou si vous souhaitez afficher ces images dans différents endroits de votre site Web.

Tout comme la méthode 1, cette approche affichera le Gravatar de l'utilisateur actuel. Si vous préférez, vous pouvez afficher le Gravatar associé à une adresse e-mail spécifique en apportant une simple modification au code.

Ceci est utile si vous avez l'adresse e-mail d'une personne et que vous souhaitez afficher son Gravatar sur votre site, mais qu'elle n'est pas un utilisateur enregistré.

Le moyen le plus simple de créer des shortcodes personnalisés est d'utiliser WPCode. Mieux encore, vous n'avez pas à modifier les fichiers de votre thème, ce qui en fait une méthode beaucoup plus conviviale pour les débutants.

Si ce n'est pas déjà fait, vous devrez installer WPCode. Vous devrez également créer un nouveau snippet de code personnalisé en suivant le même processus décrit ci-dessus.

Une fois cela fait, donnez un nom au snippet de code et choisissez « Snippet PHP » comme type de code.

Ensuite, collez le PHP suivant dans l'éditeur de code :

function wpb_display_gravatar($atts) { 
extract(shortcode_atts(array('wpb_user_email' => '',), $atts ));

if ($wpb_user_email == '') { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
} else {
	$getuseremail = $wpb_user_email; 

    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
  
    echo '<img src="' . $usergravatar . '">'; 
}
}
add_shortcode('wpb_gravatar', 'wpb_display_gravatar');

Ce code crée un shortcode [wpb_gravatar] que vous pouvez ajouter à n'importe quelle page, publication ou zone prête pour les widgets.

Lorsque vous êtes prêt, faites défiler jusqu'à la section « Insertion » et assurez-vous que « Insertion automatique » est sélectionné. Vous devrez également ouvrir le menu déroulant « Emplacement » et choisir « Exécuter partout » s'il n'est pas déjà sélectionné.

Enfin, faites défiler jusqu'en haut de l'écran et cliquez sur le bouton « Inactif » pour qu'il affiche « Actif » à la place. Vous pouvez ensuite cliquer sur « Enregistrer le snippet » pour rendre votre code actif.

Vous pouvez maintenant afficher le Gravatar de l'utilisateur sur n'importe quelle page, publication ou zone prête pour les widgets en utilisant le shortcode suivant :

[wpb_gravatar]

Pour plus d'informations sur la façon de placer le shortcode, veuillez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Si vous souhaitez afficher le Gravatar d'un utilisateur spécifique, vous pouvez simplement ajouter son adresse e-mail au shortcode :

[wpb_gravatar wpb_user_email="john.smith@example.com"]

Si vous n'êtes pas satisfait de l'apparence de Gravatar, vous pouvez le styliser à l'aide de CSS personnalisé. Par exemple, vous pouvez ajouter l'extrait de code CSS suivant à la feuille de style de votre thème WordPress :

.wpb_gravatar {
padding: 3px;
margin: 3px;
background:#FFFFFF;
border:3px solid #eee;
}

Pour plus de détails sur l'ajout de CSS à WordPress, consultez notre guide sur comment ajouter facilement du CSS personnalisé à votre site WordPress.

Si vous préférez, vous pouvez ajouter du CSS personnalisé à l'aide du personnalisateur WordPress. Dans le tableau de bord, allez simplement dans Apparence » Personnaliser.

Dans le menu de gauche, cliquez sur « CSS additionnel ».

Vous pouvez ensuite coller le CSS personnalisé dans le petit éditeur de code.

Une fois cela fait, cliquez simplement sur « Publier ».

Maintenant, si vous visitez votre site web, vous verrez votre Gravatar avec le nouveau style.

Pour encore plus de conseils sur la personnalisation des Gravatars sur votre site, consultez notre guide sur comment changer la taille de l'image Gravatar dans WordPress.

Comment ajouter un shortcode personnalisé en utilisant l'éditeur de site complet

Si vous utilisez l'un des thèmes les plus récents basés sur des blocs, vous pouvez ajouter le shortcode à n'importe quel modèle ou partie de modèle. Cela vous permet d'afficher le Gravatar de l'utilisateur sur l'ensemble de votre site web sans avoir à modifier les fichiers de modèle.

Par exemple, vous pourriez ajouter le shortcode au modèle de blog de votre site ou à la partie de modèle d'en-tête.

Pour commencer, rendez-vous sur Apparence » Éditeur dans le tableau de bord WordPress.

Par défaut, l'éditeur de site complet affiche le modèle d'accueil de votre thème, mais vous pouvez ajouter des shortcodes à n'importe quel modèle ou partie de modèle, comme l'en-tête ou le pied de page.

Pour voir toutes les options disponibles, sélectionnez simplement « Modèles » ou « Parties de modèle ».

Vous pouvez maintenant cliquer sur le modèle ou la partie de modèle que vous souhaitez modifier.

À titre d'exemple, nous allons ajouter le shortcode au modèle de page 404, mais les étapes seront exactement les mêmes, quel que soit le modèle que vous sélectionnez.

WordPress affichera maintenant un aperçu du modèle ou de la partie de modèle.

Pour ajouter le shortcode, cliquez sur la petite icône en forme de crayon.

Une fois cela fait, cliquez sur l’icône bleue « + » dans le coin supérieur gauche.

Dans la barre de recherche, tapez « Shortcode ».

Lorsque le bon bloc apparaît, faites-le glisser et déposez-le sur le modèle de thème.

Vous pouvez maintenant coller ou taper le shortcode [wpb_gravatar] dans ce bloc.

Après cela, cliquez sur le bouton « Enregistrer ».

Maintenant, visitez simplement votre blog WordPress pour voir le Gravatar en action.

Bonus : Charger les Gravatars en différé dans les commentaires WordPress

Une fois que vous avez ajouté des Gravatars à plusieurs endroits sur votre site Web, il est conseillé de charger ces Gravatars en différé dans les commentaires WordPress.

C'est parce que la plupart des Gravatars sont affichés dans la section des commentaires et peuvent ralentir la vitesse de votre site, en particulier sur les articles comportant de nombreux commentaires.

Pour charger les Gravatars en différé, installez et activez simplement le plugin a3 Lazy Load. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Après activation, rendez-vous sur la page Paramètres » a3 Lazy Load depuis le tableau de bord WordPress et développez l'onglet « Lazy Load Images ».

Ensuite, basculez simplement le commutateur à côté de l'option « Gravatars » sur « Activé ». Après cela, cliquez sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Désormais, tous les Gravatars dans les biographies de vos auteurs et les commentaires seront chargés en différé pour améliorer les performances du site. Pour plus d'instructions, consultez notre tutoriel sur comment charger les Gravatars en différé dans les commentaires WordPress.

Nous espérons que cet article vous a aidé à apprendre comment afficher les Gravatars à partir des e-mails des utilisateurs sur votre site WordPress. Vous voudrez peut-être aussi consulter notre tutoriel sur comment notifier les utilisateurs lorsque leur commentaire est approuvé dans WordPress et notre guide sur comment ajouter des quick tags dans les formulaires de commentaires WordPress.

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.