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 :

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 :

<?php the_content();?>
<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 Replies to “WordPress : Ajouter une bio d’auteur à la fin de vos articles”

  1. 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. Ps : J’oubliais. Je compte inviter d’autres contributeurs, du coup je ne veux pas utiliser les plugins.
    Merci

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

Les commentaires sont clos.