Zdarza się, że przy zmianie szablonu albo po instalacji dużej ilości wtyczek nasz panel dodawania nowych wpisów zaczyna przypominać krajobraz po Czarnobylu w ’86. Niektóre ikony, które dopisują się do automatycznie do pierwszego paska narzędzi rozpychają się do drugiej linii, inne tworzą swoje odstępy i postanawiają na stałe znajdować się w trzecim pasku narzędzi. Choć daleko WordPressowi do sztucznej inteligencji to nie można oprzeć się stwierdzeniu, że narzędzia zaczynają żyć własnym życiem.

Jest prosty sposób na uporządkowanie trybu wizualnego edytora w WordPressie. Dzięki temu narzędzie, które na co dzień wykorzystujesz może wyglądać tak:

nawet jeśli wcześniej wyglądało tak:

Po pierwsze pamiętaj o tym, że panel administracyjny w WordPressie to jest jakaś tajemnicza aplikacja, która nie wiadomo w jaki sposób działa, ale to też element strony internetowej (co prawda na zapleczu i nie widocznej dla użytkownika końcowego ale jednak) i tak jak strona można tam znaleźć kod HTML i CSS. Na początek kliknij prawym przyciskiem myszy na element, który chciałbyś ukryć i wybierz „zbadaj element” (jeśli nie posiadasz tej opcji radzę zaprzyjaźnić się z rozszerzeniem Web developer w przeglądarce Chrome i poszukać odpowiednika dla Firefoxa lub innej przeglądarki z której możesz korzystać). Przeglądając strukturę dowiedziałem się, że rozwijany pasek RevSlidera (który na powyższym zrzucie ekranu się całkiem rozjechał) nazywa się #mceu_18, a  zielony przycisk odpowiadający za galerie #mceu_17. Ponieważ na ten moment z obu wtyczek korzystam i nie mogę ich wyłączyć dlatego podjąłem decyzję o ich ukryciu. Dodatkowo postanowiłem zmniejszyć przycisk Shortcode (w moim przypadku to element #mceu_15-open) tak aby wszystkie podstawowe narzędzia zmieściły mi się w dwóch rzędach.

Kiedy zdobyłem potrzebną wiedzę otworzyłem plik functions.php (dostęp przez sekcję Wygląd -> Edytor)  i wpisałem pomiędzy znacznikami PHP:

// Dodaj style CSS dla panelu administracyjnego WordPressa
add_action('admin_head', 'custom_css');
 
function custom_css() {
  echo '<style>
#mceu_17, #mceu_18 {
        display: none!important;
}
#mceu_15-open {
	width: 80px!important;
	padding: 0px!important;
}
  </style>';
}

Jak łatwo się domyślić pomiędzy znacznikami <style> i </style> znajduje się kod CSS w którym zadeklarowałem elementy, które chciałbym ukryć i te, które zmniejszam. Szybka modyfikacja sprawiła, że z 4 rzędów narzędzi w edytorze wizualnym udało mi się zrobić 2.

UWAGA: gdyby się okazało, że pojawi się błąd 500, wtedy najprawdopodobniej nazwa funkcji custom_css jest zajęta. Wprowadź dowolną nazwę (rzecz jasna taką w której się połapiesz bez dodatkowych komentarzy np. custom_css_hide_icons) w linii 2 i 4, a następnie zapisz plik.