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

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

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

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

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

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

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

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

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

Laisser un commentaire