Créer sa propre ‘Author Box’ sous wordpress
Lorsqu’on crée son propre blog avec WordPress et/ou que l’on décide de le partager avec des collègues pour rédiger des articles, il peut être intéressant de créer ce que l’on appelle une « Author box »: une petite boîte qui contiendra des informations sur l’auteur, comme sa biographie, des liens vers les réseaux sociaux qu’il fréquente, etc. Si de nombreux plugins permettent de le faire, tous n’ont pas la même qualité. Or, étant très pointilleux sur certains aspects, je m’étonne de ne trouver chaussure à mon pied. C’est donc ainsi que j’ai remis mon bleu de travail, relevé mes lunettes sur mon nez et inspiré un grand coup. On est parti pour un coup de codage dans les tréfonds de WordPress !
Les bases pour bien commencer
Les prérequis pour la réalisation de cette boîte de présentation ne sont pas très nombreux. Vous devrez néanmoins avoir des notions de HTML et de CSS pour les modifications que vous apporterez à votre thème, des notions de PHP et de SQL seraient un plus et vous aideraient à améliorer le contenu de la présentation. Enfin, je vous conseille d’installer la pierre angulaire de ce petit tutoriel, à savoir le plugin Extra User Fields. Remarquez, à l’heure actuelle, ce plugin n’est pas mis fréquemment à jour mais semble fonctionner pourtant avec les versions récentes (3.5+) du moteur de blog. Si cela ne devait plus être le cas, sachez que tout plugin similaire utilisant les méta-données des utilisateurs de votre blog fera l’affaire.
En dernier recours, si aucun plugin similaire ne devait plus être disponible, vous pouvez toujours recourir à une méthode d’ajout manuelle comme proposée par le tutoriel de Paulund à ce sujet (voir sources en fin d’article). Pour l’avoir testé, cela fonctionne également très bien et c’est simple à réaliser pour autant que vous compreniez un peu PHP… ce qui n’est pas donné à tout le monde pour autant.
Création des champs personnalisés
La première étape de ce tutoriel est de créer des champs personnalisés pour les utilisateurs de votre blog. Cela implique concrètement de rajouter des champs dans la section « Profil », donc sur la fiche des utilisateurs. Cela leur permettra de renseigner l’adresse URL de leur profil Google+, Twitter, Facebook, Linkedin et plus si affinités. Comme il sort de nouveaux réseaux sociaux tous les jours, il est préférable d’utiliser un plugin pour pouvoir rajouter aisément des champs. Sinon, du code vous attends au contour.
En utilisant Extra User Fields, vous pourrez configurer simplement de nouveaux champs personnalisés pour votre profil en vous rendant dans sa configuration, à savoir dans Réglages > Extra User Fields. Un certain nombre d’informations vous sont données quant au paramétrage possible des champs, mais cela reste très sommaire. Il est possible néanmoins de créer des champs textes, des textareas, des boutons radios et autres cases à cocher. Si le paramétrage est assez barbare, il n’en reste pas moins que ce petit plugin est efficace. Dans l’exemple donné plus haut en image, j’ai choisi personnellement d’ajouter des champs pour se décrire (biographie en textarea) et pour ajouter un lien vers chacun de ses profils sur les réseaux sociaux courants. (même si Facebook n’est pas renseigné ici, question de goût 🙂 )
Voici concrètement la configuration du plugin pour cet exemple:
Et voilà, vous avez ajoutez des champs « Biographie », « Linkedin », « Google+ » et « Twitter » à chaque profil d’utilisateur de votre blog. Maintenant que cette étape est passée et que les bases sont en place, il va nous falloir coder un peut pour afficher tout cela correctement dans notre blog.
Codage du thème WordPress
La mise en place du code nécessaire à l’affichage de notre « author box » peut maintenant débuter. Nous allons donc tout naturellement nous tourner vers l’éditeur de templates de WordPress (ou le formidable Notepad++ pour ceux qui sont allergiques) pour coder un peu. Ouvrez votre thème depuis le tableau de bord du blog > Apparences > Editeur, puis choisissez d’éditer le fichier single.php (Article seul). Repérez la ligne suivante, ou approchant:
<?php get_template_part( 'content', 'single' ); ?>C’est elle qui est chargée d’afficher le contenu de l’article courant. On va donc vouloir ajouter notre petite boîte d’information juste après. Faites de la place en-dessous en effectuant des retours-chariot jusqu’à ce que vous vous sentiez à l’aise dans l’édition. Généralement deux pressions sur la touche « Enter » (ou « Entrée » sur les claviers francophones) sont suffisant pour assurer une bonne lisibilité. Vous allez maintenant pouvoir donner libre cours à votre génie créatif pour générer du code HTML et CSS pouvant rendre tout cela attractif. Ce n’est pas le but de ce tutoriel, où je vais plutôt préférer vous montrer un exemple de ce que j’ai accompli. Par exemple, ajouter le code suivant:
<!-- Author bio -->
<?php if (get_the_author_meta('euf_biographie') != null) { ?>
<div id="author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_id(), 150 ); ?><br />
<?php if (get_the_author_meta('euf_googleplus') != null) { ?>
<a href="<?php echo get_the_author_meta('euf_googleplus'); ?>" rel="author me" target="_blank"><img src="http://powerjpm.annuplus.net/wp-content/uploads/2013/05/mini-googleplus.png" alt="Mon Google+" /></a>
<?php } ?>
<?php if (get_the_author_meta('euf_twitter') != null) { ?>
<a href="<?php echo get_the_author_meta('euf_twitter'); ?>" rel="me" target="_blank"><img src="http://powerjpm.annuplus.net/wp-content/uploads/2013/05/mini-twitter.png" alt="Mon Twitter" /></a>
<?php } ?>
<?php if (get_the_author_meta('euf_linkedin') != null) { ?>
<a href="<?php echo get_the_author_meta('euf_linkedin'); ?>" rel="me" target="_blank"><img src="http://powerjpm.annuplus.net/wp-content/uploads/2013/05/mini-linkedin.png" alt="Mon Linkedin" /></a>
<?php } ?>
</div>
<div id="author-description">
<h2>A propos de <a href="<?php echo get_author_posts_url(get_the_author_meta('id')); ?>" title="<?php printf( __( 'View all posts by %s', 'catchbox' ), get_the_author() ) ?>"><?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h2>
<p><?php the_author_meta('euf_biographie'); ?></p>
</div>
</div>
<?php } ?>
<!-- End of author bio -->
Dans mon cas et avec les classes CSS appliquées, le code d’affichage me permet d’afficher une jolie petite boîte de présentation de l’auteur:
On voit donc relativement facilement les éléments suivants dans le code PHP précédemment mis en exemple:
- L’élément get_the_author_meta(‘euf_biographie’) retourne le champ biographie dans mon cas
- L’élément get_avatar(get_the_author_id(), 150) retourne l’avatar de l’auteur. C’est un code standard sous WordPress, vous pouvez le reprendre tel quel et il fonctionnera bien 😉
- L’élément get_the_author_meta(‘euf_googleplus’) retourne le lien vers le profil Google+ (s’il existe)
- L’élément get_the_author_meta(‘euf_twitter’) retourne le lien vers le profil Twitter (s’il existe)
- L’élément get_the_author_meta(‘euf_twitter’) retourne le lien vers le profil Linkedin (s’il existe)
- De manière générale, le code get_the_author_meta(‘euf_MONCHAMP’) va retourner le contenu du champ intitulé MONCHAMP… n’oubliez pas de préfixer tout les appels de vos champs dans votre code par euf_ si vous utilisez le plugin Extra User Fields sinon l’appel ne retournera rien ! Si ce n’est pas le cas, vous ne devez pas ajouter le préfixe.
Et voilà, il ne vous reste plus qu’à ajouter les thèmes CSS que vous désirez à votre thème (dans style.css) pour afficher la boîte comme vous le désirez.
Remarque quant à l’utilisation d’Extra User Fields
Il semble exister un petit bug dans le plugin Extra User Fields qui implique que remplacer une valeur existante par une valeur vide (exemple: j’ai supprimé un de mes comptes sur les réseaux sociaux ou je ne veux plus être atteint par ce biais) est impossible: l’ancienne valeur est conservée. Pour retirer la valeur sans aller trop farfouiller dans le code du plugin (je ne m’y suis d’ailleurs pas amusé), il vous est possible d’aller retirer la valeur en base de données.
De manière générale, si vous désirez aller jeter un oeil du côté de votre base de données pour savoir où sont stockés vos champs personnalisés, vous pouvez vous diriger du côté de la table wp_usermeta qui contient les valeurs de vos champs.
Sources & inspiration pour cet article
Pour cet article, je me suis essentiellement inspiré des articles suivants: