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.

Share

Claude BUENO

Passionné par la Transformation digitale et l'Évolution des Systèmes d’Information. Intérêt pour le Management, le Marketing et l'Entrepreneuriat. Je blogue depuis 2008 sur les sujets numériques. Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite à Tours.

You may also like...

3 Responses

  1. Juliette dit :

    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 dit :

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