{"id":1213,"date":"2013-10-11T19:41:24","date_gmt":"2013-10-11T19:41:24","guid":{"rendered":"http:\/\/musilda.cz\/?p=1213"},"modified":"2013-10-11T19:41:24","modified_gmt":"2013-10-11T19:41:24","slug":"uprava-stylu-wordpress-wysiwyg-editor","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/uprava-stylu-wordpress-wysiwyg-editor\/","title":{"rendered":"\u00daprava styl\u016f WordPress wysiwyg editoru"},"content":{"rendered":"\n

WordPress editor pro vytv\u00e1\u0159en\u00ed p\u0159\u00edsp\u011bvk\u016f je jednou z jeho siln\u00fdch zbran\u00ed. V z\u00e1kladn\u00edm nastaven\u00ed to je TinyMCE a jeho ovl\u00e1d\u00e1n\u00ed je velmi snadn\u00e9. To co je nep\u0159\u00edjemn\u00e9, je rozd\u00edln\u00e9 zobrazov\u00e1n\u00ed styl\u016f v editoru a na frontendu. Uk\u00e1\u017eeme si jak vytvo\u0159it styly, kter\u00e9 umo\u017en\u00ed vzhled sjednotit.<\/p>\n\n\n\n\n\n\n\n

Klasick\u00fdm p\u0159\u00edkladem rozd\u00edln\u00e9ho zobrazov\u00e1n\u00ed, je serif font v editoru, kdy\u017e v \u0161ablon\u011b m\u00e1te definovan\u00fd sans-serif. Ti kdo jsou zvykl\u00ed s editorem pracovat, se nad takovou v\u011bc\u00ed ani nepozastav\u00ed, ale pokud vytv\u00e1\u0159\u00edte webov\u00e9 str\u00e1nky pro n\u011bkoho, kdo je zvykl\u00fd maxim\u00e1ln\u011b na Word, m\u016f\u017eete m\u00edt probl\u00e9m. Typick\u00e1 ot\u00e1zka – „A pro\u010d to vypad\u00e1 jinak, kdy\u017e to tady nap\u00ed\u0161u takhle?“.<\/p>\n\n\n\n

\u0158e\u0161en\u00edm je vyu\u017e\u00edt vlastn\u00edch styl\u016f pro editor, kter\u00e9 vlo\u017e\u00edme do souboru, m\u016f\u017eeme jej nazvat t\u0159eba style_editor.css a pomoc\u00ed funkce, jen\u017e vlo\u017e\u00edme do functions.php souboru, ho pak na\u010dteme:<\/p>\n\n\n\n

add_editor_style('style_editor.css');\n<\/pre>\n\n\n\n

Do tohoto souboru pak vep\u00ed\u0161eme v\u0161echny pot\u0159ebn\u00e9 styly. Bohu\u017eel to nefunguje u custom post types, tam mus\u00edme pou\u017e\u00edt trochu jin\u00fd postup, nebo se budou na\u010d\u00edtat defaultn\u00ed styly.<\/p>\n\n\n\n

Pro custom post type vyu\u017eijeme hook akce pre_get_posts:<\/p>\n\n\n\n

function editor_style_for_post_types() {\n  global $post;\n  $post_type = get_post_type($post->ID);\n  $editor_style = 'style_editor_'. $post_type . '.css';\n  add_editor_style($editor_style);\n}\nadd_action('pre_get_posts, 'editor_style_for_post_types');\n<\/pre>\n\n\n\n

Te\u010f u\u017e jen sta\u010d\u00ed pro ka\u017ed\u00fd post type vytvo\u0159it soubor style_editor_posttype.css.<\/p>\n","protected":false},"excerpt":{"rendered":"

WordPress editor pro vytv\u00e1\u0159en\u00ed p\u0159\u00edsp\u011bvk\u016f je jednou z jeho siln\u00fdch zbran\u00ed. V z\u00e1kladn\u00edm nastaven\u00ed to je TinyMCE a jeho ovl\u00e1d\u00e1n\u00ed je velmi snadn\u00e9. To co je nep\u0159\u00edjemn\u00e9, je rozd\u00edln\u00e9 zobrazov\u00e1n\u00ed styl\u016f v editoru a na frontendu. Uk\u00e1\u017eeme si jak vytvo\u0159it styly, kter\u00e9 umo\u017en\u00ed vzhled sjednotit.<\/p>\n","protected":false},"author":1,"featured_media":8624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,19],"tags":[385],"class_list":["post-1213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-snippety","tag-tinymce"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1213"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=1213"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8624"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}