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 😉