{"id":228127,"date":"2022-10-13T13:15:00","date_gmt":"2022-10-13T10:15:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228127"},"modified":"2022-11-09T00:51:57","modified_gmt":"2022-11-08T21:51:57","slug":"niestandardowe-formatowanie-edytora-tinymce-w-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/niestandardowe-formatowanie-edytora-tinymce-w-wordpress\/","title":{"rendered":"Niestandardowe formatowanie edytora TinyMCE w WordPress"},"content":{"rendered":"<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Czasami pisz\u0105c blok tekstu za pomoc\u0105 edytora WordPress, potrzebujesz, aby wygl\u0105da\u0142 w okre\u015blony spos\u00f3b, zwykle robimy to dodaj\u0105c style do fragment\u00f3w tekstu, ale nie zawsze chcemy, aby nasi klienci musieli otwiera\u0107 edytor tekstu i zr\u00f3b to r\u0119cznie.<\/p>\n<p>W tym przyk\u0142adzie utworzymy ma\u0142y filtr, kt\u00f3ry mo\u017cesz doda\u0107 do swojego <code>functions.php<\/code>pliku, aby da\u0107 u\u017cytkownikowi dodatkowe opcje formatowania, aby doda\u0107 niestandardowy styl akapitu \u201eLead&quot;.<\/p>\n<h2>Korzystanie z niestandardowego formatowania TinyMCE<\/h2>\n<p>Oto super szybki przyk\u0142ad dzia\u0142ania filtra. Pokazuje:<\/p>\n<ul>\n<li>Jak prze\u0142\u0105czy\u0107 pasek narz\u0119dzi, aby zobaczy\u0107 menu Formaty?<\/li>\n<li>Jak zastosowa\u0107 formatowanie za pomoc\u0105 menu Formaty<\/li>\n<li>Jak wyczy\u015bci\u0107 style?<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Niestandardowe formatowanie edytora TinyMCE w WordPress\" \/>Formatowanie TinyMCE w akcji<\/p>\n<h2>Kod<\/h2>\n<p>Kod jest naprawd\u0119 prosty, wystarczy pod\u0142\u0105czy\u0107 <code>tiny_mce_before_init<\/code>i doda\u0107 w\u0142asny styl do <code>style_formats<\/code>tablicy. Pami\u0119taj, aby poda\u0107 tytu\u0142, typ elementu, kt\u00f3rego chcesz u\u017cy\u0107, a co najwa\u017cniejsze, klas\u0119.<\/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>Style<\/h3>\n<p>Oczywi\u015bcie nic si\u0119 nie wydarzy bez odrobiny stylizacji. Pami\u0119taj, aby doda\u0107 style do obu g\u0142\u00f3wnych WordPress <code>styles.css<\/code>, aby Tw\u00f3j Lead by\u0142 wy\u015bwietlany w interfejsie, a tak\u017ce zarejestruj arkusz styl\u00f3w edytora, aby kod wy\u015bwietla\u0142 si\u0119 w edytorze (mo\u017cesz <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>to zrobi\u0107).<\/p>\n<pre><code>\n.lead {\n    font-size: 120%;\n}\n<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Czasami pisz\u0105c blok tekstu za pomoc\u0105 edytora WordPress, potrzebujesz, aby wygl\u0105da\u0142 w okre\u015blony spos\u00f3b, zwykle robimy to, dodaj\u0105c style do fragment\u00f3w tekstu, ale nie zawsze chcemy &#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":[721,919,897,845],"tags":[1169],"class_list":["post-228127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-kod","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228127"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224229"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}