{"id":228678,"date":"2022-10-13T12:53:00","date_gmt":"2022-10-13T09:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228678"},"modified":"2022-11-09T03:47:13","modified_gmt":"2022-11-09T00:47:13","slug":"mukautettu-tinymce-editorin-muotoilu-wordpressissae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/mukautettu-tinymce-editorin-muotoilu-wordpressissae\/","title":{"rendered":"Mukautettu TinyMCE-editorin muotoilu WordPressiss\u00e4"},"content":{"rendered":"<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Joskus kun kirjoitat tekstilohkoa WordPress-editorilla, tarvitset sen n\u00e4ytt\u00e4v\u00e4n tietylt\u00e4, teemme t\u00e4m\u00e4n yleens\u00e4 lis\u00e4\u00e4m\u00e4ll\u00e4 tekstinp\u00e4tkiin tyylej\u00e4, mutta emme aina halua, ett\u00e4 asiakkaamme joutuvat avaamaan tekstieditoria ja tee t\u00e4m\u00e4 manuaalisesti.<\/p>\n<p>T\u00e4ss\u00e4 esimerkiss\u00e4 luomme pienen suodattimen, jonka voit lis\u00e4t\u00e4 <code>functions.php<\/code>tiedostoosi antaaksesi k\u00e4ytt\u00e4j\u00e4lle ylim\u00e4\u00e4r\u00e4isi\u00e4 muotoiluvaihtoehtoja, lis\u00e4t\u00e4ksesi mukautetun &#8217;Lead&#8217;-kappaletyylin.<\/p>\n<h2>Mukautetun TinyMCE-muotoilun k\u00e4ytt\u00e4minen<\/h2>\n<p>T\u00e4ss\u00e4 on eritt\u00e4in nopea esimerkki suodattimesta toiminnassa. Se n\u00e4ytt\u00e4\u00e4 sinulle:<\/p>\n<ul>\n<li>Ty\u00f6kalupalkin vaihtaminen, jotta n\u00e4et Muotoiluvalikon<\/li>\n<li>Muotoilun k\u00e4ytt\u00e4minen Muotoilu-valikon avulla<\/li>\n<li>Kuinka tyhjent\u00e4\u00e4 tyylit<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Mukautettu TinyMCE-editorin muotoilu WordPressiss\u00e4\" \/>TinyMCE-muotoilu toiminnassa<\/p>\n<h2>Koodi<\/h2>\n<p>Koodi on todella yksinkertainen, liit\u00e4 vain siihen <code>tiny_mce_before_init<\/code>ja lis\u00e4\u00e4 mukautettu tyylisi <code>style_formats<\/code>taulukkoon. Muista lis\u00e4t\u00e4 otsikko, k\u00e4ytett\u00e4v\u00e4n elementin tyyppi ja ennen kaikkea luokka.<\/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>Tyylit<\/h3>\n<p>Tietenk\u00e4\u00e4n mit\u00e4\u00e4n ei tapahdu ilman pient\u00e4 muotoilua. Muista lis\u00e4t\u00e4 tyylit molempiin p\u00e4\u00e4WordPressiin, <code>styles.css<\/code>jotta liidi n\u00e4kyy k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, ja muista my\u00f6s rekister\u00f6id\u00e4 editorin tyylisivu, jotta koodi n\u00e4kyy editorissa (voit <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>tehd\u00e4 t\u00e4m\u00e4n).<\/p>\n<pre><code>\n.lead {\n    font-size: 120%;\n}\n<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Joskus kun kirjoitat tekstilohkoa WordPress-editorilla, tarvitset sen n\u00e4ytt\u00e4v\u00e4n tietylt\u00e4, teemme t\u00e4m\u00e4n yleens\u00e4 lis\u00e4\u00e4m\u00e4ll\u00e4 tekstinp\u00e4tkiin tyylej\u00e4, mutta emme aina halua&#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":[719,895,917,843],"tags":[1166],"class_list":["post-228678","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228678"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228678\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224229"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}