WordPress : Ajouter une bio d’auteur à la fin de vos articles

Last updated on 26 juin 2022


L’objectif de cet article est de vous montrer comment ajouter une bio d’auteur à chaque article publié grâce à WordPress dans le cas où le thème que vous utilisez ne dispose pas de cette fonctionnalité.

Bien sûr on aurait pu céder aux sirènes “plugin” qui nous appellent au loin mais si on peut faire autrement je trouve que c’est bien mieux (temps de chargement des pages, mises à jour non sollicités, etc…).

Pour ce faire, nous allons mettre un peu les mains dans le code mais rassurez-vous rien de bien méchant puisque je vous détaille tout ça dans ce billet.
Voilà un exemple de ce que nous allons obtenir :

Ajouter une bio d'auteur à la fin de vos articles WordPress

Pour ajouter une bio d’auteur à la fin de vos articles WordPress, vous devez modifier le codage de la page de l’article en éditant le fichier single.php.

Vous devez positionner ce code juste après :

<div class="author-bio"> 
   <div class="bio-avatar">
      <?php echo get_avatar(get_the_author_meta('user_email'),'128'); ?>
   </div> 
   <p class="bio-name">
      <?php the_author_meta('display_name'); ?></p> 
      <p class="bio-desc"><?php the_author_meta('description'); ?></p> 
   <div class="clear"></div> 
</div>

Pour mettre du style sur ce bloc bio de l’auteur, vous pouvez vous inspirer de ce code CSS :

/* single : author bio
/* ------------------------------------ */
.author-bio { 
   border: 2px solid #eee; 
   position: relative; 
   padding: 15px 15px 10px 95px; 
   color: #888; margin-bottom: 40px; 
}
.author-bio:before { 
   content:''; 
   display: inline-block; 
   border-left: 8px solid transparent; 
   border-right: 8px solid transparent; 
   border-bottom: 8px solid #eee; 
   position: absolute; top: -8px; 
   left: 13px; 
}
.author-bio:after { 
   content:''; 
   display: inline-block; 
   border-left: 6px solid transparent; 
   border-right: 6px solid transparent; 
   border-bottom: 6px solid #fff; 
   position: absolute; 
   top: -5px; left: 15px; 
}
.author-bio .bio-avatar { 
   float: left; 
   margin: 0 0 8px -80px; 
   width: 64px; 
   height: auto; 
   position: relative; 
}
.author-bio .bio-avatar:after { 
}
.author-bio .bio-avatar img { 
   display: block; 
   width: 100%; 
   height: auto;
}
.author-bio p { 
   margin-bottom: 8px; 
}
.author-bio .bio-name { 
   color: #444; 
   font-weight: 600; 
   margin-bottom: 4px; 
}
.author-bio .bio-desc { 
   color: #888; 
   font-size: 15px; 
   line-height: 1.5em; 
}

J’ai mis en pratique cette technique sur mon site personnel.

N’hésitez pas à me faire un feedback ou à me questionner pour éclaircir un point obscur.


3 Comments

  1. Juliette
    14 mai 2014
    Reply

    Bonjour,

    Je suis administrateur de ce blog : http://godov.fr/blog/
    Je regarde dans le fichier single.php, mais je n’ai pas le
    Dans ce cas comment procéder ? est ce que cela est du à mon template ?

    Merci de votre retour,

  2. Juliette
    14 mai 2014
    Reply

    Ps : J’oubliais. Je compte inviter d’autres contributeurs, du coup je ne veux pas utiliser les plugins.
    Merci

    • 14 mai 2014
      Reply

      Bonjour,
      J’obtiens une page blanche sur le lien du blog que vous avez communiqué.
      Est-ce que ce blog utilise WordPress ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.