Il est fortement recommandé (indispensable ?) de créer un thème enfant WordPress, car, tôt ou tard, vous serez amené(e) à personnaliser votre thème.Peut-être qu’aujourd'hui vous n’en avez pas l’intention ou que vous n’avez aucune idée de comment personnaliser un thème, lui ajouter des fonctions, mais vous verrez, un jour ou l'autre, vous y viendrez.Mais sans thème enfant, toutes vos modifications seront perdues lors de la prochaine mise à jour de Divi et vous devrez tout recommencer.
Extension WordPress pour générer un thème enfant Divi.
Reskator Il est fortement recommandé (indispensable ?) de créer un thème enfant WordPress, car, tôt ou tard, vous serez amené(e) à personnaliser votre thème.
Peut-être qu’aujourd'hui vous n’en avez pas l’intention ou que vous n’avez aucune idée de comment personnaliser un thème, mais vous verrez, un jour ou l'autre, vous y viendrez.
Mais sans thème enfant, toutes vos modifications seront perdues lors de la prochaine mise à jour de Divi et vous devrez tout recommencer.
ATP Divi Child est un plugin spécifiquement dédié au thème Divi et réalisé pour vous 🙂
D’autres fonctionnalités viendront dans les prochaines versions. N'hésitez pas à soumettre vos idées 😉
Cliquez sur le bouton ci-dessous pour télécharger le fichier .zip du plugin ATP Divi Child.
ATP ayant unilatéralement rompu nos relations, ce plugin (qui leur faisait de la pub) n’est plus disponible et NE DOIT PLUS être distribué.
Nous vous proposerons prochainement une autre version, sans pub, et plus complète…
Et soyez sympa, ne vous contentez pas de télécharger le plugin ; laissez-moi un petit commentaire : c’est toujours motivant pour, qui sait, vous proposer d’autres plugins 🙂
Vous souhaitez me remercier pour le temps passé à concevoir ce plugin ?
Votre don via Paypal ou par carte bancaire est le bienvenu !
Comment ajouter l’avatar de l’auteur sur un blog Divi sans plugin ? Je vous explique comment le faire en moins de dix minutes. L’avatar s’affichera sur la page de blog (en mode grille ou en mode pleine largeur), ainsi que sur les pages d’articles. Vous pourrez indiquer une taille d’avatar différente pour le blog et pour les articles.
On va manipuler des fichiers sur le site. Rien de compliqué, mais il est toujours préférable de travailler avec un filet de sécurité : assurez-vous d’avoir une sauvegarde récente, sinon, faites-en une.
On commence par ajouter 2 fichiers dans le dossier du thème enfant.
Via le FTP, copiez (copier, pas déplacer !) dans le dossier de votre thème enfant les fichiers suivants :
single.php et copiez-le dans le dossier de votre thème enfant ;includes, puis le dossier builder, puis le dossier module. Trouvez le fichier Blog.php et copiez-le dans le dossier de votre thème enfant.Désormais, le contenu de votre dossier thème enfant devrait ressembler à ceci :
Maintenant, nous allons modifier ces fichiers afin d’y ajouter l’avatar de l’auteur.
Pour information, les numéros de ligne indiqués se réfèrent à la version en cours au moment de la rédaction de ce tutoriel (la version 3.17.6). Ils peuvent évoluer au fil des mises à jour de Divi.
Dans le dossier du thème enfant, ouvrir le fichier single.php et y rechercher la ligne contenant :
et_divi_post_meta();
Au moment où j’écris cet article, il s’agit de la ligne 42.
Au-dessus de cette ligne, ajoutez le code suivant :
echo '<div class="phf_avatar_single">' . get_avatar( get_the_author_meta( 'ID' ) );
Et en dessous de la ligne recherchée, ajoutez la ligne suivante :
echo '<div>';
Vérifiez que vous obtenez ceci :
Enregistrez et fermez le fichier single.php.
Ouvrez maintenant le fichier Blog.php de votre thème enfant.
Au tout début du fichier, remplacez la ligne :
class ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased (
par
class RRPhF_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased (
Ensuite, allez tout en bas, à la fin du fichier, et remplacez la ligne :
new ET_Builder_Module_Blog();
par :
new RRPhF_Builder_Module_Blog();
Toujours dans le fichier Blog.php, recherchez la ligne contenant :
$author = 'on' === $show_author
Au-dessus de cette ligne, ajoutez le code suivant :
echo '<div class="phf_avatar_blog">' . get_avatar(get_the_author_meta('ID') );
Vérifiez que vous obtenez ceci :
Ceci fait, recherchez la ligne contenant :
et_core_esc_previously( $comments )
Attention, au-dessous de cette ligne, placez le curseur après ) ; et insérez une nouvelle ligne afin d’y ajouter le code suivant :
echo '</div>';
Enregistrez et fermez le fichier Blog.php
Maintenant, nous allons indiquer à WordPress qu’il doit utiliser notre version du fichier Blog.php. Pour cela, ouvrez le fichier functions.php de votre thème enfant afin d’y ajouter le code suivant :
/* <====================================> */
/* <== Add author avatar on divi blog ==> */
function rrphf_add_author_avatar_to_divi_blog() {
if ( ! class_exists('ET_Builder_Module') ) {
return;
}
remove_shortcode( 'et_pb_blog' );
get_template_part( 'Blog' );
}
add_action( 'wp', 'rrphf_add_author_avatar_to_divi_blog', 9999 );
/* <====================================> */
Enregistrez et fermez le fichier functions.php
L’avatar de l’auteur est désormais en place. Mais si vous testez le résultat, maintenant, vous serez probablement déçu par son apparence, sa disposition.
Nous allons régler l’aspect esthétique. Pour cela, ouvrez le fichier style.css de votre thème enfant afin d’ajouter le code suivant :
/* >====================================> */
/* --- Author Avatar on Divi Blog --- */
.phf_avatar_blog, .phf_avatar_single {
display: table;
width: 100%;
margin-bottom: 15px;
}
.phf_avatar_blog .avatar, .phf_avatar_single .avatar {
float: left;
margin-right: 15px;
border-radius: 50%;
border: 1px solid #ddd;
}
.phf_avatar_blog .avatar {
width: 48px; /* <-- Taille de l'avatar sur la page du blog */
}
.phf_avatar_single .avatar {
width: 64px; /* <-- Taille de l'avatar sur les pages d'article */
}
/* --- End Author Avatar on Divi Blog --- */
/* <====================================< */
La taille des avatars apparaissant sur la page de blog et ceux apparaissant sur la page des articles peut être facilement modifiée (cf. les 2 lignes mises en évidence et leur commentaires).
L'égo des auteurs de votre blog sera flatté et vos lecteurs identifieront bien plus rapidement l’auteur de chaque article.
Pour rappel : ce tuto fonctionne aussi bien pour une présentation du blog en grille ou en pleine largeur et vous permet d’indiquer une taille différente pour le blog et pour les articles.