Jest coś dziwnie satysfakcjonującego w tym, że obszar administracyjny WordPress staje się bardziej osobisty. Kiedy pracujemy nad stronami klientów lub długoterminowymi projektami, nawet drobne zmiany, takie jak niestandardowe ikony, mogą sprawić, że panel administracyjny będzie wyglądał bardziej dopracowany i osobisty.
Domyślne ikony WordPress spełniają swoje zadanie, ale są generyczne. Jeśli dodałeś niestandardowe typy postów lub zbudowałeś dopasowane środowisko administracyjne, te same ikony prawdopodobnie nie odzwierciedlają marki ani celu Twojej witryny.
Na przestrzeni lat używaliśmy różnych metod do zmiany ikon administratora – niektóre proste, niektóre nieco bardziej zaawansowane. Niezależnie od tego, czy chcesz szybkie rozwiązanie w postaci wtyczki, czy sposób na zamianę ikon za pomocą kodu, pokażemy Ci obie opcje krok po kroku.
Ten poradnik jest idealny dla właścicieli witryn, programistów i freelancerów, którzy chcą, aby ich panel WordPressa wyglądał tak samo niestandardowo, jak strona frontowa.
Czym są ikony administratora w WordPressie?
Ikony menu to małe obrazki, które pojawiają się obok każdego elementu w menu panelu WordPressa. Pomagają szybko rozpoznać różne obszary Twojej witryny, takie jak Posty, Strony, Wtyczki i Ustawienia.
Domyślnie WordPress używa czcionki ikon o nazwie Dashicons. Istnieje od 2013 roku i od tego czasu nie doczekała się wielu aktualizacji. Chociaż działa dobrze, może wydawać się nieco przestarzała lub generyczna, zwłaszcza jeśli tworzysz niestandardową witrynę.
Dostosowanie tych ikon nadaje obszarowi administratora świeży wygląd. Możesz zmienić je, aby pasowały do Twojej marki, uprościć menu dla klientów lub po prostu dodać odrobinę osobowości do Twojej witryny.
Jeśli tworzysz stronę dla kogoś, kto dopiero zaczyna przygodę z WordPressem, zmiana ikon może nawet pomóc mu szybciej znaleźć potrzebne rzeczy. To drobna zmiana, która ma duży wpływ na to, jak odbierany jest panel administracyjny.
Teraz przyjrzyjmy się dwóm prostym sposobom zmiany ikon administratora — jednemu za pomocą wtyczki i jednemu za pomocą niewielkiego kodu.
- Metoda 1: Zmień ikony administratora w panelu administratora WordPress za pomocą wtyczki
- Metoda 2: Ręczna zmiana ikon menu administratora za pomocą fragmentu kodu
- Bonus: Dodaj ikony dla niestandardowych typów postów w WordPressie
- Więcej sposobów na dostosowanie panelu administratora WordPress 🎁
Metoda 1: Zmień ikony administratora w panelu administratora WordPress za pomocą wtyczki
W tej metodzie użyjemy wtyczki Admin Menu Editor. Jak sama nazwa wskazuje, pozwala ona łatwo dostosowywać menu administratora WordPress.
Najpierw musisz zainstalować i aktywować wtyczkę Admin Menu Editor. Więcej szczegółów znajdziesz w naszym poradniku jak zainstalować wtyczkę WordPress.
Po aktywacji wtyczki przejdź do strony Ustawienia » Edytor menu. Zobaczysz tutaj swoje menu administratora WordPress w przejrzystym interfejsie użytkownika (UI), który możesz dostosować.
Interfejs użytkownika ma na górze pasek narzędzi, który pozwala dodawać lub usuwać elementy menu, dodawać separatory, kopiować i wklejać elementy oraz wiele więcej.
Poniżej możesz kliknąć element menu, aby go rozwinąć i zobaczyć jego ustawienia. Tutaj rozwinęliśmy element menu Posty.
Po rozwinięciu dowolnego elementu menu zobaczysz więcej opcji. Jeśli jest to menu nadrzędne, zobaczysz również elementy menu podrzędnego w prawej kolumnie.
Aby dodać, zastąpić lub usunąć ikonę menu, kliknij link „Pokaż zaawansowane opcje” na dole.
Teraz kliknij przycisk obok pola „URL ikony”.
Spowoduje to wyświetlenie wyskakującego okienka, w którym można zobaczyć wszystkie dostępne ikony Dashicons. Alternatywnie, możesz kliknąć przycisk „Biblioteka mediów”, aby przesłać własną ikonę obrazu.
Jeśli chcesz przesłać własną ikonę obrazkową, zalecamy użycie obrazu 32x32, najlepiej w formacie PNG z przezroczystością.
Po wybraniu ikony kliknij przycisk „Zapisz zmiany”, aby zapisać ustawienia.
Zobaczysz teraz swoją niestandardową ikonę menu używaną w menu administratora.
Metoda 2: Ręczna zmiana ikon menu administratora za pomocą fragmentu kodu
Ta kolejna metoda wymaga dodania niestandardowego kodu do zmiany ikon.
Jeśli jeszcze tego nie robiłeś, zalecamy szybkie zapoznanie się z naszym poradnikiem na temat dodawania niestandardowego kodu w WordPressie.
Najprostszym i najbezpieczniejszym sposobem dodawania niestandardowego kodu w WordPress jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu WordPress. Pozwala bezpiecznie dodawać niestandardowy kod, CSS i HTML do Twojej witryny WordPress bez przypadkowego jej uszkadzania.
Uwaga: Wtyczka ma również darmową wersję o nazwie WPCode Lite, która wykona zadanie. Jednak wersja Pro oferuje dodatkowe funkcje, które mogą być pomocne.
Przykład 1. Zastępowanie ikony przy użyciu domyślnych Dashicons
W tym przykładzie użyjemy domyślnych Dashicons do zastąpienia ikony z istniejącego zestawu ikon.
Warto zauważyć, że WordPress już ładuje Dashicons, które są wysoce zoptymalizowane pod kątem wydajności. Używanie ich nie wpłynie więc na szybkość ładowania strony.
Powiedziawszy to, zanim uruchomisz kod, musisz zanotować następujące informacje:
- Adres URL elementu menu, który chcesz zmienić
- Nazwa ikony, której chcesz użyć
Najpierw musisz znaleźć adres URL strony dla elementu menu, który chcesz dostosować. Na przykład, powiedzmy, że chcesz zmienić ikonę dla menu „Posty”.
Najedź kursorem myszy na menu Posty, a zobaczysz adres URL, do którego prowadzi, na pasku stanu przeglądarki u dołu strony. Potrzebujesz tylko ostatniej części adresu URL, która w tym przypadku brzmiałaby edit.php.
Następnie przejdź do witryny Dashicons i kliknij ikonę, której chcesz użyć.
Kliknięcie dowolnej ikony wyświetli jej nazwę i „slug” na górze. W tym momencie musisz skopiować „slug”, ponieważ będzie on potrzebny w następnym kroku.
Po wykonaniu tej czynności przejdź do strony Fragmenty kodu » + Dodaj fragment i najedź kursorem myszy na pole „Dodaj własny kod (nowy fragment)”.
Następnie po prostu kliknij przycisk „+ Dodaj niestandardowy fragment kodu”, który się pojawi.
Na następnym ekranie podaj tytuł swojego fragmentu i wybierz Fragment PHP w opcji Typ kodu.
Następnie możesz skopiować i wkleić poniższy kod do pola edytora kodu:
function change_post_menu_icon() {
global $menu;
// Loop through the menu items
foreach ($menu as $key => $menu_item) {
// Find the "Posts" menu item (default URL is 'edit.php')
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
// Change the icon to a different Dashicon class
$menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
}
}
}
add_action('admin_menu', 'change_post_menu_icon');
Nie zapomnij zmienić dashicons-format-aside na skopiowany wcześniej identyfikator.
Twój kod będzie wyglądał tak w edytorze:
Następnie musisz poinformować WordPress, gdzie ten kod ma zostać uruchomiony.
Ikony menu administracyjnego pojawiają się w obszarze administracyjnym WordPress. Na tej samej stronie przewiń do sekcji Wstawianie i wybierz „Tylko administrator” w opcji Lokalizacja.
Na koniec przełącz swój fragment na Aktywny i kliknij przycisk „Zapisz fragment”, aby zapisać zmiany.
WordPress zacznie teraz używać ikony, którą wybrałeś dla strony Posty.
Przykład 2. Użyj ikony Font Awesome dla elementu menu w obszarze administracyjnym WordPressa
Domyślna biblioteka Dashicon ma ograniczony zestaw ikon. Dobrą wiadomością jest to, że możesz użyć biblioteki czcionek i ikon, takiej jak Font Awesome, która ma znacznie większy zestaw ikon.
Jednak oznacza to, że będziesz musiał załadować Font Awesome, co może nieznacznie spowolnić obszar administracyjny WordPressa (tylko o kilka milisekund).
Zanim dodasz jakikolwiek kod, najpierw musisz znaleźć ikonę, której chcesz użyć. Przejdź do strony Font Awesome i przełącz się na Bibliotekę Darmową.
Zobaczysz wszystkie dostępne ikony za darmo.
Kliknij ikonę, której chcesz użyć, a otworzy się ona w wyskakującym okienku. Stąd musisz skopiować wartość Unicode ikony.
Następnie przejdź do strony Fragmenty kodu » + Dodaj fragment w swoim panelu WordPress.
Kliknij przycisk „+ Dodaj niestandardowy fragment” w polu „Dodaj swój niestandardowy kod (nowy fragment)”.
Na następnym ekranie podaj tytuł dla swojego fragmentu i wybierz opcję PHP Snippet jako Typ kodu.
Następnie możesz skopiować i wkleić poniższy kod do pola edytora kodu:
// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');
// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
global $menu;
foreach ($menu as $key => $menu_item) {
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
$menu[$key][4] .= ' custom-post-menu-class';
}
}
}
add_action('admin_menu', 'add_custom_post_menu_class');
// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
echo '<style>
.custom-post-menu-class .wp-menu-image:before {
font-family: "Font Awesome 5 Free" !important;
content: "\f015"; /* Unicode for the Font Awesome icon */
font-weight: 900; /* Needed for solid icons */
}
</style>';
}
add_action('admin_head', 'custom_admin_menu_icon');
Nie zapomnij zastąpić \f015 skopiowaną wcześniej wartością Unicode.
Twój kod będzie wyglądał tak w edytorze:
Następnie musisz poinformować WordPress, gdzie ten kod ma zostać uruchomiony.
Ikony menu administracyjnego pojawiają się w obszarze administracyjnym WordPress, więc możesz przewinąć do sekcji Wstawianie i wybrać opcję „Tylko administrator” jako opcję Lokalizacja.
Na koniec przełącz swój fragment na Aktywny i kliknij przycisk „Zapisz fragment”, aby zapisać zmiany.
WordPress zacznie teraz używać ikony, którą wybrałeś dla strony Posty.
Bonus: Dodaj ikony dla niestandardowych typów postów w WordPressie
Niestandardowe typy postów pozwalają tworzyć unikalne rodzaje treści dla Twojej witryny WordPress. Nie są to domyślne posty ani strony, ale coś całkowicie oryginalnego dla Twojej witryny.
Jeśli używasz niestandardowego typu posta na swojej stronie WordPress, możesz chcieć zmienić jego ikonę, aby łatwo go zidentyfikować.
W takim przypadku zapoznaj się z naszym szczegółowym poradnikiem na ten temat, który pokazuje wiele sposobów na zmianę lub dodanie ikon dla niestandardowych typów postów.
Więcej sposobów na dostosowanie panelu administratora WordPress 🎁
Zmiana ikon menu to tylko jeden ze sposobów, aby panel WordPressa był bardziej dopasowany do Twojej witryny lub klientów. Jeśli chcesz pójść o krok dalej, oto kilka innych poradników, które pomogą Ci dostosować i ulepszyć środowisko administratora:
- Jak dodawać i dostosowywać kolumny administracyjne w WordPressie
- Jak dostosować panel administracyjny WordPress (Wskazówki)
- Najlepsze wtyczki do panelu administratora WordPress (porównanie)
- Wtyczki i wskazówki dotyczące ulepszenia obszaru administracyjnego WordPress
- Jak zmienić stopkę w panelu administracyjnym WordPress
Mamy nadzieję, że ten artykuł pomógł Ci zmienić lub dodać ikony administratora w WordPress. Możesz również sprawdzić jak oznaczyć marką panel administratora WordPress lub zapoznać się z tymi eksperckimi wskazówkami dotyczącymi dostosowywania obszaru administratora WordPress w celu lepszego przepływu pracy.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.