{"id":228069,"date":"2022-10-13T13:20:00","date_gmt":"2022-10-13T10:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228069"},"modified":"2022-11-09T00:33:18","modified_gmt":"2022-11-08T21:33:18","slug":"anpassad-tinymce-editor-formatering-i-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/anpassad-tinymce-editor-formatering-i-wordpress\/","title":{"rendered":"Anpassad TinyMCE Editor-formatering i WordPress"},"content":{"rendered":"<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Ibland n\u00e4r du skriver ett textblock med WordPress-redigeraren beh\u00f6ver du att det ska se ut p\u00e5 ett visst s\u00e4tt, vi brukar g\u00f6ra detta genom att l\u00e4gga till stilar i textstycken, men vi vill inte alltid att v\u00e5ra kunder ska beh\u00f6va \u00f6ppna textredigeraren och g\u00f6r detta manuellt.<\/p>\n<p>I det h\u00e4r exemplet kommer vi att skapa ett litet filter som du kan l\u00e4gga till i din <code>functions.php<\/code>fil f\u00f6r att ge anv\u00e4ndaren n\u00e5gra extra formateringsalternativ, f\u00f6r att l\u00e4gga till en anpassad &quot;Lead&quot;-styckestil.<\/p>\n<h2>Anv\u00e4nder anpassad TinyMCE-formatering<\/h2>\n<p>H\u00e4r \u00e4r ett supersnabbt exempel p\u00e5 hur filtret fungerar. Den visar dig:<\/p>\n<ul>\n<li>Hur man v\u00e4xlar verktygsf\u00e4ltet s\u00e5 att du kan se menyn Format<\/li>\n<li>Hur man till\u00e4mpar formateringen med hj\u00e4lp av menyn Format<\/li>\n<li>Hur man rensar stilarna<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Anpassad TinyMCE Editor-formatering i WordPress\" \/>TinyMCE-formatering i aktion<\/p>\n<h2>Koden<\/h2>\n<p>Koden \u00e4r verkligen enkel, bara koppla in <code>tiny_mce_before_init<\/code>och l\u00e4gg till din anpassade stil till <code>style_formats<\/code>arrayen. Se till att inkludera en titel, vilken typ av element du vill anv\u00e4nda och viktigast av allt klassen.<\/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>Stilar<\/h3>\n<p>Sj\u00e4lvklart h\u00e4nder ingenting utan lite styling. Var noga med att l\u00e4gga till stilarna till b\u00e5de din huvudsakliga WordPress <code>styles.css<\/code>s\u00e5 att din Lead visas i anv\u00e4ndargr\u00e4nssnittet, och se \u00e4ven till att registrera en redigerarstilmall s\u00e5 att koden visas i editorn (du kan anv\u00e4nda <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>f\u00f6r att g\u00f6ra detta).<\/p>\n<pre><code>\n.lead {\n    font-size: 120%;\n}\n<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ibland n\u00e4r du skriver ett textblock med WordPress-redigeraren beh\u00f6ver du att det ser ut p\u00e5 ett visst s\u00e4tt, vi brukar g\u00f6ra detta genom att l\u00e4gga till stilar i textstycken, men vi vill inte alltid&#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":[848,901,922,724],"tags":[1173],"class_list":["post-228069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-oevrig","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228069"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228069\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224229"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}