Francis Chouquet Graphiste Lettering

Ajouter la bio de l’auteur à la fin d’un article

0

Cet article est rédigé par Maxime, étudiant dans les technologies de l’information et de la communication, et qui tient le blog http://blogtoolbox.fr/ où il parle de blogging : comment améliorer son blog en termes de référencement, design, promotion, concept, wordpress, etc.

Ajouter une description de chaque auteur à la fin de leurs articles respectifs est un bon moyen de donner des informations pratiques aux lecteurs quant à savoir qui et ce que fait l’auteur de cet article, et tout cela sans renvoyer vers une page « A propos ».

Si vous êtes seul rédacteur sur votre blog, cette petite description n’a pas grand intérêt (une page à propos serait plus approprié), mais lorsque vous êtes plusieurs rédacteurs ou que vous avez beaucoup d’invités (Monétiweb par exemple) cela peut-être très utile.

1. Ecrire la bio de l’auteur

Dans votre gestion des utilisateurs WordPress, vous avez certainement du apercevoir la boite « A propos de l’utilisateur », et c’est cette boite qui va nous permettre de réaliser ce que l’on veut. Il suffit dans un premier temps de remplir la biographie de présentation et ceci pour chaque compte utilisateur :

Zone A Propos

2. Afficher la bio de l’auteur

Ensuite, nous allons utiliser le tag permettant d’appeler la biographie de l’auteur de l’article :

Ce tag n’accepte aucun paramètre, il ne renvoie que la biographie brute de l’auteur.
On pourrait s’arrêter simplement là, mais on va quand même styler cette boite de texte à l’aide de quelques lignes de CSS pour la différencier de l’article (qui sera expliqué un peu plus loin). On lui ajoute donc une classe et notre code devient ainsi :

A propos de l’auteur :

Comme nous voulons ajouter la petite note d’informations biographiques à la fin de chaque article, il nous faut donc ajouter ces trois lignes de code dans le fichier index.php de notre thème. Le bon endroit se situe juste après :

Il est probable que ce soit légèrement différent selon le thème utilisé, mais il suffit de placer ces trois ligne après le tag qui affiche le contenu de l’article (the_content).

Nous obtenons à présent notre petite bio à la fin de nos articles :

Zone A Propos

3. Créer la classe CSS correspondante

Ca fonctionne et ca tient la route mais c’est pas superbement mis en valeur. Nous passons donc maintenant à la classe CSS authorbio pour intégrer proprement nos bios à notre thème. Nous pouvons ainsi changer la police, les couleurs, les bordures, etc. Pour l’exemple, voici le code CSS que j’ai utilisé (ajouté au fichier style.css du thème) :

.authorbio {
color: #777;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 5px;
}

4. Et voilà le résultat

Zone A Propos

Ce qui transforme la description brute de base en une réelle zone à par entière dans le contenu de l’article.

Si vous voulez également faire apparaitre les bios sur les pages d’articles seuls, il suffit de réaliser la même manipulation, mais cette fois-ci sur le fichier single.php de votre thème.

Pour finir, je vous renvoie vers le codex WordPress relatif au tag the_author, vous pourrez ainsi utiliser d’autres tags pour appeler les différentes informations disponibles dans l’onglet « Utilisateurs » (nom complet, pseudo, email, messagerie instantanée, etc).

Source: Hack WordPress

7 Commentaires

  • Si parfois le bonheur est dans le « pre », cette balise n’est pas justifiée dans ce cas. Autant ne mettre qu’un parapraphe p class= »authorbio », et ça suffit 😉

  • @Bruno : oui c’est juste que l’article à été copié/collé directement depuis un fichier html et la balise n’a pas été enlevé (ça va être corrigé).

    Note à tous : SUPPRIMEZ les balises des lignes de codes !

  • boudiou boudiou !!! Shame on me !! L’erreur est réparée !! Toutes mes confuses !! 😉

  • Excellent lorsqu’on tient un blog faisant intervenir d’autres blogueurs, merci pour l’astuce 🙂

  • Ah, je suis content que Maxime est écrit un article sur ce sujet. J’ai l ‘impression que ces options « user profil » sont très peu utilisées mais peut-être que je me trompe.. D’autre part, on peut un peu plus jouer avec ces fonctions en utilisant des champs sans grand intérêt comme le champ AIM et y insérer la référence à une image (par exemple) et faire quelquechose qui pourrait ressembler à :  » /> un coup de css en plus …etc..

  • J’ai abusé en posant du balisage html et php dans le commentaire. src = »the_author_aim(); » Francis, t essaye d’éditer cela au mieux ?

Success, your comment is awaiting moderation.