BLOG

Dodanie własnego kodu CSS do panelu administracyjnego WordPress

Share on facebook
Share on twitter
Share on linkedin

Użytkownicy WordPress, wymieniająć zalety systemu, często wspominają o panelu administracyjnym. jest onprzejrzysty i dobrze zaplanowany. Zarówno zarządzanie ustawieniami, jak i aktualizacje są zrozumiałe nawet dla osoby początkującej. Także warto wyróżnić elastyczność panelu administracyjnego, co pozwala zarządzać wyglądem elementów bezpośrednio przez kokpit. A jeśli chcesz dodać nowe bloki oraz zmienić wygląd obecnych sekcji możesz wprowadzić do systemu własne style CSS.

Dodanie własnych stylów CSS do panelu administracyjnego – jest bardzo przydatnym rozwiązaniem. Miesiąc temu pomagałem tworzyć stronę hotelową dla koleżanki. Wybraliśmy odpowiedni motyw, który posiadał wtyczkę Hotel Booking Engine.  Podane rozszerzenia ma sporo opcji, które nie były potrzebne dla realizacji naszego projektu. Ponieważ koleżanka słabo się zna na WordPress, poprosiła aby wyróżnić tylko potrzebne opcje do tworzenia ogłoszeń we wtyczce. Rozwiązać szybko ten problem, pomogło dodanie własnych stylów CSS do panelu administracyjnego.

Jeśli także planujesz zmodyfikować wygląd panelu administracyjnego oraz jego elementów za pomocą CSS, ten wpis będzie przydatny dla Ciebie.

Opisałem dwa proste sposoby na import stylów do panelu WordPress. Przejrzymy ich po kolei.

Dodanie stylów CSS w plik funkcji motywu

Ten sposób jest najszybszy i najprostszy. Dodać style CSS można bezpośrednio do pliku funkcji motywu. Ponadto edytować plik functions.php możesz bezpośrednio przez panel administracyjny.  Dlatego warto przejść do sekcji Wygląd – Edytor motywu i wybrać odpowiedni plik wśród dostępnych na stronie (rys. 1).

Dalej warto podłączyć style za pomocą funkcji. Pokażę przykładową funkcję zawierającą style do wyróżnienia pół widgetów czerwonym kolorem:

add_action(‘admin_head’, ‘my_custom_styles’);
function my_custom_styles() {
echo ‘<style>
div#sidebar-left h2, div#footer-bar-left-sidebar h2, div#wc-left-sidebar h2 {
color: red;
text-decoration: underline;
}
</style>’;
}

 

Jak widać z powyższej funkcji, możemy wywołać style, które znajdują się pomiędzy znacznikami <style></style>. Możesz zamieć tamte style CSS na swoje i korzystać z funkcji „my_custom_styles”.

Oczywiście, zanim zaczniesz dodać cokolwiek do plików motywu warto po pierwsze stworzyć backup strony, na wypadek gdybyś np. w kodzie zrobiła błąd, a także warto stworzyć child theme motywu i w nim dodawać własny kod CSS czy też php. Dzięki temu, w momencie aktualizacji motywu nie utracisz kodu wprowadzonego prze siebie.

Podłączenie osobnego pliku stylów CSS

Kiedy musisz wprowadzić znaczące zmiany w wyglądzie backendu, lepiej umieścić cały projekt w osobnym pliku CSS, na przykład – myadmin.css. Załaduj go do katalogu motywem używanym domyślnie, a następnie w pliku funkcji functions.php wklej kod do podłączenie tego pliku:

function my_admin_style() {
wp_enqueue_style(‘admin-styles’, get_stylesheet_directory_uri().’/myadmin.css’);
}
add_action(‘admin_enqueue_scripts’, ‘my_admin_style’);

Zwróć uwagę, że warto użyć funkcję get_template_directory_uri (), aby określić ścieżkę do swojego tematu, ponieważ inny podobny get_stylesheet_directory_uri () nie bierze pod uwagę możliwości podłączenia motywu potomnego.

Ten sposób działa, jeśli planujesz podłączać style CSS do pliku funkcji motywu. Jeśli chcesz zmienić wygląd elementów wtyczki, możesz załadować plik ze stylami do folderu wtyczki. Dalej podłączyć ten plik warto za pomocą funkcji:

function change_plugin_styles() {
wp_register_style( ‘newcss-plugin’, plugins_url( plugin_name/new_plugin.css’ ) );
wp_enqueue_style( ‘newcss-plugin’ );
}

add_action(‘admin_enqueue_scripts’, ‘change_plugin_styles’);

gdzie plugin_name – folder z odpowiednią wtyczką.

Jeśli twój kod CSS zależy od innego arkusza stylów, powinieneś użyć funkcji wp_add_inline_style () z tym samym hakiem admin_enqueue_scripts. Umożliwia dodanie dodatkowych reguł, gdy podstawowe style CSS są już załadowane. Oto przykład funkcji z codex.wordpress.org:

function my_styles_method() {
wp_enqueue_style(
‘custom-style’,
get_template_directory_uri() . ‘/css/custom_script.css’
);
$color = get_theme_mod( ‘my-custom-color’ );
$custom_css = ”
.mycolor{
background: {$color};
}”;
wp_add_inline_style( ‘custom-style’, $custom_css );
}
add_action( ‘admin_enqueue_scripts’, ‘my_styles_method’ );

Kiedy chcesz zmienić wygląd strony logowania, a następnie zamiast admin_enqueue_scripts użyj:

add_action(‘login_head’, ‘my_admin_style’);

 

Podsumowanie

Jeśli planujesz zmienić wygląd backendu: elementów i bloków panelu oraz, jak w moim przypadku, pól danej wtyczki WordPress, możesz skorzystać ze stylów CSS. Wielu deweloperów stron może Ci powiedzieć, że ten sposób nie jest do końca poprawnym. Jeśli robić zmienny, to w kodzie elementów, bloków, wtyczek. Jednak dla modyfikacji kodu warto mieć zaawansowaną wiedzą techniczną oraz dodatkowy budżet dla deweloperów, które mogą wprowadzić potrzebne zmiany. W tym przypadku podłączenie stylów CSS jest prostszym oraz tańszym rozwiązaniem. Aby dodać odpowiednie style możesz użyć zaproponowane funkcji, dopasowujące ich pod woje cele.

P.S. Mam nadzieję, że opisałem wszystkie przypadki. Jeśli masz dodatkowe zapytania, proszę pozostawiać komentarzy. Dziękuję.


DZIEWCZYNA ZA BLOGIEM

Jestem Kamila Nitschka

Jestem tutaj, aby szybko i łatwo stworzyć stronę internetową Twoich marzeń lub nauczyć Cię jak możesz to zrobić sama w prosty sposób i bez stresu oczywiście wykorzystując w tym celu WordPressa.

Kategorie

ODBIERZ GRATIS

Share on facebook
Share on google
Share on twitter
Autor artykułu

5 thoughts on “Dodanie własnego kodu CSS do panelu administracyjnego WordPress”

  1. Fajnie że dodałaś to dodatkową funkcje 🙂 zawsze korzystałem z pierwszej opcji, nigdy nie łączyłem nowego pliku :)) dzięki za poradę

    1. Kamila Nitschka

      Kopię trzeba sobie utworzyć, ale są też przechowywane na serwerze gdzie masz wykupiony hosting. Tylko trzeba się upewnić kiedy i jak długo hosting przechowuje takie kopie bezpieczeństwa witryny.

Skomentuj artykuł

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *