{"id":228582,"date":"2022-10-13T12:50:00","date_gmt":"2022-10-13T09:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228582"},"modified":"2022-11-09T03:06:45","modified_gmt":"2022-11-09T00:06:45","slug":"formatage-personnalise-de-lediteur-tinymce-dans-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/formatage-personnalise-de-lediteur-tinymce-dans-wordpress\/","title":{"rendered":"Formatage personnalis\u00e9 de l&rsquo;\u00e9diteur TinyMCE dans WordPress"},"content":{"rendered":"<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Parfois, lorsque vous \u00e9crivez un bloc de texte \u00e0 l&rsquo;aide de l&rsquo;\u00e9diteur WordPress, vous en avez besoin pour avoir une certaine apparence, nous le faisons g\u00e9n\u00e9ralement en ajoutant des styles aux morceaux de texte, mais nous ne voulons pas toujours que nos clients aient \u00e0 ouvrir l&rsquo;\u00e9diteur de texte et faites-le manuellement.<\/p>\n<p>Dans cet exemple, nous allons cr\u00e9er un petit filtre que vous pouvez ajouter \u00e0 votre <code>functions.php<\/code>fichier pour donner \u00e0 l&rsquo;utilisateur des options de formatage suppl\u00e9mentaires, pour ajouter un style de paragraphe &quot;Lead&quot; personnalis\u00e9.<\/p>\n<h2>Utilisation du formatage TinyMCE personnalis\u00e9<\/h2>\n<p>Voici un exemple super rapide du filtre en action. Il vous montre :<\/p>\n<ul>\n<li>Comment basculer la barre d&rsquo;outils pour que vous puissiez voir le menu Formats<\/li>\n<li>Comment appliquer la mise en forme \u00e0 l&rsquo;aide du menu Formats<\/li>\n<li>Comment effacer les styles<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Formatage personnalis\u00e9 de l&#039;\u00e9diteur TinyMCE dans WordPress\" \/>Le formatage TinyMCE en action<\/p>\n<h2>Le code<\/h2>\n<p>Le code est vraiment simple, il suffit de s&rsquo;y connecter <code>tiny_mce_before_init<\/code>et d&rsquo;ajouter votre style personnalis\u00e9 au <code>style_formats<\/code>tableau. Assurez-vous d&rsquo;inclure un titre, le type d&rsquo;\u00e9l\u00e9ment que vous souhaitez utiliser et, surtout, la classe.<\/p>\n<pre><code>\nfunction wholesomecode_tinymce_formatting( $settings) {\n    $style_formats = array(\n        array(\n            'title'   =&gt; 'Lead Paragraph',\n            'block'   =&gt; 'p',\n            'classes' =&gt; 'lead',\n            'wrapper' =&gt; false,\n        ),\n    );\n    $settings['style_formats'] = json_encode( $style_formats );\n    return $settings;\n}\nadd_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );\n<\/code><\/pre>\n<h3>modes<\/h3>\n<p>Bien s\u00fbr, rien ne se passera sans un peu de style. Assurez-vous d&rsquo;ajouter les styles \u00e0 la fois \u00e0 votre WordPress principal <code>styles.css<\/code>afin que votre prospect s&rsquo;affiche sur le front-end, et assurez-vous \u00e9galement d&rsquo;enregistrer une feuille de style d&rsquo;\u00e9diteur afin que le code s&rsquo;affiche dans l&rsquo;\u00e9diteur (vous pouvez utiliser <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_editor_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>add_editor_style()<\/code><\/a>pour le faire).<\/p>\n<pre><code>\n.lead {\n    font-size: 120%;\n}\n<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Parfois, lorsque vous \u00e9crivez un bloc de texte \u00e0 l&rsquo;aide de l&rsquo;\u00e9diteur WordPress, vous en avez besoin pour avoir une certaine apparence, nous le faisons g\u00e9n\u00e9ralement en ajoutant des styles aux morceaux de texte, mais nous ne voulons pas toujours&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224229,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,841],"tags":[1167],"class_list":["post-228582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228582"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224229"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}