{"id":228939,"date":"2022-10-13T13:15:00","date_gmt":"2022-10-13T10:15:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228939"},"modified":"2022-11-09T04:52:51","modified_gmt":"2022-11-09T01:52:51","slug":"formattazione-personalizzata-delleditor-tinymce-in-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/formattazione-personalizzata-delleditor-tinymce-in-wordpress\/","title":{"rendered":"Formattazione personalizzata dell&#8217;editor TinyMCE in WordPress"},"content":{"rendered":"<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>A volte quando si scrive un blocco di testo utilizzando l&#8217;editor di WordPress, \u00e8 necessario che appaia in un certo modo, di solito lo facciamo aggiungendo stili a parti di testo, ma non vogliamo che i nostri clienti debbano sempre aprire l&#8217;editor di testo e farlo manualmente.<\/p>\n<p>In questo esempio creeremo un piccolo filtro che puoi aggiungere al tuo <code>functions.php<\/code>file per offrire all&#8217;utente alcune opzioni di formattazione extra, per aggiungere uno stile di paragrafo &quot;Lead&quot; personalizzato.<\/p>\n<h2>Utilizzo della formattazione TinyMCE personalizzata<\/h2>\n<p>Ecco un esempio super veloce del filtro in azione. Ti mostra:<\/p>\n<ul>\n<li>Come attivare o disattivare la barra degli strumenti in modo da poter vedere il menu Formati<\/li>\n<li>Come applicare la formattazione utilizzando il menu Formati<\/li>\n<li>Come cancellare gli stili<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Formattazione personalizzata dell&#039;editor TinyMCE in WordPress\" \/>TinyMCE Formattazione in azione<\/p>\n<h2>Il codice<\/h2>\n<p>Il codice \u00e8 davvero semplice, basta collegarsi <code>tiny_mce_before_init<\/code>e aggiungere il tuo stile personalizzato <code>style_formats<\/code>all&#8217;array. Assicurati di includere un titolo, il tipo di elemento che desideri utilizzare e, soprattutto, 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>Stili<\/h3>\n<p>Naturalmente, nulla accadr\u00e0 senza un po&#8217; di stile. Assicurati di aggiungere gli stili a entrambi i tuoi WordPress principali <code>styles.css<\/code>in modo che il tuo Lead venga visualizzato nel Front End e assicurati anche di registrare un foglio di stile dell&#8217;editor in modo che il codice venga visualizzato nell&#8217;editor (puoi usarlo <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>per farlo).<\/p>\n<pre><code>\n.lead {\n    font-size: 120%;\n}\n<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A volte quando si scrive un blocco di testo utilizzando l&#8217;editor di WordPress, \u00e8 necessario che appaia in un certo modo, di solito lo facciamo aggiungendo stili a parti di testo, ma non sempre vogliamo&#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":[918,896,720,844],"tags":[1168],"class_list":["post-228939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=228939"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224229"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=228939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=228939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=228939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}