L’image Gravatar est le graphique qui s’affiche dans la bio d’un auteur ou qui est utilisé dans la section des commentaires de WordPress. Il s’agit d’un système par défaut qui est ajouté et qui relie l’image d’une personne à d’autres sites dans le monde.
C’est comme si vous n’aviez qu’un seul login pour afficher votre image bio, que vous laissiez un commentaire ou que vous soyez ajouté en tant que contributeur à un blog. Si vous ajoutez un nouvel utilisateur à WordPress et que vous utilisez son adresse e-mail associée à Gravatar, l’image s’affichera automatiquement.
Bien que cette image soit stationnaire en termes de taille, elle peut être modifiée pour s’adapter à pratiquement n’importe quel schéma de conception. Il suffit d’un peu de codage.
Dans ce tutoriel, je vais vous montrer comment faire des ajustements mineurs à l’image Gravatar pour la boîte de bio de l’auteur et la section des commentaires. Ne vous inquiétez pas, le codage n’est pas trop complexe. En fait, c’est aussi simple que de changer un nombre.
Que fait l’image Gravatar et pourquoi est-elle utilisée ?
Un Gravatar est essentiellement une méthode mondiale pour être reconnu. Votre image, ou « avatar », est enregistrée puis diffusée chaque fois que vous interagissez avec un site supportant cette fonction. Par défaut, WordPress utilise Gravatar pour accéder aux images des utilisateurs.
Cela signifie que votre image avatar sera reconnue sur tous les sites Web que vous commentez ou pour lesquels vous écrivez et qui utilisent WordPress.
Certaines personnes utilisent l’image pour commercialiser une marque ou se vendre elles-mêmes. Comme le même graphique est utilisé pour écrire ou commenter, il devient un symbole reconnu par les autres utilisateurs.
Puisque Gravatar permet aux utilisateurs d’enregistrer des sites web dans leur profil, il offre un potentiel de marketing. Si un autre utilisateur est curieux de connaître l’auteur ou le commentateur, il peut voir le site Web ajouté.
Lorsque quelqu’un s’inscrit sur WordPress.com ou sur Gravatar.com, son adresse électronique est ajoutée au système. Chaque fois que cette adresse est utilisée pour créer un profil sur WordPress en tant qu’auteur, l’image gravatar est immédiatement accessible.
Le processus d’accès à l’image est similaire lorsque les utilisateurs de WordPress laissent un commentaire.
Modifier la taille de l’image dans la section des commentaires
Pour accéder au fichier permettant de modifier la taille de l’image des commentaires, vous devez disposer d’un bon programme FTP. Je vous suggère de télécharger FileZilla. Il s’agit d’un système gratuit, facile à utiliser et disponible pour les ordinateurs Windows, Mac et Linux.
Pour modifier l’image Gravatar dans les commentaires :
Ouvrez votre programme FTP et accédez au dossier racine du site web.
Accédez au répertoire du thème que vous utilisez dans WordPress. Il se trouve dans : /wp-content/themes/
NOTE : Si vous n’êtes pas sûr du thème que vous utilisez, ouvrez la zone « Apparence » dans le panneau d’administration de WordPress. Le premier écran vous indiquera le thème actif.
Recherchez le fichier comments.php.
Créez une copie du fichier et sauvegardez-la dans un endroit sûr. Je vous suggère de le placer sur votre bureau afin qu’il soit facile à trouver si vous en avez besoin. C’est toujours une bonne idée de créer une copie de sauvegarde de tout fichier que vous prévoyez de modifier.
Modifiez le fichier. Si vous utilisez FileZilla, vous pouvez le faire en cliquant avec le bouton droit de la souris sur le fichier et en sélectionnant « Editer ».
REMARQUE : Si votre logiciel FTP vous demande de choisir un programme, sélectionnez votre éditeur de texte. Par exemple, les utilisateurs d’ordinateurs Windows peuvent utiliser Notepad.
Dans le code du fichier, vous trouverez : avatar_size. A droite de ce mot, il y a un nombre. Il s’agit de la dimension de l’image Gravatar utilisée par WordPress. Remplacez ce nombre par celui que vous souhaitez. Par exemple, vous pouvez le remplacer par « 45 » si vous voulez que l’image ait une taille de 45 par 45 pixels. Le code ressemblera alors à ceci :[ht_message mstyle=« info » title=« » « show_icon= »« id= »« class= »« style= » » ]“short_ping” = true,’avatar_size’ = 45,) ) ;?[/ht_message]
Enregistrez les modifications. Il se peut que vous deviez télécharger le fichier sur votre serveur si vous utilisez des programmes FTP.
Si l’image ne change pas après avoir effectué les ajustements ci-dessus, cela signifie que votre fichier CSS l’empêche probablement de se produire. Certains fichiers CSS de thèmes prennent le contrôle de nombreuses parties de WordPress.
Si c’est le cas, vous devriez :
Modifiez le fichier style.css dans le dossier du thème. Vous pouvez y accéder de la même manière que vous avez ouvert le fichier de commentaires.
NOTE : N’oubliez pas de créer une copie de sauvegarde. Mieux vaut prévenir que guérir.
Cherchez une section de code contenant .avatar.
Si votre thème contrôle l’image, celle-ci aura une hauteur, une largeur ou même les deux. Vous devrez faire les ajustements dans ce fichier en conséquence. Ainsi, le codage ressemblerait à ce qui suit :[ht_message mstyle=« info » title=« » « show_icon= »« id= »« class= »« style= » » ].commentaire-auteur .avatar {height : 45px ;width : 45px ;}[/ht_message]
Enregistrez vos modifications et rechargez votre site web. L’image Gravatar devrait maintenant s’afficher correctement.
Rappelez-vous que la seule partie du code dans les deux exemples ci-dessus est le numéro de taille. Elle est affichée en pixels et peut être plus ou moins grande en fonction de vos besoins. Il n’y a pas d’autres ajustements à faire dans le code.
N’oubliez pas non plus que les images dont la taille est augmentée commencent à se déformer et à se pixelliser. Cela est dû à la façon dont les images comme les JPG sont traitées sur Internet. Vous commencerez à perdre des détails au fur et à mesure que la taille de ces graphiques augmentera.
Changer le Gravatar dans la boîte Bio de l’auteur
Modifier l’image d’une bio d’auteur prend un peu plus de temps, uniquement parce qu’il faut trouver le code. Cette information ne se trouve pas toujours au même endroit. Certains thèmes les placent dans différents fichiers en fonction de la personne qui a créé le modèle. Vous pouvez commencer à chercher dans single.php ou functions.php.
Par exemple, le thème WordPress TwentySixteen utilise un fichier séparé appelé « biography.php ».
Dans ce fichier, vous recherchez le code qui contient get_avatar . Cela peut être un peu délicat car chaque programmeur de thème fait les choses différemment. Cependant, tous les thèmes auront un nombre accompagnant le code pour la taille de l’image. Par exemple, le code du thème TwentySixteen se présente comme suit :[ht_message mstyle=« info » title=« » « show_icon= »« id= »« class= »« style= » » ]$author_bio_avatar_size = apply_filters(“twentysixteen_author_bio_avatar_size”, 32 ) ;echo get_avatar( get_the_author_meta( ‘user_email’ ), $author_bio_avatar_size ) ;[/ht_message]
Remarquez le « 32 » dans la chaîne ci-dessus. C’est la taille que vous souhaitez modifier.
Un moyen rapide de parcourir un fichier est d’utiliser la commande « find ». Par exemple, la plupart des applications vous permettent d’appuyer sur CTRL+F pour rechercher du texte sur les ordinateurs Windows. Les ordinateurs Mac utilisent Command+F pour effectuer une recherche. Dans les deux cas, tapez avatar et le système vous montrera toutes les occurrences du mot dans le fichier.
Utilisation de l’éditeur WordPress
Certaines des modifications ci-dessus peuvent être effectuées directement à partir de WordPress. Si vous n’avez pas accès au FTP ou si vous ne pouvez pas accéder au dossier racine du site web, vous pouvez ouvrir l’outil Éditeur dans le panneau d’administration.
La seule raison pour laquelle je n’ai pas ouvert cette fonctionnalité au début est qu’il est plus difficile de faire une copie de sauvegarde du fichier. Si quelque chose ne va pas, c’est plus difficile à réparer pour les débutants.
Pour ouvrir l’outil d’édition :
Allez dans la zone Apparence de WordPress.
Cliquez sur le lien Editor sous Appearance.
Sur la droite, vous verrez une boîte déroulante pour sélectionner le thème. Choisissez celui que vous souhaitez modifier et cliquez sur « Sélectionner ».
Vous verrez que vous avez accès à une variété de fichiers tels que comments.php et d’autres. Une fois que vous avez sélectionné un fichier et modifié le codage, cliquez sur le bouton « Mettre à jour le fichier » en bas à gauche.
Utilisation du gestionnaire de fichiers pour modifier le Gravatar
FileZilla et l’éditeur WordPress sont d’excellents moyens de changer le gravatar, mais qu’en est-il du Gestionnaire de fichiers ? Si vous avez cPanel, l’outil Gestionnaire de fichiers est une excellente alternative si vous ne voulez pas installer un autre programme ou si vous avez besoin d’aller plus loin dans les fichiers WordPress en dehors de l’éditeur.
Le gestionnaire de fichiers vous permet d’accéder à toutes les ressources du site par l’intermédiaire de votre navigateur web. Il est assez flexible et c’est l’une de mes méthodes préférées pour faire des modifications sur le site.
Modifier l’encadré de la bio de l’auteur
Certains plugins vous permettent d’installer des boîtes de bio personnalisées pour les auteurs des articles. Beaucoup ont la possibilité de changer le gravatar directement. Cependant, je vais vous montrer comment le faire sans plugin.
Pour cet exemple, j’utilise le thème TwentySixteen fourni avec WordPress. Si vous ne l’avez pas, vous pouvez toujours l’installer gratuitement en allant dans la zone Apparence du panneau d’administration.
NOTE : Tous les thèmes ne sont pas structurés de la même manière. Ce tutoriel vous donne simplement une idée de l’endroit où regarder et de la manière d’effectuer des changements.
Accédez à l’outil Gestionnaire de fichiers à partir du tableau de bord cPanel. Vous pouvez également utiliser des programmes FTP tels que FileZilla.
Accédez à votre répertoire WordPress en cliquant sur le dossier « public_html ». Il s’agit de la racine de votre site web. Si WordPress est installé ailleurs, vous devrez accéder à ce répertoire particulier. Cependant, la plupart d’entre vous devront simplement accéder à public_html.
Cliquez sur le répertoire « wp-content » de votre site web.
Cliquez sur le répertoire « Themes » pour accéder à vos fichiers. C’est là que sont stockés tous vos thèmes. Même ceux que vous n’avez pas activés sont accessibles à partir de cette zone.
Trouvez votre thème et cliquez dans son répertoire. Pour ce tutoriel, j’accède à TwentySixteen.
C’est ici que les choses se compliquent. Tous les thèmes n’ont pas cette étape suivante. C’est parce que chaque développeur a une façon différente de coder les mises en page pour WordPress. Dans ce tutoriel, j’utilise TwentySixteen, je vais donc accéder au répertoire « template-parts » pour trouver la boîte de bio de l’auteur.
Mettez en évidence le fichier « biography.php » en cliquant dessus une fois et cliquez sur le bouton Modifier.
Dans l’écran d’édition, vous verrez le code php actuel pour la bio de l’auteur. Cherchez la commande « avatar_size » dans le code. Une fois que vous l’avez trouvée, il y aura un nombre à droite. Il s’agit des dimensions au carré en pixels.
Dans cet exemple, vous pouvez voir que ma version de TwentySixteen utilise « 42 ». Cela signifie que le gravatar dans la boîte de bio de l’auteur a une taille carrée de 42 par 42 pixels. Modifiez ce chiffre pour obtenir la taille que vous souhaitez. Pour ce tutoriel, je vais le rendre un peu plus petit et le régler sur « 32 ».
Après avoir modifié le nombre, cliquez sur le bouton « Enregistrer les modifications » en haut à droite. Maintenant, votre thème est configuré pour utiliser la nouvelle taille du gravatar dans la boîte de bio.
Si le gravatar ne change toujours pas sur le site, il se peut que vous deviez modifier la taille dans le fichier « style.css » du thème. Dans le cas de TwentySixteen, je dois éditer ce fichier css.
Editez le fichier style.css dans le répertoire principal de votre thème.
Cherchez le codage relatif à « .author-avatar » dans le fichier CSS. Dans cette zone, vous trouverez « height » et « width » avec le même nombre en pixels. Comme vous pouvez le voir, ma version de TwentySixteen utilise « 42px » dans les deux champs. Cela signifie que la taille est de 42 pixels.
Modifiez ces deux nombres pour qu’ils correspondent à la taille que vous souhaitez. Ce nombre doit correspondre à celui que vous avez utilisé plus tôt dans le fichier biography.php si vous voulez éviter les distorsions dans vos graphiques. Puisque j’ai utilisé « 32 » plus tôt, je dois faire en sorte que ces deux nombres soient également de 32px.
Une fois que vous avez fini d’éditer le code, cliquez sur le bouton « Save Changes » en haut à droite comme vous l’avez fait précédemment.
Modifier le Gravatar de la section commentaire
Voyons maintenant comment modifier le gravatar de la section des commentaires. Cela se fait de la même manière que pour la bio de l’auteur ci-dessus.
Dans le répertoire principal de votre thème, éditez le fichier « comments.php ».
Recherchez le code relatif à « avatar_size ». Changez le nombre à côté de cette commande pour modifier la taille du gravatar. Comme précédemment, je vais changer la mienne à 32 pour ce tutoriel.
Cliquez sur le bouton « Enregistrer les modifications » en haut à droite et votre section de commentaires est prête.
Après une mise à jour du thème…
Que se passe-t-il si votre thème est mis à jour ? Malheureusement, le codage peut être écrasé lors de la sortie d’une nouvelle version du thème. C’est pourquoi de nombreuses personnes utilisent des thèmes enfants dans WordPress. Ils vous donnent la possibilité de sauvegarder vos modifications dans le code. Cependant, un thème enfant n’aura pas l’avantage de recevoir les ajustements mis à jour par le développeur.
Je vous suggère de sauvegarder les fichiers séparément sur votre ordinateur comme une forme de sauvegarde. Par exemple, vous pouvez copier et coller l’intégralité du code du fichier comments.php dans le Bloc-notes et l’enregistrer dans un fichier .txt. Lorsqu’une mise à jour du thème est disponible, vous pouvez recopier le contenu du fichier .txt dans votre thème.
Veillez à comparer votre copie à la mise à jour. Il peut y avoir des ajustements que vous devrez inclure dans la nouvelle version.
La modification du Gravatar vous permet de faire en sorte que l’image corresponde parfaitement à vos idées de conception. En changeant simplement un ou deux chiffres, vous pouvez rendre l’image aussi grande ou aussi petite que vous le souhaitez. Après tout, la personnalisation est l’une des principales raisons pour lesquelles tant de gens aiment utiliser WordPress.
Quels sont les ajouts personnalisés que vous avez apportés à votre site web ? Combien de vos auteurs sont connus dans le monde entier par leur Gravatar ?
