Ajouter un module A propos de l’auteur dans vos articles sous WordPress

Mis à jour le :

20 août 2023

WordPress dispose de nombreuses commandes PHP pour mettre en valeur vos auteurs sous forme d’un module A propos de l’auteur. Idéal pour afficher une biographie de vos contributeurs !

Modification de single.php

Connectez-vous à l’administration WordPress et ouvrez la page single.php via l’onglet Apparence, puis Éditeur. Histoire de vous faciliter la tâche, copier-coller ce bout de code à l’emplacement souhaité, généralement en fin d’article, après la ligne <?php the_content('', ''); ?> :

<div id="author-meta"><h4>A propos de l&apos;auteur :  <?php the_author_posts_link(); ?></h4>
<?php echo get_avatar( get_the_author_id() , 72 ); ?>
<p><?php the_author_description(); ?></p>
<p><?php the_author_posts_link(); ?> a écrit <?php the_author_posts(); ?> articles sur <a href="http://www.protuts.net/">Protuts.net</a>.</p>
<div id="author-info"><img src="URL DE VOTRE IMAGE"/><a href="mailto:<?php echo antispambot(get_the_author_email()); ?>">Écrivez-lui</a>
<img src="URL DE VOTRE IMAGE"/><a href="<?php the_author_aim(); ?>">Suivez-moi sur Twitter !</a>
</div>
</div>

Explication des différentes requêtes utilisées :

<?php the_author_posts_link(); ?>

Permet d’afficher l’auteur de l’article, et, si cliqué, les articles de l’auteur

<?php echo get_avatar( get_the_author_id() , 72 ); ?>

L’avatar de l’auteur, le nombre 72 correspondant à la taille en pixel

<?php the_author_description(); ?>

La biographie de l’auteur

<?php the_author_posts(); ?>

Affiche le nombre d’articles de l’auteur

<?php echo antispambot(get_the_author_email()); ?>

Lien vers l’adresse email de l’auteur

<?php the_author_aim(); ?>

Petite ruse ici, cette requête est censée faire appel à une adresse de messagerie AIM, remplacée ici par Twitter.

N’oubliez pas d’ajouter les URLs des icônes Mail et Twitter dans le code.

Modification de votre profil

Les requêtes que nous avons utilisé font tout simplement appel aux différents champs du profil utilisateur WordPress. Il est donc nécessaire de le compléter convenablement si ce n’est pas déjà fait. Pour rappel, le champ AIM correspondra ici à Twitter, mais libre à vous d’utiliser les champs pour afficher d’autres informations.

Pour modifier votre profil, déroulez l’onglet Utilisateurs puis cliquez sur Votre profil, et complétez les champs.

Capture décran - Votre profil dans WordPress

Design du module

Ouvrez votre feuille de style en cascade (styles.css) toujours via l’éditeur et ajoutez-y les styles suivants :

#author-meta {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#F3F8FA none repeat scroll 0 0;
clear:both;
padding:10px;
}
#author-meta img {
border:none;
vertical-align:middle;
}
#author-meta h4 {
color:#257;
font-weight:normal;
font-size:18px;
margin:0;
padding:8px 12px;
line-height:2em;
}
#author-meta p {
padding-left:90px;
line-height:1.7em;
}
#author-info {
padding:10px;
}
#author-info a {
margin-left:5px;
margin-right:30px;
}

Ce genre d’encart A propos de l’auteur est particulièrement utile dans le cas d’un blog écrit par plusieurs personnes. Des questions ? N’hésitez pas !

Aurélien Denis

Expert WordPress – Créateur de WP channel et co-fondateur de GuttyCorp – Orateur

Protégez votre site WordPress

Vos données sont précieuses,
ne prenez pas le risque de tout perdre.
Confiez-moi votre maintenance !

Me contacter

Ces articles devraient t’intéresser…

36 réponses

Raph

26 novembre 2018 16h35

Bonjour,
Merci pour cet article trés complet!
Savez-vous s’il est possible :
– 1. De rajouter une ligne de code pour afficher la photo de l’auteur.
-2. S’il est possible de limiter ce code qu’à certaines catégories de pages? (Je n’utilise que des pages sur mon site pour garder une structure en sillo. Je ne souhaite pas par exemple que l’auteur s’affiche en bas de la page accueil ou mentions légales etc..)
Par avance merci.
JDroadtrip

20 décembre 2014 13h16

Bonjour,

J’ai utiliser votre code, par contre, je n’arrive pas à placer le texte à droite de l’avatar, comment puis-je faire cela ?
Merci à vous !!!
MrBiljeg (@MrBiljeg)

11 octobre 2014 10h49

Bonjour actuelle j’ai les champ google+ twitter et facebook Quelle sont les variables php auquel ils correspondent?
Merci d’avance
marisienneCapucine

04 octobre 2013 12h21

Bonjour,

merci pour ce post qui m’a été d’une grande aide. Malheureusement pas très douée en php, je cherche comment ne pas afficher les bouton twitter et google+ si jamais certains de mes auteurs n’ont pas de comptes renseignés dans le profil wp.

Merci par avance
1. Aurélien Denis
  
  11 octobre 2013 14h01
  
  Il faut mettre des conditions…
Julien

09 juin 2013 16h03

Bonjour,

Au top, merci beaucoup, mais j’ai une question: quelque soit l’auteur, l’image ne change pas. Comment j’adapte l’image en fonction de l’auteur?
Merci par avance.
Gaëtan

14 mars 2013 17h19

Bonjour,
J’ai mis le css dans la feuille de style de mon thèmes enfant mais je n’arrive pas a avoir une mis en page correct du texte: http://image.noelshack.com/fichiers/2013/11/1363277819-capture-mmg.png

Quelqu’un pourait-il me donner une solution, car je ne m’y connait pas trop en css?

Merci d’avance.
Amer

26 janvier 2013 0h26

Bonjour Aurélien
Svp, comment peut-on faire une image (avatar)?

On doit modifier dans ce code :
1. Aurélien Denis
  
  26 janvier 2013 15h05
  
  Merci de passer par un service de partage de code en ligne comme pastebin.
Gwadas

20 décembre 2012 15h34

Bonjour , Merci pour ce petit tuto . J’ai réussi a afficher le « a propos de l’auteur » mais je n’arrive pas a le positionner après le texte de l’article . Comment faire ?
1. Aurélien Denis
  
  28 décembre 2012 11h11
  
  Le positionnement s’opère directement dans le code PHP et / ou CSS.
  1. gwadassGwadas
    
    28 décembre 2012 15h04
    
    Ok Merci Beaucoup et Bonnes Fêtes 🙂
Miss Seo Girl

19 juillet 2012 15h05

Bonjour,
Une petite question :
Comment faire pour afficher dans la « page author » la liste d’articles rédigés par l’auteur en format lien hypertexte ?
1. Aurélien Denis
  
  20 juillet 2012 15h23
  
  En faisant une boucle comme :
  
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <a href="<?php the_permalink(); ? rel="nofollow">" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?>
Evan

08 mai 2012 0h07

Bonjour !

Merci pour les merveilleux tutos que vous proposez et qui m’ont appris beaucoup de choses. Toutefois, j’ai une question sur « A propos de l’auteur ».. J’ai bien fait tout comme vous, mais impossible d’avoir quelque chose de visuellement esthétique.. Voici se que ça donne :
http://nsa22.casimages.com/img/2012/05/08/120508121840811900.jpg

Comment modifier le CSS pour avoir quelque chose qui ressemble à se que vous avez d’actif sur votre blog ?
1. Aurélien Denis
  
  11 mai 2012 14h59
  
  Il faut modifier / ajouter des propriétés CSS dans style.css, un fichier présent à la racine du thème utilisé.
  
  Il faut donc s’y connaître un minimum…
Jérôme

20 mars 2012 16h05

bonjour et merci pour ton article.

je cherche un détail comment faire pour modifier le texte et ajouter un mot dans la description de l’auteur.
là par exemple on a

« A propos Aurélien Denis »comment ajouter le petit de…qui va bien?
merci d’avance
Jérôme
1. Aurélien Denis
  
  22 mars 2012 10h41
  
  Ce bout de texte doit être intégré directement dans les fichiers PHP du thème (en principe, single.php). 😉
Jean-Sylvain

21 janvier 2012 21h08

Très bon article !

Je propose une petite amélioration. Dans le profil, il faudrait que la personne remplisse uniquement son pseudo Twitter et non mettre l’URL en entier.

Voici le code (qui ne concerne que la ligne Twitter) :
<a href="http://www.twitter.com/« >Suivez-moi sur Twitter !
1. Aurélien Denis
  
  23 janvier 2012 12h48
  
  Exact tout à fait possible !
Web-creativite

04 juin 2011 9h57

Bonjour et merci pour cette modification , ça faisait un moment que je cherchais une astuce pour afficher les différentes biographies d’auteurs sur un de mes blogs, mais je voulais quelque chose de propre et là c’est réussi, encore merci pour cet article fort utile.

Cordialement.
1. Aurélien Denis
  
  08 juin 2011 13h18
  
  Ave plaisir ! 😎
serge

04 janvier 2010 22h21

Merci pour l’article. Une question : comment modifier le champ AIM dans le profil pour le nommer Twitter ( si possible dans la BD de WP ) pour que les plugins qui utilisent les données du profil puissent marcher sans customisation supplementaire? ( une question à 100 € 😉 )
1. Jean-Sylvain
  
  21 janvier 2012 21h05
  
  Il faut modifier la page « user.php » qui est dans le dossier wp-includes, dans les dernières lignes et modifier « AIM » par « Twitter ».
guymauve

25 octobre 2009 12h20

OK merci de ces précisions.

Bonne journée.
Benjamin Denis

20 octobre 2009 17h40

@guymauve : salut,

ce n’est pas possible car comme indiqué dans l’article, le code fait appel à des champs de WP qui, d’après mes tests, n’acceptent pas le HTML.
guymauve

18 octobre 2009 21h50

Bonjour,

Merci pour cet article.

Est-il possible de mettre en forme l’apparence en ajoutant paragraphe et autres styles (souligné, barré, gras etc)

Bonne journée/soirée.
Éric NIAKISSA (WP)

26 septembre 2009 15h04

Merci pour l’explication et le code !
Valentin

22 septembre 2009 20h56

Je dis ça, car il n’est pas présenté dans l’article. Le lien de l’auteur est inséré manuellement 😉
Benjamin Denis

21 septembre 2009 14h37

@Valentin : mieux je ne sais pas, j’ai trouvé cette solution (en galérant pas mal il faut le dire) sur le codex WordPress 😉
Valentin

21 septembre 2009 10h44

Hey !
Ce n’est pas mieux de mettre « the_author_link(); » pour récupérer l’adresse web de l’auteur ? Plus facile pour les différents auteurs qui ont un blog personnel ou pro.

Ou encore utiliser les balises meta, comme tu le dis dans l’article « the_author_meta(‘url’); »
hdmi

17 septembre 2009 15h59

moi qui débute sous wordpress ça va bien m’aider tout ça.
Bingo

16 septembre 2009 12h19

ça peut être pratique ça pour un blog à plusieurs auteurs

merci !
Bouh

15 septembre 2009 13h19

D’accord… Merci pour ces éclaircissements! 🙂
Aurélien Denis

15 septembre 2009 9h54

@Bouh : ce type de méthode est très utile pour les blogs multi-rédactionnel comme Protuts. Cela permet au lecteur de savoir précisément qui a écrit l’article et de pouvoir le contacter personnellement par mail ou sur différents réseaux sociaux.

Autre avantage par rapport à une page A propos : pas besoin de charger une page spéciale, ces informations restent dans la continuité de la lecture de l’article.

C’est certain que ce module n’est pas spécialement utile à tous les blogs.
Bouh

14 septembre 2009 10h00

Question bête mais… n’est-il pas plus simple de créer une page « A propos » et d’y insérer ces informations? Quelle est la différence?

Ajouter un module A propos de l’auteur dans vos articles sous WordPress

Modification de single.php

Modification de votre profil

Design du module

Comment héberger localement des polices Google Fonts avec WordPress ?

Récupérer la première image d’un article via PHP pour WordPress

Ajouter les compteurs de contenu dans le tableau de bord de WordPress