Ajouter un module A propos de l'auteur dans vos articles sous WordPress
A la demande des lecteurs de Protuts, vous allez aujourd’hui apprendre à reproduire le module A propos de l’auteur le tout en php. Nous nous baserons sur l’exemple de Protuts.net pour une meilleure compréhension. N’attendez plus pour lire la suite de ce tutoriel WordPress !
Modification de single.php
Connectez-vous à l’administration WordPress et ouvrez la page single.php via l’onglet Apparence, puis Éditeur. Histoire de vous faciliter la tâche, copier-coller ce bout de code à l’emplacement souhaité, généralement en fin d’article, après la ligne <?php the_content('', ''); ?> :
<div id="author-meta"><h4>A propos de l'auteur : <?php the_author_posts_link(); ?></h4> <?php echo get_avatar( get_the_author_id() , 72 ); ?> <p><?php the_author_description(); ?></p> <p><?php the_author_posts_link(); ?> a écrit <?php the_author_posts(); ?> articles sur <a href="http://www.protuts.net/">Protuts.net</a>.</p> <div id="author-info"><img src="URL DE VOTRE IMAGE"/><a href="mailto:<?php echo antispambot(get_the_author_email()); ?>">Écrivez-lui</a> <img src="URL DE VOTRE IMAGE"/><a href="<?php the_author_aim(); ?>">Suivez-moi sur Twitter !</a> </div> </div>
Explication des différentes requêtes utilisées :
<?php the_author_posts_link(); ?>
Permet d’afficher l’auteur de l’article, et, si cliqué, les articles de l’auteur
<?php echo get_avatar( get_the_author_id() , 72 ); ?>
L’avatar de l’auteur, le nombre 72 correspondant à la taille en pixel
<?php the_author_description(); ?>
La biographie de l’auteur
<?php the_author_posts(); ?>
Affiche le nombre d’articles de l’auteur
<?php echo antispambot(get_the_author_email()); ?>
Lien vers l’adresse email de l’auteur
<?php the_author_aim(); ?>
Petite ruse ici, cette requête est censée faire appel à une adresse de messagerie AIM, remplacée ici par Twitter.
N’oubliez pas d’ajouter les URLs des icônes Mail et Twitter dans le code.
Modification de votre profil
Les requêtes que nous avons utilisé font tout simplement appel aux différents champs du profil utilisateur WordPress. Il est donc nécessaire de le compléter convenablement si ce n’est pas déjà fait. Pour rappel, le champ AIM correspondra ici à Twitter, mais libre à vous d’utiliser les champs pour afficher d’autres informations.
Pour modifier votre profil, déroulez l’onglet Utilisateurs puis cliquez sur Votre profil, et complétez les champs.
Capture d'écran - Votre profil dans WordPress
Design du module
Ouvrez votre feuille de style en cascade (styles.css) toujours via l’éditeur et ajoutez-y les styles suivants :
#author-meta {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#F3F8FA none repeat scroll 0 0;
clear:both;
padding:10px;
}
#author-meta img {
border:none;
vertical-align:middle;
}
#author-meta h4 {
color:#257;
font-weight:normal;
font-size:18px;
margin:0;
padding:8px 12px;
line-height:2em;
}
#author-meta p {
padding-left:90px;
line-height:1.7em;
}
#author-info {
padding:10px;
}
#author-info a {
margin-left:5px;
margin-right:30px;
}
Étude de cas : Protuts
Au final, si vous avez bien suivi le tutoriel, vous devriez obtenir le résultat suivant :
Capture d'écran - Exemple d'encart A propos de l'auteur (ici Protuts.net)
Ce genre d’encart A propos de l’auteur est particulièrement utile dans le cas d’un blog écrit par plusieurs personnes (comme c’est le cas sur Protuts). Des questions ? N’hésitez pas !
13 commentaires pour “Ajouter un module A propos de l'auteur dans vos articles sous WordPress”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
Question bête mais… n’est-il pas plus simple de créer une page « A propos » et d’y insérer ces informations? Quelle est la différence?
@Bouh : ce type de méthode est très utile pour les blogs multi-rédactionnel comme Protuts. Cela permet au lecteur de savoir précisément qui a écrit l’article et de pouvoir le contacter personnellement par mail ou sur différents réseaux sociaux.
Autre avantage par rapport à une page A propos : pas besoin de charger une page spéciale, ces informations restent dans la continuité de la lecture de l’article.
C’est certain que ce module n’est pas spécialement utile à tous les blogs.
D’accord… Merci pour ces éclaircissements!
ça peut être pratique ça pour un blog à plusieurs auteurs
merci !
moi qui débute sous wordpress ça va bien m’aider tout ça.
Hey !
Ce n’est pas mieux de mettre « the_author_link(); » pour récupérer l’adresse web de l’auteur ? Plus facile pour les différents auteurs qui ont un blog personnel ou pro.
Ou encore utiliser les balises meta, comme tu le dis dans l’article « the_author_meta(‘url’); »
@Valentin : mieux je ne sais pas, j’ai trouvé cette solution (en galérant pas mal il faut le dire) sur le codex WordPress
Je dis ça, car il n’est pas présenté dans l’article. Le lien de l’auteur est inséré manuellement
Merci pour l’explication et le code !
Bonjour,
Merci pour cet article.
Est-il possible de mettre en forme l’apparence en ajoutant paragraphe et autres styles (souligné, barré, gras etc)
Bonne journée/soirée.
@guymauve : salut,
ce n’est pas possible car comme indiqué dans l’article, le code fait appel à des champs de WP qui, d’après mes tests, n’acceptent pas le HTML.
OK merci de ces précisions.
Bonne journée.
Merci pour l’article. Une question : comment modifier le champ AIM dans le profil pour le nommer Twitter ( si possible dans la BD de WP ) pour que les plugins qui utilisent les données du profil puissent marcher sans customisation supplementaire? ( une question à 100 €
)