Több weboldal készítésénél felmerülő ötlet, illetve igény volt a partnereink részéről, hogy a WordPress által biztosított alap szerkesztői felületen megadott tartalom úgy nézzen ki, ahogy az a valóságban is megjelenik a megrendelőknek. Ez sokszor azért fontos, mert az ember jobban meg tudja a szerkesztőben formázni a tartalmat, ha például látja a weboldalnál is lévő háttérszínt, ami a tartalom mögött van és ahhoz tudja igazítani. Ez persze csak az egyik ok, hogy a színezés jól nézzen ki, de sok esetben az elrendezés is fontos, az egyes elemek távolsága, mérete.

Ahhoz, hogy a sablon css-ét meghívjuk a WordPress belső szerkesztőjébe, az alábbi kódot használjuk:

function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

A kódrészletet a sablonunk functions.php-jébe szúrjuk be. Ez a kód, a sablonunk (wp-content/themes/sablonodnevemindegymi/style.css -t fogja az editor-ba behívni.

 

Tanácsom

Készítsünk egy saját css fájlt, (például style-szerkhez.css) ami csak a fontosabb és kinézethez nélkülözhetetlenen css-eket foglalják magukba. Ilyen például a betűtípus, sormagasság, betűszín, képek távolságtartása és hasonlók. (Továbbá nem árt, ha ebbe az egy css-be megadjuk a tartalom terület szélességét, hogy nagyobb felbontású monitoron se legyen szélesség gondunk. A külön css-el megelőzhetünk több olyan ütközést, amik a szerkesztő funkcióiból, használhatóságából elvesznek.

Esetleg akinek szüksége lenne, az több css-t is behívhat, csak az add_editor_style() sort kell megdupláznia és értelemszerűen a fájl nevet átírni.

 

További segédanyagok és forrás: