Így formázd a szerkesztői felületet WordPress honlapodon
A WordPress honlapok egyik nagy előnye, hogy köztudottan kiemelkedően testre szabhatók, ezáltal a külső megjelenés tekintetében csak a rendelkezésünkre álló sablonok és kreativitásunk szabhat határokat nekünk. Sokakat azonban gyakran nemcsak oldaluk külső megjelenése képes zavarni, hanem az adminisztrációs, belső szerkesztői felület is, ami bár nyilván a SEO vagy a látogatók szempontjából igazán sokadlagos dolog, ellenben mivel szerkesztőként mi és szerkesztőtársaink azt látják a legtöbbször, ezért néha kellemesebb összhatást és egyszerűséget érhetünk el a módosítással.
Példának okáért sokan örülnének annak, ha a weboldalon használt betűtípus és formázás már az adminisztrációs felületen is megjelenne, nem csak a nyers szöveg, hiszen így a háttérben lehetne orvosolni, akár előnézet nélkül is azokat a hibákat vagy hiányosságokat, amik egyébként nem szúrnak szemet a normál felületen. Ilyenek például a betűk formája, színe, mérete, a háttérszín, a sormagasság, vagy példának okáért az egyes elemek közötti távolság, ami például képek, videók vagy egyebek esetében a dizájn szempontjából fontosak.
Tartalmainkat így nemcsak könnyebben, hanem sokkal egyszerűbben is lehetne formázni, illetve módosítani, hiszen ugyanabban vagy egy másik ablakban azonnal nézhetjük a sablonban megjelenő végeredmény, ezáltal az admin bezárásával valóban nem kellene hozzányúlnunk a szöveghez. Kevesen tudják, de erre ma már van megoldás, hiszen a sablon tartalom formázását a szerkesztőfelületbe is integrálhatjuk, amivel jelentős mértékben könnyíthetünk a saját, vagy a tartalmat kezelő szerkesztők dolgán.
Így integráld a sablonformázást a szerkesztői felületbe
A megoldással többek között a WordPress Developer Resources weboldal osztotta meg a nyilvánossággal, akik nem titkoltan programozói kvalitású egyének, éppen ezért számukra nem volt nehéz egy olyan scriptet írni, amivel ez megvalósítható. Mivel a legtöbb WordPress használó nem tud programozni, ezért mi most leírjuk nektek azt a kódsort, amit csak a sablonon belül megtalálható functions.php fájlba kell beírni, illetve kiegészíteni, mentés előtt pedig ügyelni arra, hogy BOOM nélkül, UTF-8 módban kerüljön sor minderre. A stílusadatlap behúzásának kódsora tehát a következő:
function wpdocs_theme_add_editor_styles() {
add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
function wpdocs_theme_add_editor_styles() {
add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
Fontos, hogy amennyiben GoogleFont-ot használunk a weboldalon, és nem a css&importtal hívjuk meg, abban az esetben a fenti kód nem fog működni – sőt szét is csúsztathatja az oldalt –, így ebben az esetben az alábbi kódsort gépeljük, vagy másoljuk be a végeredmény érdekében.
function wpdocs_theme_add_editor_styles() {
$font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Lato:300,400,700' );
add_editor_style( $font_url );
}
add_action( 'after_setup_theme', 'wpdocs_theme_add_editor_styles' );
Ennyi az egész?
Lényegében igen, csak ennyi. Persze arra azért figyeljünk oda, hogy WordPress oldalunk sablonjától függően előfordulhat az, hogy a megjelenés css állománya valami galibát okozhat a szerkesztői felületen. Ha ezzel találkozunk, azt is könnyedén tudjuk orvosolni azáltal, hogy a sablon mappájában létrehozunk egy másik css fájlt, és nem a sablonba közvetlenül, hanem ebbe másoljuk át a tartalmi formázást módosító css kódokat, és végül csak azt hívjuk meg a fentiekben beszúrt kódok által.
