Czasami przychodzi potrzeba dodania własnej ikony do menu w panelu użytkownika. Ot, powiedzmy, że piszemy dużą, skomplikowaną i zaawansowaną wtyczkę. Potrzebujemy mnóstwa miejsca na własne ustawienia (jak korzystać z Settings API możesz poczytać w dedykowanym kursie). Być może chcielibyście w takim przypadku dodać swoją ikonę do takiego menu? Ja to zrobiłem i efekt wygląda tak:
Menu jest w tej chwili aktywne, więc ikona jest biała. Gdy jest nieaktywne, jest szara, jak reszta. Jak to zrobić? Na szczęście nie jest to takie trudne. Nazwałbym to nawet banalnie prostym.
Zacznę od miejsca menu. Moje menu ma wyświetlać ustawienia, dla różnych wtyczek, które buduję. Podjąłem więc decyzję o stworzeniu menu, które będzie zawierało w sobie ustawienia do wszystkich wtyczek, jakie piszę teraz i jakie, mam nadzieję, napiszę w przyszłości. Ot, jedna firma, jedno miejsce. Nie będzie się mylić, nie trzeba będzie szukać.
Przygotowałem sobie ikonę w programie do grafiki wektorowej, następnie przekonwertowałem ją do SVG i wyszło coś takiego:
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="PhylaxLogo"> <metadata id="PhylaxLogo-Layer"/> <path fill="#9ea3a8" d="M60 28l-9 -4c-2,-2 -6,-4 -8,-8l-9 -14c-1,2 -1,4 -1,7 0,1 -1,3 -1,3 -18,-19 2,-1 -14,8 -5,4 -2,7 -6,10 -2,2 -9,6 -10,7 -3,3 5,7 7,8 4,2 9,-2 13,-2 1,0 11,4 12,4 4,3 3,8 5,12 15,-6 24,-16 21,-33z"/> </g> </svg> |
Teraz dodaję pozycję do menu:
|
1 |
add_menu_page( __( 'Phylax Plugins Settings', 'analytics-head' ), 'Phylax', 'manage_options', 'phylax-settings', function () {}, '', 81 ); |
Przedostatnia pozycja to ikona właśnie. Więc trzeba ją dodać… w postaci łańcucha kodowanego w Base64. Ja zrobiłem to tak:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$icon = '<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="PhylaxLogo"> <metadata id="PhylaxLogo-Layer"/> <path fill="#9ea3a8" d="M60 28l-9 -4c-2,-2 -6,-4 -8,-8l-9 -14c-1,2 -1,4 -1,7 0,1 -1,3 -1,3 -18,-19 2,-1 -14,8 -5,4 -2,7 -6,10 -2,2 -9,6 -10,7 -3,3 5,7 7,8 4,2 9,-2 13,-2 1,0 11,4 12,4 4,3 3,8 5,12 15,-6 24,-16 21,-33z"/> </g> </svg>'; $icon = 'data:image/svg+xml;base64,' . base64_encode( $icon ); add_menu_page( __( 'Phylax Plugins Settings', 'analytics-head' ), 'Phylax', 'manage_options', 'phylax-settings', function () {}, $icon, 81 ); |
O czym trzeba pamiętać… o „fill” przy ścieżkach „path”, dlatego, że WordPress sam je sobie pokoloruje – w szarość, gdy ikona jest nieaktywna i na biało, gdy ikona jest aktywna. Prawda, że proste?