Ajouter une bio auteur à la fin de chaque article

Si vous êtes déjà BLOGUEUR, ceci devrait vous intéresser !*

*(autrement passer la vidéo pour accéder à l’article)

Très utile lorsque l’on à plusieurs auteurs/contributeur, ajouter une bio auteur en bas de chaque article peut être une tâche « bien vue » à mettre en place pour le confort de vos lecteurs.

En effet, d’une part c’est la moindre des choses que de rendre la pareille à celui qui, mine de rien, travaille régulièrement pour votre blog, en agrémentant par exemple cette bio de différents liens sociaux et lien vers son blog s’il en a un (ce qui semble normal), mais c’est aussi reconnaître la paternité de son article, décrire un peu de son parcours et ainsi savoir ce qui rend intéressant sa participation dans le blog.

En quelque sorte un échange de bon procédé et une présentation utile pour vos lecteurs habituels et les nouveaux venus.

Attention, cependant si vous n’êtes pas à l’aise avec la manipulation de fichier et de code cela risque d’être hasardeux et risqué.

En fait et pour être honnête avec vous, cet article voit le jour grâce à Lucile du blog »Efflorescence Culturelle » qui m’a soumis sa difficulté, malgré les nombreux tuto présent sur le net, d’arrivé à ajouter une bio auteur en fin d’article et cela pour les différents auteurs qui y participent …. Une idée judicieuse !

Faire un petit tour sur « Efflorescence Culturelle«

À noter , cela n’aura aucun rapport avec la balise rel auhtor dont on a expliqué le fonctionnement et l’intérêt ici

« Gagner de la visibilité et installer le rich-snippet » et qui figure sur les résultats de google.

Voici donc plusieurs méthodes pour ajouter une bio auteur à la fin de chacun de vos articles, chacune ayant ses avantages et/ou inconvénients, nous ne détaillerons que la configuration des scripts sur différents fichiers dans cet article.

Ajouter une bio auteur avec un plugin

C’est à cela qu’on pense en premier, effectivement c’est le réflexe n°1, car le but recherché et d’obtenir un résultat facile et pas prise de tête. Utilisé principalement dans les blogs multi-auteurs, il rattache à chaque fois l’auteur au post automatiquement sans avoir à rajouter de script nulle part.

Il en existe des tas, nous en verrons quelques uns dans un prochain article.

Les scripts

Voilà différents scripts pour obtenir une bio, c’est un peu plus compliqué, mais c’est la solution qu’on essaiera de choisir plutôt qu’un plugin !

Inconvénients

le script étant dans un fichier de votre thème, si vous changez de thème vous devrez recommencer l’opération.
nécessite d’avoir une sauvegarde des fichiers, car il y a un risque de plantage !(j’ai indiqué un risque, cela ne veut pas dire que votre blog va planter ;-)

Deux modes possible

Par le biais du fichier function.php de votre thème
Par le biais du fichier single .php de votre thème

Pour que tout cela fonctionne correctement, vous devez remplir attentivement la partie utilisateur de chaque auteur, surtout la zone appelée AIM (mettez le lien que vous voulez)

Rendez vous donc dans la partie tous les utilisateurs, sélectionnez un auteur est compléter comme ci-dessous.

Function.php

En fait, il y aura 3 scripts à installer

Le premier script à installer dans le fichier function.php pour ajouter la bio auteur dans le thème.

// Author Bio

function author_excerpt (){

$word_limit = 20; // limite le nombre de mots

$more_txt = ‘En savoir plus sur:’; // Texte du lien vers la page de l’auteur

$txt_end = ‘…’; // Fin du texte

$authorName = get_the_author();

$authorImage = get_avatar( get_the_author_meta( ‘ID’ ), 64 );

$authorUrl = get_author_posts_url( get_the_author_meta(‘ID’));

$authorDescriptionShort = ‘<div>’.$authorImage.’</div>’ .wp_trim_words(strip_tags(get_the_author_meta(‘description’)), $word_limit, $txt_end.’<br />’.$more_txt.’ <a href= »‘.$authorUrl.’ »>’.$authorName.’</a>’);

return $authorDescriptionShort;

}

Le détail du code

Pour le code voici ce qu’il est important de savoir :

$word_limit = 20 => 20 mots maximum
$authorImage = get_avatar( get_the_author_meta( ‘ID’ ), 64 => taille de l’avatar 64 pixelsx64pixels
$word_limit, $txt_end.’<br />’.$more_txt.’ <a href= »‘.$authorUrl.’ »>’.$authorName.’</a>’);

Cette ligne indique le lien vers ce que vous voulez, ici vers mon autre blog

$word_limit, $txt_end.’<br />’.$more_txt.’ <aref= »http://www.franckwylliams.com »>>’.$authorName.’</a>’);

Mais ou sont donc ces fichiers ?

Si vous ne savez pas comment trouver ses fichiers, voici la procédure la plus simple pour y accéder.

Dans votre tableau de bord vous irez dans l’onglet Utilisateur puis « éditeur »

Ce qui vous amènera sur une nouvelle fenêtre listant tous les fichiers de votre thème.

Sélectionnez le fichier function.php en cliquant dessus !

Voila, vous avez à présent accès au fichier

Comment modifier le code du fichier function.php

Une fois que vous aurez ouvert ce fichier, rendez-vous en bas du fichier grâce la barre de déplacement sur le coté, et cliquez derrière la dernière parenthèse pour y mettre votre curseur, faites deux fois « Entrée » avec votre clavier.(on descends de 2 lignes)

Et copier-coller le 1^er script, faites mettre à jour le fichier ( pour enregistrer)

Le deuxième script celui qui « installe » le script dans votre article

<?php if (function_exists(‘author_excerpt’)){echo author_excerpt();} ?>

Celui-ci va devoir être mis dans le fichier “loop-single.php”

Même procédure que pour le fichier function.php , aller en bas du fichier, mais la dernière information risque de se finir par > plutôt qu’une parenthèse.

Copier-coller le code et enregistrez.(« mettre a jour le fichier »)

Vous pouvez vous rendre sur un de vos articles pour voir si la fonction est appelée, cela doit donner une chose dans ce genre.

C’est assez moche et cela ressemble pas à grand-chose, il va donc falloir formater tout cela avec du CSS, ce qui nous amène au 3e code.

Un script CSS pour rendre cela plus agréable visuellement

.author-b img{
float: left;
margin: 0 4px 4px 4px;
border: solid 3px #CCC;
}

Même punition, mais cette fois-ci dans le fichier style .css

Pensez à « Mettre à jour le fichier » pour valider la modification

Il faudra sans doute en fonction de votre thème modifier ces réglages, pour le blog de démo mes réglages sont margin: 0 10px 40px 70px;

Le 10 px étant l’écartement entre l’avatar et le texte, le 70px étant l’écartement de l’avatar avec le bord de la page.

Voilà le résultat final

Code trouvé sur le blog de Frédérique Lebéon du blog Naxailis

Ce qui peut arriver …. Planté !

Pas de panique, car vous pouvez avoir ce style de message, vous indiquant que vous avez une erreur dans le fichier que vous venez de modifier.

Dans ce cas vous n’avez plus accès au tableau de bord et vous retombez à chaque requête sur l’administration de votre blog (URL de votre blog /wp-admin) sur cette erreur.

La cata … quoi !

Filezilla vous connaissez, j’espère pour vous, sinon vous êtes bon pour m’envoyer un mail !

Vous devrez allez récupérer le fichier et le remettre à l’identique. Si vous êtes sur une installation locale, une simple ouverture de votre fichier avec Noteapd, corrigez votre fichier, enregistrez le et tout devrait rentrer dans l’ordre.

Single.php

Voilà le script à coller de la même manière que précédemment, mais dans le fichier single.php. Il est conseillé de le mettre après la ligne <?php the content( », »); ? > .

Pour ceux qui n’ont rien de tout ça dans ce fichier, il faudra faire des essais, personnellement et vu mon thème « origin », je l’ai mis derrière <.php get_template_part (‘loop’, ’single’); ?> pour que cela fonctionne.

<div id="author-meta"><h4>A propos de l&apos;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 &eacute;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()); ?>">&Eacute;crivez-lui</a>
<img src="URL DE VOTRE IMAGE"/><a href="<?php the_author_aim(); ?>">Suivez-moi sur Twitter !</a>
</div>
</div>

et celui-là pour la mise en forme dans le fichier Style.css.

#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;
}

On obtient cela, ce qui est pas si mal

Le détail du code

Dans le single.php

<p><?php the_author_posts_link(); ?> a &eacute;crit <?php the_author_posts(); ?> articles sur <a href="http://www.protuts.net/">Protuts.net</a>.</p>

On modifiera pour ajouter l’adresse (derrière href=en gras )de son blog et le nom de son blog (entre les ><)

<p><?php the_author_posts_link(); ?> a écrit <?php the_author_posts(); ?> articles sur <a href= »http://www.366jourspour.co/ »>366jours</a>.</p>

Vous devrez au préalable avoir les liens de deux images que vous voulez mettre pour accompagner la description.

On indiquera ici une image (le lien ci-dessous qui est en gras et celui de la plume) qui correspond à « Écrivez-lui » (vous pouvez changer l’intitulé par ce que vous voulez, contactez-moi, j’aime vous lire, etc…), mais toujours en rapport avec une adresse mail

<div id= »author-info »><img src= »http://127.0.0.1:4001/wordpress/wp-content/uploads/2014/05/plume.png »/><a href= »mailto:<?php echo antispambot(get_the_author_email()); ?> »>Écrivez-lui</a>

Idem en gras on indique une adresse d’image (le papillon) qui correspond avec l’invitation ici c’est se connecter à Google +

<img src= »http://127.0.0.1:4001/wordpress/wp-content/uploads/2014/05/papillon« /><a href= »<?php the_author_aim(); ?> »>suivez-moi sur G+ !</a>

Pour le CSS

Pour changer la couleur de fond

background:#F3F8FA none repeat scroll 0 0; l’indication #F3F8FA qui correspond au bleu ciel

on donnera une autre couleur au choix .(si vous ne savez pas de quoi je parle allez lire « Trouver le code couleur d’une image« )

après toutes les modifs cela donne ceci :

Code recueilli sur le blog d’Aurélien Denis -WP channel

Ajouter une bio auteur sur wordpress.com

C’est finalement le cas d’Efflorescenceculturelle, qui ont en fait le choix de prendre un nom de domaine personnel pour le faire héberger chez wordpress.com.

Il résulte un problème, celui de ne pas avoir accès à l’éditeur de fichier ce qui rends l’installation de scripts impossible.

La solution sera d’incorporer à chaque article une image qui fera illusion, mais qui jouera parfaitement sont rôle => informer vos lecteurs sur l’auteur.

Comment ajouter une bio auteur sur worpdress.com avec une image

Simple, efficace mais assez rebutant au démarrage (car il faudra que chaque auteur y pense), l’ajout d’une bio auteur en image est assez facile à réaliser.

Il faudra déterminer en premier lieu, la largeur maxi que l’on pourra utiliser pour cette image de bio, si vous ne savez pas comment faire c’est expliqué ici « Dans quelle taille mettre les images de mon blog « ou bien accéder à cette formation, qui vous l’explique aussi, ainsi que bien d’autres choses « Optimiser la vitesse d’affichage de votre blog «

Une fois les dimensions obtenus, il suffira de se rendre dans un logiciel d’édition d’image, PhotoFiltre ou Gimp par exemple et réaliser votre bio*, ce qui donne cela :

*Moyennant une petite rétribution je peux vous la faire et vous installer sur votre blog, faites-en la demande.

Il suffit ensuite de l’insérer dans chaque article à chaque fois dés que c’est nécessaire, en faisant ajouter un média comme vous le faites habituellement pour ajouter une image.

La seule différence, pour une question de commodité, sera qu’il faudra allez chercher dans votre article le code texte pour ne pas avoir à chaque fois à chercher la bonne image qui correspond à l’auteur (c’est expliqué plus en détail ensuite).

Pas de panique, c’est simple, ajoutez des @@@@@@ avant et après l’image comme ci-dessous :

Cliquez sur l’onglet « Texte » de votre article, ce qui vous amènera à cela :

Entre la série des 2 arobases, vous aurez un code qu’il faudra copier, correspondant à l’image de votre bio. Il sera ensuite assez simple de faire un tableau qui récapitule toutes les images correspondant à chaque auteur.

Chaque fois qu’un auteur fera un article, il recopiera dans l’onglet texte le code afin que l’image apparaisse (elle apparaîtra d’ailleurs dès que l’on repassera en mode « Visuel »).

Le résultat final

Voilà à présent vous n’avez plus de raisons pour ne pas présenter vos contributeurs sur votre blog … merci d’indiquer dans les commentaires si vous avez eu quelques souci pour intégrer ces codes et comment vous avez fait (pensez à indiquer le thème) Merci !

Amicalement

franckwylliams