{"id":228235,"date":"2022-10-13T13:27:00","date_gmt":"2022-10-13T10:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228235"},"modified":"2022-11-09T01:25:32","modified_gmt":"2022-11-08T22:25:32","slug":"formato-personalizado-del-editor-tinymce-en-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/formato-personalizado-del-editor-tinymce-en-wordpress\/","title":{"rendered":"Formato personalizado del editor TinyMCE en WordPress"},"content":{"rendered":"<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>A veces, cuando se escribe un bloque de texto con el editor de WordPress, es necesario que se vea de una determinada manera. Por lo general, hacemos esto agregando estilos a los fragmentos de texto, pero no siempre queremos que nuestros clientes tengan que abrir el editor de texto. y hazlo manualmente.<\/p>\n<p>En este ejemplo, crearemos un peque\u00f1o filtro que puede agregar a su <code>functions.php<\/code>archivo para darle al usuario algunas opciones de formato adicionales, para agregar un estilo de p\u00e1rrafo de &#8216;Lead&#8217; personalizado.<\/p>\n<h2>Uso del formato TinyMCE personalizado<\/h2>\n<p>Aqu\u00ed hay un ejemplo s\u00faper r\u00e1pido del filtro en acci\u00f3n. Te muestra:<\/p>\n<ul>\n<li>C\u00f3mo alternar la barra de herramientas para que pueda ver el men\u00fa Formatos<\/li>\n<li>C\u00f3mo aplicar el formato usando el men\u00fa Formatos<\/li>\n<li>C\u00f3mo borrar los estilos<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Formato personalizado del editor TinyMCE en WordPress\" \/>Formato TinyMCE en acci\u00f3n<\/p>\n<h2>El c\u00f3digo<\/h2>\n<p>El c\u00f3digo es realmente simple, solo conecte <code>tiny_mce_before_init<\/code>y agregue su estilo personalizado a la <code>style_formats<\/code>matriz. Aseg\u00farese de incluir un t\u00edtulo, el tipo de elemento que desea usar y, lo que es m\u00e1s importante, la clase.<\/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>Por supuesto, nada pasar\u00e1 sin un poco de estilo. Aseg\u00farese de agregar los estilos a su WordPress principal <code>styles.css<\/code>para que su cliente potencial se muestre en el front-end, y tambi\u00e9n aseg\u00farese de registrar una hoja de estilo del editor para que el c\u00f3digo se muestre en el editor (puede 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 hacer esto).<\/p>\n<pre><code>\n.lead {\n    font-size: 120%;\n}\n<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <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 veces, cuando se escribe un bloque de texto con el editor de WordPress, es necesario que se vea de cierta manera, generalmente lo hacemos agregando estilos a los fragmentos de texto, pero no siempre 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":[892,716,914,840],"tags":[1172],"class_list":["post-228235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-otro","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228235"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224229"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}