{"id":228569,"date":"2022-10-13T12:48:00","date_gmt":"2022-10-13T09:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228569"},"modified":"2022-11-09T03:03:36","modified_gmt":"2022-11-09T00:03:36","slug":"formatacao-personalizada-do-editor-tinymce-no-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/formatacao-personalizada-do-editor-tinymce-no-wordpress\/","title":{"rendered":"Formata\u00e7\u00e3o personalizada do editor TinyMCE no WordPress"},"content":{"rendered":"<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>\u00c0s vezes, ao escrever um bloco de texto usando o editor do WordPress, voc\u00ea precisa que ele tenha uma certa apar\u00eancia, geralmente fazemos isso adicionando estilos a peda\u00e7os de texto, mas nem sempre queremos que nossos clientes tenham que abrir o editor de texto e fa\u00e7a isso manualmente.<\/p>\n<p>Neste exemplo, vamos criar um pequeno filtro que voc\u00ea pode adicionar ao seu <code>functions.php<\/code>arquivo para dar ao usu\u00e1rio algumas op\u00e7\u00f5es extras de formata\u00e7\u00e3o, para adicionar um estilo de par\u00e1grafo &#8216;Lead&#8217; personalizado.<\/p>\n<h2>Usando a formata\u00e7\u00e3o personalizada TinyMCE<\/h2>\n<p>Aqui est\u00e1 um exemplo super r\u00e1pido do filtro em a\u00e7\u00e3o. Ele mostra a voc\u00ea:<\/p>\n<ul>\n<li>Como alternar a barra de ferramentas para que voc\u00ea possa ver o menu Formatos<\/li>\n<li>Como aplicar a formata\u00e7\u00e3o usando o menu Formatos<\/li>\n<li>Como limpar os estilos<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Formata\u00e7\u00e3o personalizada do editor TinyMCE no WordPress\" \/>Formata\u00e7\u00e3o TinyMCE em a\u00e7\u00e3o<\/p>\n<h2>O c\u00f3digo<\/h2>\n<p>O c\u00f3digo \u00e9 realmente simples, basta conectar <code>tiny_mce_before_init<\/code>e adicionar seu estilo personalizado ao <code>style_formats<\/code>array. Certifique-se de incluir um t\u00edtulo, o tipo de elemento que deseja usar e, o mais importante, a 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>Estilos<\/h3>\n<p>Claro, nada vai acontecer sem um pouco de estilo. Certifique-se de adicionar os estilos ao seu WordPress principal <code>styles.css<\/code>para que seu Lead seja exibido no Front End e tamb\u00e9m certifique-se de registrar uma folha de estilo do editor para que o c\u00f3digo seja exibido no editor (voc\u00ea pode usar <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>para fazer isso).<\/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 de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c0s vezes, ao escrever um bloco de texto usando o editor do WordPress, voc\u00ea precisa que ele tenha uma certa apar\u00eancia, geralmente fazemos isso adicionando estilos a peda\u00e7os de texto, mas nem sempre queremos &#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":[898,722,920,846],"tags":[1170],"class_list":["post-228569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-outro","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=228569"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224229"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}