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

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 :

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.