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.