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.