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, persze csak biztonsági mentés készítése után. 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:
- A functions.php szerkesztése (Saját cikkünk)
- WordPress Developer Resources: add_editor_style() (angol, hivatalos WordPress fejlesztői oldal)
