Comment personnaliser l’affichage des auteurs sur WordPress

Pourquoi personnaliser l’affichage des auteurs ?

Sur un blog WordPress avec de nombreux contributeurs, il est essentiel d’afficher des informations pertinentes sur chaque auteur. Les lecteurs souhaitent souvent en savoir plus sur les personnes derrière les articles qu’ils lisent : leur biographie, leur expérience, et leurs autres travaux. Une bonne mise en valeur des auteurs peut améliorer l’engagement des lecteurs et renforcer la crédibilité du contenu. Prenons l’exemple du site de WPFormation : sous chaque article, il y a des informations sur l’auteur, ce qui permet d’établir un lien avec les lecteurs et d’inciter à l’exploration d’autres articles.

Installer un thème récent

Pour cet exemple, nous allons utiliser le thème Twenty Twenty, le dernier thème par défaut à la date de rédaction de cet article. Pour l’installer, vous pouvez le télécharger depuis le GitHub de WordPress. Une fois que vous l’avez téléchargé, suivez les étapes pour l’installer sur votre site. Si vous ne savez pas comment procéder, nous recommandons de consulter le tutoriel Comment installer un thème WordPress gratuit ou premium ?.

Créer des utilisateurs

Pour personnaliser l’affichage des auteurs, vous devez d’abord créer plusieurs utilisateurs sur votre blog. Allez dans l’onglet Utilisateurs de l’administration WordPress pour ajouter un nouvel utilisateur.

Pour cet exemple, nous allons créer un utilisateur nommé Laure Ambar. Par ailleurs, une extension comme Avatar Privacy peut faciliter l’ajout d’avatars sans passer par Gravatar. Vous pouvez apprendre à ajouter une extension en lisant ce tutoriel.

Une fois qu’elle a été ajoutée, Laure pourra compléter son profil, y compris une biographie et des informations de contact.

Ajouter des champs supplémentaires

Dans la section des informations de contact du profil utilisateur, vous pouvez ajouter des liens vers les réseaux sociaux comme Facebook ou Twitter. Pour cela, nous allons ajouter de nouveaux champs via le fichier functions.php de votre thème enfant.

Créez le thème enfant si ce n’est pas encore fait, puis ajoutez le code suivant dans functions.php :

function modify_user_contact_methods( $user_contact ) { 
  // Add user contact methods 
  $user_contact['facebook'] = __( 'Compte Facebook' ); 
  $user_contact['twitter'] = __( 'Compte Twitter' ); 
  return $user_contact; 
} 
add_filter( 'user_contactmethods', 'modify_user_contact_methods' );

Cette démarche permet d’ajouter Facebook et Twitter aux informations de contact de chaque utilisateur.

Affichage par défaut des utilisateurs

Dans le thème Twenty Twenty, l’affichage de l’auteur se fait par défaut avec l’avatar, le nom et la description. Nous souhaitons y ajouter les liens vers le profil social de l’auteur. Pour ce faire, nous allons modifier le fichier entry-author-bio.php situé dans le dossier template-parts.

Vous aurez besoin d’une extension comme Afficher le modèle courant pour identifier quel fichier précise l’affichage de l’auteur. Cela vous fera gagner du temps lors des modifications.

Modifier le template pour inclure les nouveaux champs

Une fois que vous avez localisé le fichier, copiez-le dans votre thème enfant. Dans ce fichier, ajoutez le code qui va récupérer les informations de contact supplémentaires que vous avez ajoutées :

echo 'Facebook';
echo 'Twitter';

Cette portion de code affichera les liens vers les profils des réseaux sociaux des auteurs directement sous leur biographie.

Personnaliser l’affichage avec du CSS

Après avoir ajouté le code nécessaire, il est temps d’esthétiser l’affichage. Utilisez le fichier style.css de votre thème enfant pour définir des styles spécifiques. Par exemple, vous pouvez ajouter un fond, un padding, ou une ombre autour de la biographie :

.author-bio { 
  background-color: #F5F5F5; 
  padding: 6rem; 
  box-shadow: 5px 5px 5px #888888; 
}

Ces ajustements donnent un aspect professionnel à la section de l’auteur. Grâce à l’inspecteur de votre navigateur, vous pouvez rapidement identifier et modifier le CSS sur cette section.

Afficher une liste des auteurs

Pour aller plus loin, vous pouvez créer une page dédiée pour afficher tous les auteurs de votre site. Pour cela, créez un template spécifique, par exemple, page-users.php, dans le thème enfant.

Utilisez la fonction get_users() pour récupérer tous les utilisateurs avec le rôle souhaité. Voici un exemple de code :

$args = array( 'role' => 'editor' ); 
$users = get_users( $args );

foreach ( $users as $user ) {
  echo '
' . $user->display_name . '
';
}

Cette boucle affichera les noms des utilisateurs avec leur rôle spécifique, vous permettant ainsi de créer un annuaire d’auteurs sur votre site.

Conclusion

En somme, personnaliser l’affichage des auteurs sur votre blog WordPress renforce l’interaction avec vos lecteurs tout en offrant une présentation cohérente et attirante. Grâce aux différentes techniques décrites, vous devriez être en mesure de modifier vos templates pour y incorporer des informations supplémentaires. N’hésitez pas à explorer ces possibilités, même en utilisant des extensions quand cela s’avère nécessaire. L’objectif est d’améliorer l’expérience utilisateur et d’accroître l’engagement sur votre site.

Vous aimerez également…

• Comment installer un thème WordPress
• SEO pour WordPress : astuces et conseils
• Maximiser l’engagement utilisateur sur votre site

À propos de l’auteur…