Dans le 3e chapitre de ce tutoriel je vous montre comment créer en CSS un titre animé avec le fichier SVG en background que nous avons réalisé précédemment. Vous saurez comment j’ai réalisé l’en-tête animé de la page d’accueil de Dream. Il s’agit d’un apprentissage pas…
Dans ce tutoriel je vais vous expliquer comment insérer une bio d’auteur sur WordPress (un article) sans plugin et gratuitement. Les avantages de cette méthode sont :
- Pas besoin d’installer un nouveau plugin.
- Gratuit.
- Consistant et sans mises à jour (ce n’est pas non plus une vérité absolue mais il se passera probablement beaucoup de choses avant que ce soit un problème).
- Vous êtes autonome.
C’est tentant de chercher un plugin sur Google pour son site réalisé avec le CMS WordPress. Il y en a tellement qu’on trouve quasiment toujours son bonheur et gratuitement en plus. Seulement des fois on ne trouve pas ce que l’on cherche. Soit trop amateur, soit pas assez mis à jour, soit trop compliqué pour l’utilité réelle de notre cas, soit payant…
J’avais fait le tour des plugins pour installer une bio d’auteur sur WordPress, mais je n’ai rien trouvé de satisfaisant pour mon blog. Je cherchais quelque chose d’épuré, simple et propre. Pour un bout de code, ça ne pouvait pas être si compliqué, donc j’ai fait une recherche sur le Codex de WordPress et finalement j’ai même trouvé un article qui explique exactement comment faire (anglais). Je ne prends que le meilleur pour l’expliquer plus en détail et rajouter également quelques astuces CSS pour donner un aspect propre avec votre feuille de style.
1. S’assurer que notre thème est en Child.
Nous allons modifier un fichier php. Pour cela il faut d’abord s’assurer que le thème de notre site WordPress est en mode « Child », c’est à dire, qu’il est un sous-thème rattaché au principal. Cela permet de modifier les sources du thème sans danger pour l’intégrité de votre site, et de mettre à jour votre thème sans écraser les customisations faites par vous.
2. Télécharger le fichier original single.php
On se connecte sur notre serveur pour télécharger le fichier single.php qui se trouve dans le répertoire principal du thème parent de notre site. Il est facile de le faire avec un logiciel de FTP. Filezilla est très connu, mon préféré est WinSCP :
Quand vous l’avez localisé, téléchargez-le sur votre ordinateur. Il s’agit d’une opération simple mais il faut faire très attention à bien la réaliser !
3. Éditer le fichier single.php en local
On ouvre ensuite un logiciel d’édition de fichiers comme NotePad++ sous Windows, gratuit et open source. Mon choix personnel est celui de FlashDevelop, qui est aussi gratuit et open source.
Nous allons chercher la partie du fichier single.php qui nous intéresse. Typiquement, il faudra que ce soit après le contenu de l’article mais avant les commentaires. Voici un exemple de la fin d’un fichier single.php appartenant à un thème parent :
<section id="content" role="main">
<div class="container">
<?php if ($heading_title && get_the_title()) : ?>
<h2 class="page-title"><?php the_title(); ?></h2>
<?php endif;
if (is_attachment() && wp_attachment_is_image($post->id)) { ?>
<div class="featured-image"><figure class="wp-caption"><?php echo wp_get_attachment_image($post->id, "full"); ?></figure></div>
<?php
} else {
the_content();
wp_link_pages();
}
if ( ! post_password_required() ) : ?>
<div class="sep before-post-meta-info"></div>
<p class="post-meta-info">
<span><em class="icon-clock"></em> <?php _e('Posted on', 'mag'); echo ' ' . get_the_time(get_option('date_format')); ?></span>
<span><em class="icon-user"></em> <?php _e('By', 'mag'); ?> <?php the_author_posts_link(); ?></span>
<?php $post_categories = get_the_category_list(__(', ', 'mag')); if ( is_single() && $post_categories ) : ?> <br>
<span><em class="icon-category"></em> <?php _e('Categories: ', 'mag'); ?> <?php echo $post_categories; ?></span>
<?php endif; ?><?php if ( is_single() && get_the_tags() ) : ?> <?php if ( ! $post_categories) echo '<br>'; ?>
<span><em class="icon-tag"></em> <?php the_tags(__('Tags: ', 'mag'), __(', ', 'mag')); ?></span><?php endif; ?></p>
<?php comments_template(); ?>
<?php endif; ?>
</div>
</section>
<?php endif;
get_footer(); Votre fichier single.php ne sera pas exactement pareil, ça dépendra de votre thème. Mais vous pouvez trouver facilement l’endroit logique où coller le nouveau code, tout en veillant à ne pas casser le code existant (faire attention à cette opération).
Dans le code que je vous présente ci-dessus, je vous montre la partie qui nous intéresse avec l’endroit où nous allons copier le nouveau code (ligne 8) :
<p class="post-meta-info">
<span><em class="icon-clock"></em> <?php _e('Posted on', 'mag'); echo ' ' . get_the_time(get_option('date_format')); ?></span>
<span><em class="icon-user"></em> <?php _e('By', 'mag'); ?> <?php the_author_posts_link(); ?></span>
<?php $post_categories = get_the_category_list(__(', ', 'mag')); if ( is_single() && $post_categories ) : ?> <br>
<span><em class="icon-category"></em> <?php _e('Categories: ', 'mag'); ?> <?php echo $post_categories; ?></span>
<?php endif; ?><?php if ( is_single() && get_the_tags() ) : ?> <?php if ( ! $post_categories) echo '<br>'; ?>
<span><em class="icon-tag"></em> <?php the_tags(__('Tags: ', 'mag'), __(', ', 'mag')); ?></span><?php endif; ?></p>
COLLER LE CODE ICI
<?php comments_template(); ?>
<?php endif; ?>
J’ai identifié le <p class="post-meta-info"> dans la ligne 1 qui montre les infos de publication après le contenu. Il est fermé par le </p>. Après, le <?php comments_template(); ?> va afficher les commentaires de l’article. Je colle donc le code du bio de l’auteur dans la ligne 8.
Voici le code à copier et coller. Il est issu de cet article en anglais qui s’adresse à des utilisateurs de leur thème et je l’ai un peu simplifié :
<?php
// Get Author Data
$author = get_the_author();
$author_description = get_the_author_meta( 'description' );
$author_url = esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );
$author_avatar = get_avatar( get_the_author_meta( 'user_email' ), 120 );
// Only display if author has a description
if ( $author_description ) : ?>
<div class="author-info">
<h4 class="heading"><span>Article rédigé par</span> <?php printf( __( '%s', 'text_domain' ), $author ); ?></h4>
<div class="author-info-inner">
<?php if ( $author_avatar ) { ?>
<div class="author-avatar">
<a href="<?php echo $author_url; ?>" rel="author">
<?php echo $author_avatar; ?>
</a>
</div><!-- .author-avatar -->
<?php } ?>
<div class="author-description">
<p><?php echo $author_description; ?></p>
</div><!-- .author-description -->
</div><!-- .author-info-inner -->
</div><!-- .author-info -->
<?php endif; ?>
Le 120 correspond à la taille de l’avatar (120×120 pixels). Vous pouvez la changer si vous voulez. La taille par défaut est 96.
Le résultat final du code le suivant :
<section id="content" role="main">
<div class="container">
<div class="modern-full col grid9" id="post-list-modern">
<?php if ($heading_title && get_the_title()) : ?>
<h2 class="page-title"><?php the_title(); ?></h2>
<?php endif;
if (is_attachment() && wp_attachment_is_image($post->id)) { ?>
<div class="featured-image"><figure class="wp-caption"><?php echo wp_get_attachment_image($post->id, "full"); ?></figure></div>
<?php
} else {
the_content();
wp_link_pages();
}
if ( ! post_password_required() ) : ?>
<div class="sep before-post-meta-info"></div>
<p class="post-meta-info">
<span><em class="icon-clock"></em> <?php _e('Posted on', 'mag'); echo ' ' . get_the_time(get_option('date_format')); ?></span>
<?php $post_categories = get_the_category_list(__(', ', 'mag')); if ( is_single() && $post_categories ) : ?> <br>
<span><em class="icon-category"></em> <?php _e('Categories: ', 'mag'); ?> <?php echo $post_categories; ?></span><br><?php endif; ?><?php if ( is_single() && get_the_tags() ) : ?> <?php if ( ! $post_categories) echo '<br>'; ?>
<span><em class="icon-tag"></em> <?php the_tags(__('Tags: ', 'mag'), __(', ', 'mag')); ?></span><?php endif; ?>
</p>
<?php
// Get Author Data
$author = get_the_author();
$author_description = get_the_author_meta( 'description' );
$author_url = esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );
$author_avatar = get_avatar( get_the_author_meta( 'user_email' ), 120 );
// Only display if author has a description
if ( $author_description ) : ?>
<div class="author-info">
<h4 class="heading"><span>Article rédigé par</span> <?php printf( __( '%s', 'text_domain' ), $author ); ?></h4>
<div class="author-info-inner">
<?php if ( $author_avatar ) { ?>
<div class="author-avatar">
<a href="<?php echo $author_url; ?>" rel="author">
<?php echo $author_avatar; ?>
</a>
</div><!-- .author-avatar -->
<?php } ?>
<div class="author-description">
<p><?php echo $author_description; ?></p>
</div><!-- .author-description -->
</div><!-- .author-info-inner -->
</div><!-- .author-info -->
<?php endif; ?>
<?php comments_template(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
</section>
<?php endif;
get_footer();
4. Éditer le fichier CSS
Nous avons le contenu, maintenant il faut travailler la forme. Pour cela, on ouvre le fichier CSS du thème.
Si vous n’avez pas un CSS dans le répertoire child de votre thème, copiez le nom du CSS principal dans le répertoire du thème et créez un nouveau fichier avec le même nom. Celui-ci sera placé dans le répertoire du child. Par exemple, si le CSS de votre thème s’appelle style.css et il se trouve dans le répertoire principal, vous allez créer un nouveau fichier style.css et le copier dans le repertoire child du thème parent, au même répertoire.
Les contenus du style.css du child ne remplaceront pas ceux du style.css du parent. Il se rajoutent en supplément et peuvent écraser l’original seulement si vous écrivez le CSS pour ce faire bien entendu.
Voici un style très simple pour bien habiller votre toute nouvelle bio d’auteur :
/** about the author **/
.author-info-inner {
padding : 20px;
background-color : #efefef;
}
.author-avatar {
position : absolute;
}
.author-description {
margin-left : 140px;
}
La petite touche responsive qui va bien (n’oubliez pas de mettre ce code à la fin ou à l’intégrer à l’existant !) :
@media (max-width: 370px) {
.author-avatar {
position : static;
text-align : center;
margin-bottom : 15px;
}
.author-description {
margin-left : 0;
}
.author-info-inner {
padding : 15px;
}
}
5 . Mettre en ligne
C’est le moment de mettre en ligne. Il faut donc reprendre votre logiciel de FTP pour ce faire. Insérez vos nouveaux fichiers (single.php et style.css) dans le répertoire child . Attention, jamais le parent. Il est sacré !
Rafraichissez votre article de blog pour voir le résultat. Vous verrez votre bio d’auteur sur WordPress impeccable et élégante en fin de vos articles de blog.
6. Éditer l’utilisateur et créer un compte Gravatar
Dans le backoffice de WordPress, cliquez sur Utilisateurs > Modifier l’utilisateur, remplissez les champs Adresse de contact et Renseignements biographiques et enregistrez les changements.
Pour associer l’image de l’avatar, votre adresse email est nécessaire. Bizarre ? Oui, mais il y a une logique.
Créez un compte sur Gravatar. Ce service automatique de Worpdress.com associe votre image à votre adresse email de manière globale. Lorsque vous commentez dans un blog et que vous renseignez votre adresse email, votre image d’avatar sera automatiquement affichée. Si vous avez déjà un compte chez WordPress.com, ça ira encore plus vite.
Dans ce tutoriel je vous ai expliqué comment insérer manuellement dans votre thème child le code qui affichera la bio d’auteur en fin d’article. J’espère qu’il sera utile pour votre blog comme il l’a été pour le mien.
Et vous ?
Avez-vous d’autres astuces simples et efficaces comme celle-ci ? Avez-vous d’autres conseils de customisation de la bio d’auteur sur un article de blog de WordPress ?
Français 
English (UK)