Czasami zdarza się, że strona dopracowana jest do najdrobniejszego detalu, a Kokpit WordPressa woła o pomstę do nieba. Dla tych wszystkich, którzy dbają o drobiazgi przygotowałem poradnik pokazujący w jaki sposób można dodać do kokpitu administratora plik CSS zawierający najpotrzebniejsze style i ukrywający niepotrzebne elementy.

Na samym początku powinieneś zdecydować czy zamierzasz dodać tylko kilka linijek kodu CSS wewnątrz pliku functions.php czy też masz w planie ostylować więcej elementów i w Twojej sytuacji bardziej potrzebne będzie stworzenie nowego pliku .css.

Szybsza metoda

Prostszą operacją jest dodanie kilku linijek do pliku functions.php. W tym celu przejdź do sekcji Wygląd -> Edytor i otwórz właściwy plik.

Następnie wklej w dowolnym miejscu (najlepiej przed zamknięciem ?> albo tuż po otwarciu <?php poniższy fragment kodu:

// Dodaj style CSS dla panelu administracyjnego WordPressa
add_action('admin_head', 'custom_css');
 
function custom_css() {
  echo '<style>

	#toplevel_page_jetpack {
		display: none;
	}

  </style>';
}

W linii od 6 do 10 (między linią echo ’<style> a  </style>’😉 znajdują się reguły CSS, które działają wewnątrz Kokpitu WordPressa. Konkretnie służą one do ukrycia w menu po lewej pozycji „Jetpack”.

Na poniższym przykładzie pokażę jak ukryć nieużywany przycisk z edytora wizualnego:

Metoda zaawansowana – dla większej ilości kodu

Pierwszy krok wymaga przygotowania pliku .css. Aby przygotować go w wygodny sposób możesz otworzyć dowolny edytor tekstu, nawet Notatnik. Osobiście preferuję Notepad ++. Kiedy już przygotujesz narzędzie wpisz w nowym dokumencie kod CSS, który chcesz zastosować w Kokpicie WordPressa. W moim przypadku postanowiłem ukryć niepotrzebny przycisk, pozycję Jetpack w menu, a także poszczególne elementy dla osób, które posiadają profil subskrybenta. Plik nazwałem admin.css i jego zawartość prezentowała się – w moim przypadku – w następujący sposób:

#mceu_40 {
    display: none;
}

#toplevel_page_jetpack {
	display: none;
}

body.mpoet-uisubscriber li#toplevel_page_jetpack, body.mpoet-uisubscriber #dashboard_activity, body.mpoet-uisubscriber #jetpack_summary_widget, body.mpoet-uisubscriber #dashboard_primary {
	display: none;
}

Plik wgrałem poprzez klienta FTP do katalogu /wp-config/themes/nazwa-motywu/.

Drugim krokiem było wejście do edycji pliku functions.php. W tym celu przejdź do sekcji Wygląd -> Edytor i otwórz właściwy plik.

Następnie wklej w dowolnym miejscu (najlepiej przed zamknięciem ?> albo tuż po otwarciu <?php) poniższy fragment kodu:

// Funkcja modyfikująca domyślny plik CSS dla Kokpitu administratora

function admin_style() {
  wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');
}

add_action('admin_enqueue_scripts', 'admin_style');

Polecenie get_template_directory_uri wskazuje na ścieżkę aktualnego motywu, po której to ścieżce trzeba podać nazwę pliku css, który ma być wywoływany. Jeśli nazwałeś swój plik w pierwszym kroku tak samo jak w moim przypadku (admin.css) i umieściłeś go bezpośrednio w katalogu z motywem, wtedy skopiowanie powyższego kodu z kroku drugiego do functions.php powinno automatycznie zadziałać.

Pamiętaj aby zmiany wprowadzać zawsze w motywie potomnym (ang. child theme) tak aby zapewnić trwałe ich zapisanie, niezależnie od ilości aktualizacji jakie motyw będzie przechodził.

Mam nadzieję, że udało Ci się samodzielnie wprowadzić kod CSS do Kokpitu WordPressa.