W jaki sposób ukryć poszczególne elementy edytora wizualnego w WordPressie?
- Poziom trudności:
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
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.
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Komentarze — Napisz pierwszy komentarz
Czy powyższe wskazówki były skuteczne? Jeśli tak, podziel się swoimi spostrzeżeniami w komentarzu. Gdybyś chciał się podzielić ze mną skrawkiem kodu aby uzupełnić minikurs to skorzystaj z portalu pastebin.com i wyślij linka do kodu. Instrukcje jak to zrobić znajdziesz tutaj.