Pr\u00eat ? C\u2019est parti !<\/h2>\n\n\n\n
On commence par ajouter 2 fichiers dans le dossier du th\u00e8me enfant.<\/p>\n\n\n\n
Copier 2 fichiers<\/h3>\n\n\n\n
Via le FTP, copiez<\/strong> (copier, pas d\u00e9placer !)<\/em> dans le dossier de votre th\u00e8me enfant les fichiers suivants :<\/p>\n\n\n\n D\u00e9sormais, le contenu de votre dossier th\u00e8me enfant devrait ressembler \u00e0 ceci :<\/p>\n\n\n\n Maintenant, nous allons modifier ces fichiers afin d\u2019y ajouter l\u2019avatar de l\u2019auteur. Dans le dossier du th\u00e8me enfant, ouvrir le fichier single.php et y rechercher la ligne contenant :<\/p>\n\n\n\n Au moment o\u00f9 j\u2019\u00e9cris cet article, il s\u2019agit de la ligne 42.<\/p>\n\n\n\n Au-dessus <\/strong>de cette ligne, ajoutez le code suivant :<\/p>\n\n\n\n Et en dessous<\/strong> de la ligne recherch\u00e9e, ajoutez la ligne suivante :<\/p>\n\n\n\n V\u00e9rifiez que vous obtenez ceci :<\/p>\n\n\n\n Enregistrez et fermez le fichier Ouvrez maintenant le fichier par<\/p>\n\n\n\n Ensuite, allez tout en bas, \u00e0 la fin du fichier, et remplacez la ligne :<\/p>\n\n\n\n par :<\/p>\n\n\n\n Toujours dans le fichier Au-dessus de cette ligne, ajoutez le code suivant :<\/p>\n\n\n\n V\u00e9rifiez que vous obtenez ceci :<\/p>\n\n\n\n Ceci fait, recherchez la ligne contenant :<\/p>\n\n\n\n Attention, au-dessous<\/strong> de cette ligne, placez le curseur apr\u00e8s<\/strong> Enregistrez et fermez le fichier Maintenant, nous allons indiquer \u00e0 WordPress qu\u2019il doit utiliser notre version du fichier Enregistrez et fermez le fichier L\u2019avatar de l\u2019auteur est d\u00e9sormais en place. Mais si vous testez le r\u00e9sultat, maintenant, vous serez probablement d\u00e9\u00e7u par son apparence, sa disposition. La taille des avatars apparaissant sur la page de blog et ceux apparaissant sur la page des articles peut \u00eatre facilement modifi\u00e9e (cf. les 2 lignes mises en \u00e9vidence et leur commentaires).<\/p>\n\n\n\n L'\u00e9go des auteurs de votre blog sera flatt\u00e9 et vos lecteurs identifieront bien plus rapidement l\u2019auteur de chaque article.<\/p>\n\n\n\n Pour rappel\u00a0: ce tuto fonctionne aussi bien pour une pr\u00e9sentation du blog en grille ou en pleine largeur et vous permet d\u2019indiquer une taille diff\u00e9rente pour le blog et pour les articles.<\/p>\n\n\n\n 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\u00e9rente pour le blog et pour les articles.<\/p>\n","protected":false},"author":3,"featured_media":45357,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2079","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"featured_image_urls_v2":{"full":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog.png",758,350,false],"thumbnail":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog-150x150.png",150,150,true],"medium":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog-300x139.png",300,139,true],"medium_large":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog.png",758,350,false],"large":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog.png",758,350,false],"1536x1536":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog.png",758,350,false],"2048x2048":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog.png",758,350,false],"acf-gallery":["https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2020\/12\/Add-autho-avatar-on-divi-blog-300x300.png",300,300,true]},"post_excerpt_stackable_v2":" 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\u00e9rente pour le blog et pour les articles.<\/p>\n","category_list_v2":"Divi<\/a>","author_info_v2":{"name":"Philippe Reskator","url":"https:\/\/dev9.reskator.fr\/cms\/author\/philippe\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/posts\/2079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/comments?post=2079"}],"version-history":[{"count":0,"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/posts\/2079\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/media\/45357"}],"wp:attachment":[{"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/media?parent=2079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/categories?post=2079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev9.reskator.fr\/cms\/wp-json\/wp\/v2\/tags?post=2079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}single.php<\/code> et copiez-le dans le dossier de votre th\u00e8me enfant ;<\/li>includes<\/code>, puis le dossier builder<\/code>, puis le dossier module<\/code>. Trouvez le fichier Blog.php<\/code> et copiez-le dans le dossier de votre th\u00e8me enfant.<\/li><\/ul>\n\n\n\n![\"Fichiers](\"https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2018\/11\/add-author-avatar-to-divi-blog-1.png\"){kind=avatar}
Modifier le fichier single.php<\/h3>\n\n\n\n
Pour information, les num\u00e9ros de ligne indiqu\u00e9s se r\u00e9f\u00e8rent \u00e0 la version en cours au moment de la r\u00e9daction de ce tutoriel (la version 3.17.6). Ils peuvent \u00e9voluer au fil des mises \u00e0 jour de Divi.<\/p>\n\n\n\net_divi_post_meta();<\/pre>\n\n\n\n
echo '<div class=\"phf_avatar_single\">' . get_avatar( get_the_author_meta( 'ID' ) );<\/pre>\n\n\n\n
echo '<div>';<\/pre>\n\n\n\n
![\"Le](\"https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2018\/11\/add-author-avatar-to-divi-blog-2.png\"){kind=avatar}
single.php<\/code>.<\/p>\n\n\n\nModifier le fichier Blog.php<\/h3>\n\n\n\n
Blog.php<\/code> de votre th\u00e8me enfant.
Au tout d\u00e9but du fichier, remplacez la ligne :<\/p>\n\n\n\nclass ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased (<\/pre>\n\n\n\n
class RRPhF_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased (<\/pre>\n\n\n\n
new ET_Builder_Module_Blog();<\/pre>\n\n\n\n
new RRPhF_Builder_Module_Blog();<\/pre>\n\n\n\n
Blog.php<\/code>, recherchez la ligne contenant :<\/p>\n\n\n\n$author = 'on' === $show_author<\/pre>\n\n\n\n
echo '<div class=\"phf_avatar_blog\">' . get_avatar(get_the_author_meta('ID') );<\/pre>\n\n\n\n![\"Le](\"https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2018\/11\/add-author-avatar-to-divi-blog-3.png\"){kind=avatar}
et_core_esc_previously( $comments )<\/pre>\n\n\n\n
) ;<\/code> et ins\u00e9rez une nouvelle ligne afin d\u2019y ajouter le code suivant :<\/p>\n\n\n\necho '<\/div>';<\/pre>\n\n\n\n
![\"Le](\"https:\/\/dev9.reskator.fr\/cms\/wp-content\/uploads\/2018\/11\/add-author-avatar-to-divi-blog-4.png\"){kind=avatar}
Blog.php<\/code><\/p>\n\n\n\nModifier le fichier functions.php<\/h3>\n\n\n\n
Blog.php<\/code>. Pour cela, ouvrez le fichier functions.php<\/code> de votre th\u00e8me enfant afin d\u2019y ajouter le code suivant :<\/p>\n\n\n\n\/* <====================================> *\/\n\/* <== Add author avatar on divi blog ==> *\/\nfunction rrphf_add_author_avatar_to_divi_blog() {\n if ( ! class_exists('ET_Builder_Module') ) {\n return;\n }\n remove_shortcode( 'et_pb_blog' );\n get_template_part( 'Blog' );\n}\nadd_action( 'wp', 'rrphf_add_author_avatar_to_divi_blog', 9999 );\n\/* <====================================> *\/<\/pre>\n\n\n\nfunctions.php<\/code><\/p>\n\n\n\nModifier le fichier style.css<\/h3>\n\n\n\n
Nous allons r\u00e9gler l\u2019aspect esth\u00e9tique. Pour cela, ouvrez le fichier style.css de votre th\u00e8me enfant afin d\u2019ajouter le code suivant :<\/p>\n\n\n\n\/* >====================================> *\/\n\/* --- Author Avatar on Divi Blog --- *\/\n.phf_avatar_blog, .phf_avatar_single {\n display: table;\n width: 100%;\n margin-bottom: 15px;\n}\n.phf_avatar_blog .avatar, .phf_avatar_single .avatar {\n float: left;\n margin-right: 15px;\n border-radius: 50%;\n border: 1px solid #ddd; \n}\n.phf_avatar_blog .avatar {\n width: 48px; \/* <-- Taille de l'avatar sur la page du blog *\/\n}\n.phf_avatar_single .avatar {\n width: 64px; \/* <-- Taille de l'avatar sur les pages d'article *\/\n}\n\/* --- End Author Avatar on Divi Blog --- *\/\n\/* <====================================< *\/<\/pre>\n\n\n\nEt voil\u00e0, c'est fini !<\/h3>\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"