Dziś wpis przydatny dla osób, które chciałyby zmienić CSS w kokpicie swojego WordPress. Chwilkę szukałem działającego rozwiązania, więc oto ono. Najpierw jednak – po co mógłbyś chcieć zmieniać CSS na zapleczu swojej strony?
Przypadek z życia. Jakiś czas temu zainstalowałem na blogu Elimu motyw Extra. Jest to motyw od Elegant Themes, bazujący na Divi. Oprócz wielu fajnych rozwiązań, są w nim też takie, które naprawdę denerwują.
Coś co od samego początku mnie wkurzało w tym motywie to WIELKIE LITERY w polu „Tytuł” w edytorze Gutenberg. Dodając wpisy i poprawiając kilka razy tytuł musiałem „na czuja” pilnować wielkości liter. Inaczej adres strony wpisu wyglądał na przykład tak: https://blog.elimu.pl/Jakis-NOWY-Poprawiany-tyTUŁ-WPisu. Dramat. Inne moje strony nie miały tej „funkcji”. Tylko jedna, bazująca na Extra. Trzeba to jakoś namierzyć i wyłączyć.
Jak odszukać regułę CSS odpowiadającą za dany fragment strony?
Oryginalny CSS powodujący to zachowanie jest tu (przy okazji szybki kurs korzystania z narzędzi developerskich na jednym screenie):
Jak zmienić CSS w używanym motywie WordPress?
Chcąc naprawić (nadpisać, zmienić) niechcianą regułę CSS w motywie mamy różne opcje:
a) poprawić to wprost w pliku motywu – najgorsze wyjście, bo zmiany zostaną nadpisane przy najbliższej aktualizacji
b) dodać CSS przez opcje motywu dostępne przez „Stylistę tematów”; tu niestety niemiła niespodzianka – zmiany te nie mają zastosowania do kokpitu,
c) zrobić sobie motyw potomny i w nim poprawić CSS zaplecza.
Postanowiłem pójść trzecią ścieżką (i przy okazji zrobić długo odkładany motyw potomny na blog elimu).
Jak zmienić wygląd kokpitu WordPress używając motywu potomnego?
Poszedłem trzecią ścieżką (przy okazji zrobiłem potomny motyw na blog elimu – coś co długo odkładałem). Jednak czekało mnie zaskoczenie. Pomimo wykonania kroków z poradnika tworzenia motywu potomnego do Divi i dodania w style.css właściwych reguł… nic się nie zmieniło.
Dopiero „kilka gugli dalej” odkryłem brakujące elementy układanki. Plik style.css nie jest „aplikowany” na strony kokpitu. Należy użyć poniższej metody.
1) Do motywu potomnego dodałem plik wp-admin.css, w nim stosowną regułę CSS (selektor „odgapiłem” z kodu jaki widzicie na zrzucie ekranu powyżej):
2) w pliku functions.php dodajemy magiczny składnik, który załaduje nam plik wp-admin.css w trakcie ładowania nagłówka stron pokazujących kokpit. Od razu dodam, że da się to zrobić wydajniej (np. tylko na stronie nowego wpisu) ale wolałem zostawić sobie furtkę do kolejnych zmian w wyglądzie zaplecza strony.
// źródło: stackexchange
function custom_admin() {
$url = get_settings('siteurl');
$url = $url . '/wp-content/themes/elimu-extra-child/wp-admin.css';
echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}
add_action('admin_head', 'custom_admin');
W miejscu „nazwa-motywu-potomnego” oczywiście trzeba podać właściwą nazwę katalogu, w którym trzymamy motyw potomny.
Efekt (po wyczyszczeniu cache przeglądarki)? Taki jak należy:
