Úprava stylů WordPress wysiwyg editoru

WordPress editor pro vytváření příspěvků je jednou z jeho silných zbraní. V základním nastavení to je TinyMCE a jeho ovládání je velmi snadné. To co je nepříjemné, je rozdílné zobrazování stylů v editoru a na frontendu. Ukážeme si jak vytvořit styly, které umožní vzhled sjednotit.

Klasickým příkladem rozdílného zobrazování, je serif font v editoru, když v šabloně máte definovaný sans-serif. Ti kdo jsou zvyklí s editorem pracovat, se nad takovou věcí ani nepozastaví, ale pokud vytváříte webové stránky pro někoho, kdo je zvyklý maximálně na Word, můžete mít problém. Typická otázka – „A proč to vypadá jinak, když to tady napíšu takhle?“.

Řešením je využít vlastních stylů pro editor, které vložíme do souboru, můžeme jej nazvat třeba style_editor.css a pomocí funkce, jenž vložíme do functions.php souboru, ho pak načteme:

add_editor_style('style_editor.css');

Do tohoto souboru pak vepíšeme všechny potřebné styly. Bohužel to nefunguje u custom post types, tam musíme použít trochu jiný postup, nebo se budou načítat defaultní styly.

Pro custom post type využijeme hook akce pre_get_posts:

function editor_style_for_post_types() {
  global $post;
  $post_type = get_post_type($post->ID);
  $editor_style = 'style_editor_'. $post_type . '.css';
  add_editor_style($editor_style);
}
add_action('pre_get_posts, 'editor_style_for_post_types');

Teď už jen stačí pro každý post type vytvořit soubor style_editor_posttype.css.