Ú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');
Čtěte  Změna počtu cross sell produktů v košíku WooCommerce

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

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

2 Comments

  1. mirekk

    Ahoj,
    toto mě tedy moc zaujalo. Mě nevadí rozdílný vzhled, ale jak bylo napsáno, někomu ano. Znám.

    Takže než se do toho pustím: jestli tomu dobře rozumím, můžu si vzhled editačního okna plně přizpůsobit vzhledu příspěvku na webu? To znamená, když mám v šabloně příspěvek zobrazen takto:
    height: 590 px
    line height: 1,6
    font-family: Tahoma, Arial, sans-serif
    font-size: 12 px

    dá se to samé nadefinovat jako vzhled editačního okna?
    Děkuji

    Odpověď

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *