Comment afficher Gravatar à partir du courrier électronique de l'utilisateur dans WordPress

Voulez-vous afficher un Gravatar de l’email de l’utilisateur dans WordPress ?

Gravatar est un service Web qui connecte 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 souhaiterez peut-être également les ajouter à d'autres zones de votre site Web.

Dans cet article, nous allons vous montrer comment afficher un Gravatar depuis la messagerie de l’utilisateur dans WordPress.

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

Gravatar signifie Globally Recognized Avatar 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 la photo 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 conversion, créer un sentiment de communauté et rendre vos pages plus intéressantes. Tout cela ensemble peut vous aider à obtenir plus de commentaires sur vos publications WordPress.

Selon la configuration de votre site, WordPress peut afficher les Gravatars à d'autres endroits, comme dans la biographie de l'auteur. Cependant, vous souhaiterez peut-être modifier l’endroit où les Gravatars des utilisateurs apparaissent sur votre blog ou site Web WordPress. Par exemple, vous pouvez afficher le Gravatar de l’utilisateur dans la barre d’outils ou dans le profil utilisateur de votre site Web.

Cela dit, voyons comment 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 : modifiez votre thème WordPress (meilleur pour la cohérence)

Tout d’abord, vous pouvez ajouter un Gravatar à votre thème WordPress à l’aide de 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 sur lequel 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 du débutant pour coller des extraits du Web dans WordPress.

Le moyen le plus simple d’ajouter des extraits de code à votre site Web WordPress consiste à utiliser WPCode. Il s’agit du meilleur plugin d’extrait de code pour WordPress qui vous permet d’ajouter PHP, CSS, JavaScript et bien plus encore à votre site Web.

Tout d’abord, vous devrez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, veuillez consulter notre guide sur la façon d'installer un plugin WordPress.

Lors de l'activation, accédez à Extraits de code » Ajouter un extrait dans le tableau de bord WordPress. Cliquez maintenant sur le bouton « Ajouter un nouveau ».

Cela vous mènera à la page « Ajouter un extrait », où vous verrez tous les extraits prêts à l'emploi que WPCode peut ajouter à votre site.

Ici, passez votre souris sur « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l'extrait » lorsqu'il apparaît.

Pour commencer, saisissez un titre pour l’extrait de code. Ceci est juste pour votre référence, vous pouvez donc utiliser tout ce que vous voulez.

Après cela, ouvrez la liste déroulante « Type de code » et sélectionnez « Extrait PHP ».

Vous pouvez maintenant continuer et 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 la liste déroulante « Emplacement » et choisir « Exécuter partout ».

Cela fait, faites défiler vers le haut de la page et cliquez sur le commutateur « Inactif » pour qu'il affiche « Actif » à la place.

Ensuite, cliquez simplement sur le bouton « Enregistrer l’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 fichier modèle correct. 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 fichier de modèle adapté à vos besoins, jetez un œil à notre aide-mémoire sur la hiérarchie des modèles WordPress.

Conseil de pro : Si vous gérez un blog WordPress multi-auteurs, vous souhaiterez peut-être afficher le Gravatar de l'auteur au lieu de celui du visiteur. Pour ce faire, vous devrez plutôt ajouter l’extrait de code à la section méta de l’article de blog.

Méthode 2 : Utilisation d'un shortcode WordPress personnalisé (entièrement personnalisable)

Vous pouvez également ajouter un Gravatar à n'importe quelle page, publication ou zone prête à accueillir un widget en créant un shortcode personnalisé.

C'est un bon choix si vous souhaitez contrôler exactement l'endroit où les Gravatars apparaissent sur chaque page ou si vous souhaitez afficher ces images à 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 attribué à une adresse e-mail spécifique en apportant une simple modification au code.

Ceci est utile si vous disposez de 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 codes courts personnalisés consiste à utiliser WPCode. Mieux encore, vous n’avez pas besoin de modifier vos fichiers de thème, c’est donc 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 nouvel extrait de code personnalisé en suivant le même processus décrit ci-dessus.

Cela fait, donnez un nom à l'extrait de code et choisissez « extrait 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 à accueillir un widget.

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 la liste déroulante « Emplacement » et choisir « Exécuter partout » si elle n’est pas déjà sélectionnée.

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

Vous pouvez désormais afficher le Gravatar de l'utilisateur sur n'importe quelle page, publication ou zone prête à accueillir un widget en utilisant le shortcode suivant :

[wpb_gravatar]

Pour plus d'informations sur la façon de placer le shortcode, veuillez consulter notre guide sur la façon d'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="[email "]

Si vous n'êtes pas satisfait de l'apparence du Gravatar, vous pouvez le styliser à l'aide de CSS personnalisés. Par exemple, vous pouvez ajouter l'extrait de code CSS suivant à votre feuille de style de 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 la façon d’ajouter facilement du CSS personnalisé à votre site WordPress.

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

Conseil de pro : Si vous ne voyez pas l'option Personnaliser sous Apparence, vous pouvez suivre notre guide pour savoir comment accéder au personnalisateur de thème manquant. dans WordPress.

Dans le menu de gauche, cliquez sur « CSS supplémentaire ».

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

Cela fait, cliquez simplement sur « Publier ».

Désormais, 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 la façon de modifier la taille de l'image Gravatar dans WordPress.

Comment ajouter un shortcode personnalisé à l'aide de l'éditeur de site complet

Si vous utilisez l'un des thèmes basés sur des blocs les plus récents, 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 pouvez ajouter le shortcode au modèle de blog ou à la partie du modèle d’en-tête de votre site.

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 codes courts à 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 du modèle ».

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

À titre d'exemple, nous ajouterons 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 désormais un aperçu du modèle ou de la partie du modèle.

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

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

Dans la barre de recherche, continuez et tapez « Shortcode ».

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

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

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

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

Nous espérons que cet article vous a aidé à apprendre comment afficher Gravatar à partir des e-mails des utilisateurs sur votre site WordPress. Vous voudrez peut-être également consulter notre sélection des meilleurs plugins de médias sociaux et notre guide sur la façon de créer un formulaire de contact dans WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.