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

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 &eacute;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()); ?>">&Eacute;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 (comme c’est le cas sur Protuts). Des questions ? N’hésitez pas !

35 commentaires

  1. Bouh

    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?

  2. Aurélien Denis

    @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.

  3. Valentin

    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’); »

  4. Valentin

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

  5. guymauve

    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.

  6. Benjamin Denis

    @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.

  7. serge

    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 € )

  8. Web-creativite

    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.

  9. Jean-Sylvain

    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 !

  10. Jérôme

    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

  11. Evan

    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 auteur de l’article

      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…

  12. Miss Seo Girl

    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 auteur de l’article

      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; ?>
  13. Gwadas

    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 ?

  14. Julien

    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.

  15. marisienneCapucine

    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

  16. JDroadtrip

    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 !!!

Les commentaires sont fermés.

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX