Ú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:

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.

Related posts

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

    Reply
    1. Musilda

      Částečně ano, spíše vlastnosti fontu, tu pevně definovanou šířku bych vynechal.

      Reply

Leave a Reply

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

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.