avatar-wordpress

Les gravatars donnent un côté humain à votre blog WordPress en affichant l’avatar de celui ou celle qui commente vos articles. Le principe est simple : associer une adresse e-mail à un utilisateur pour afficher son image partout sur la toile. Pour autant, ces derniers sont bien souvent affichés dans une taille inférieure à 64 pixels ce qui n’est guère la tendance actuelle ou qui ne conviendra pas en fonction de votre besoin. Une petite modification dans le code va nous permettra de la modifier.

Pour afficher la liste des commentaires sous WordPress, nous utilisons la fonction wp_list_comments qui accepte le paramètre avatar_size.

L’astuce consiste à modifier cette valeur en pixels par celle de votre choix. Voici un exemple du code que j’utilise sur ce site :

wp_list_comments( array(
'type'              => 'comment',
'style'             => 'ol',
'format'            => 'html5',
'avatar_size'       => 64,
'reverse_top_level' => false,
'reply_text'        => __('Reply', 'wpc')
));

Ce bout de code est généralement présent dans le fichier comments.php de votre thème. Il peut néanmoins être présent dans un fichier functions.php. Dans tous les cas, cette fonction est obligatoire.

Petite astuce supplémentaire : si vous faites du HTML5, notez le paramètre format avec la valeur HTML5. Il s’agit d’une nouveauté introduite depuis WordPress 3.6.

Amusez-vous à faire varier la taille de vos gravatars pour humaniser votre zone de commentaires ! Pour aller plus loin, je vous recommande la lecture du tutoriel consacré au changement du gravatar par défaut.

Crédits photo : juehuayin

8 commentaires

  1. Bonjour, je trouve très sympathique le fait que les gravatar soient ici rond et non carré. Est-ce aussi dans ce morceau de code qu’il faut travailler ? Je tente de faire sans plugin au maximum
    Merci d’avance, bonne soirée!

  2. Bonjour Aurélien,

    En faisant des recherches je suis tombée sur ton blog. Malheureusement en copiant collant ton code dans mon fichier comments.php, cela n’a pas fonctionné. Dans mon fichier de base j’ai ceci:

    Pour le border-radius, j’ai modifié les valeurs dans mon style.css dans la partie commentaires, mais ça ne se modifie pas.

    Ai-je oublié quelquechose ?
    Merci de ton aide.

      1. Merci Aurélien pour ton retour.
        A ma grande surprise, la modification a bien fonctionné j’ai utilisé cette ligne de code:
        wp_list_comments(‘avatar_size=80&type=comment’); Je ne sais pas si on voit la ligne ?

        Pour mettre l’avatar dans un cercle je cherche toujours en changeant la valeur du radius mais, je ne suis pas encore tombée sur la bonne ligne peut-être ?

        comment-author {
        padding: 5px;
        display: block;
        background: #F2F2F2;
        border: 1px solid #DFDFDF;
        -moz-border-radius: 4px;
        -khtml-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;

        Une suggestion ?

  3. J’ai trouvé.
    J’ai ajouté un border radius: a commentlist avatar et non pas comment author
    .commentlist .avatar {
    border: 3px solid #ffffff;
    margin-right: 10px;
    width: 64px!important; /* You can change this value */
    height: 64px!important; /* You can change this value */
    vertical-align: middle;
    margin-bottom: 2px;
    border-radius: 100px;
    }

    Modifier la valeur X px à votre guise.

    Merci Aurélien pour ton article qui m’a aidé