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.
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,
Ps : J’oubliais. Je compte inviter d’autres contributeurs, du coup je ne veux pas utiliser les plugins.
Merci
Bonjour,
J’obtiens une page blanche sur le lien du blog que vous avez communiqué.
Est-ce que ce blog utilise WordPress ?
Bonsoir ,
Comment on fait pour trouver le site single.php ?
Salut,
Le fichier single.php est stocké sur le serveur qui héberge le site internet utilisant WordPress comme CMS.
On peut y accéder via FTP : https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Ensuite modifier le code via un éditeur comme Visual Studio Code puis le déposer une fois sauvegardé via FTP sur le serveur 😉