Kiedy tworzymy strony WordPress dla klientów, często dodajemy niestandardowe widżety do panelu. Jest to prosty sposób na wyświetlanie pomocnych notatek, linków lub instrukcji bezpośrednio tam, gdzie użytkownik się loguje.
Domyślny pulpit nie zawsze pokazuje informacje, których ludzie faktycznie potrzebują. Dlatego lubimy go dostosowywać – aby obszar administracyjny był bardziej użyteczny i osobisty.
Możesz chcieć wyświetlić powitalną wiadomość, dane kontaktowe wsparcia lub krótki samouczek. Jaki by nie był powód, jest to łatwe do zrobienia, gdy już wiesz jak.
W tym przewodniku pokażemy Ci, jak dodać niestandardowy widżet pulpitu w WordPress – za pomocą kodu lub wtyczki, w zależności od preferencji.
Czym są widżety pulpitu administracyjnego WordPress?
Widżety pulpitu to małe pola, które widzisz po zalogowaniu się do swojej witryny WordPress. Pokazują szybkie informacje, pomocne linki i aktualizacje dotyczące Twojej witryny.
Domyślnie WordPress oferuje widżety takie jak „W skrócie”, „Aktywność”, „Stan witryny” i „Szybki szkic”. Ale możesz dodawać własne widżety z niestandardową zawartością, która odpowiada Twoim potrzebom.
Szybka wskazówka: Każdy użytkownik Twojej witryny może wybrać, które widżety chce zobaczyć. Mogą je wyświetlać, ukrywać lub zmieniać ich kolejność, aby dopasować je do swojego przepływu pracy.
Dlaczego widżety pulpitu są pomocne:
- Pokazują przydatne dane w momencie logowania.
- Możesz szybko uzyskać dostęp do narzędzi lub treści bez przeszukiwania menu.
- Niestandardowe widżety pozwalają spersonalizować pulpit zgodnie z Twoimi konkretnymi potrzebami.
Gdzie ich szukać:
Te widżety pojawiają się na głównym ekranie pulpitu nawigacyjnego w obszarze administracyjnym WordPressa. Możesz je przesuwać, przeciągając i upuszczając, lub ukrywać za pomocą zakładki Opcje ekranu na górze.
Dlaczego i jak używamy niestandardowych widżetów administracyjnych w WordPressie
Niestandardowe widżety pulpitu nawigacyjnego to świetny sposób na personalizację doświadczenia administracyjnego WordPress. Używaliśmy ich na wielu stronach klientów do wyświetlania pomocnych informacji, linkowania do ważnych narzędzi lub upraszczania procesu wdrażania.
Niezależnie od tego, czy prowadzisz własną witrynę, czy zarządzasz kilkoma dla klientów, niestandardowe widżety mogą zaoszczędzić czas i uczynić obszar administracyjny bardziej użytecznym.
Przykłady z życia wzięte:
- Personalizacja: Dodaj powitalną wiadomość, wyświetl kluczowe statystyki lub linki do stron, z których często korzysta Twój zespół.
- Dla deweloperów: Deweloperzy często tworzą widżety, które kierują klientów za pomocą skrótów do typowych zadań, takich jak aktualizacje lub kopie zapasowe.
Jak ich używamy na naszych stronach:
Korzystamy z zestawu niezbędnych wtyczek WordPress, a wiele z nich zawiera wbudowane widżety pulpitu nawigacyjnego.
Jednym z często używanych przez nas jest widżet przeglądu All in One SEO. Pokazuje wyniki TruSEO dla naszych treści i zawiera bezpośrednie linki do ich poprawy.
Używamy również widżetu MonsterInsights. Daje nam szybki wgląd w ruch na naszej stronie internetowej i jej wydajność bezpośrednio z pulpitu.
Jest również elastyczny – możemy wybrać, jakie dane mają być wyświetlane w zależności od tego, kto z niego korzysta.
Ponieważ każdy członek zespołu ma inne potrzeby, może pokazywać lub ukrywać widżety i dowolnie przestawiać pulpit. To mała funkcja, która ma ogromny wpływ na produktywność.
Jak tworzyć niestandardowe widżety administracyjne WordPress
Istnieją dwa główne sposoby tworzenia niestandardowych widżetów pulpitu WordPress. Możesz użyć poniższych szybkich linków, aby przejść do metody, której chcesz użyć:
- Metoda 1: Tworzenie widżetów pulpitu za pomocą niestandardowego kodu (bardziej konfigurowalne)
- Method 2: Create Custom Dashboard Widget Using Plugin (Easier)
Metoda 1: Tworzenie widżetów pulpitu za pomocą niestandardowego kodu (bardziej konfigurowalne)
W przypadku tej metody będziesz musiał dodać niestandardowy kod do swojej witryny WordPress, aby utworzyć widżet pulpitu nawigacyjnego. Wymaga to podstawowej znajomości programowania WordPress. Więc jeśli nie chcesz pisać kodu, możesz przejść do następnej metody.
Pokazujemy tę metodę najpierw, ponieważ jest ona bardziej elastyczna i pozostawia miejsce na dodanie dowolnego kodu, który chcesz uruchomić w swoim niestandardowym widżecie.
Pokażemy Ci potrzebny kod, a następnie możesz go dostosować, aby dodać swój kod za pomocą PHP, HTML lub JS.
Jeśli chodzi o dodawanie niestandardowego kodu do witryny WordPress, wielu użytkowników myśli o pliku functions.php motywu. Chociaż ta metoda działa, wierzymy, że istnieje lepszy i bezpieczniejszy sposób obsługi fragmentów niestandardowego kodu – używając WPCode.
Edycja pliku functions.php czasami może spowodować awarię witryny, jeśli w kodzie wystąpi błąd. Ponadto, stracisz swój niestandardowy kod, jeśli przełączysz lub zaktualizujesz motyw bez tworzenia kopii zapasowej zmian.
WPCode z drugiej strony pozwala bezpiecznie dodawać niestandardowy kod bez awarii witryny. Ułatwia również zarządzanie fragmentami kodu oraz ich włączanie i wyłączanie w razie potrzeby.
Uwaga: Dostępna jest również darmowa wersja o nazwie WPCode Lite, której możesz użyć do tego samouczka. Zalecamy jednak przejście na płatny plan, aby odblokować więcej funkcji.
Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Więcej szczegółów znajdziesz w naszym artykule o instalowaniu wtyczki WordPress.
Po aktywacji musisz przejść do strony Code Snippets » +Dodaj Snippet i wybrać ‘Dodaj swój niestandardowy kod (Nowy Snippet)’, aby utworzyć nowy snippet.
Na następnym ekranie musisz wprowadzić nazwę dla swojego niestandardowego kodu i wybrać „Fragment PHP” jako „Typ kodu”.
Następnie dodaj poniższy kod do pola Podgląd kodu:
//hooks up your code to dashboard setup
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
// Register your custom WordPress admin dashboard widget
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
function custom_dashboard_help() {
// Replace this with any code you want to show in your custom admin widget
echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
}
Oto jak powinno to wyglądać w Twoim interfejsie WPCode:
Oto krótkie wyjaśnienie kodu:
Funkcja my_custom_dashboard_widgets() rejestruje niestandardowy widżet za pomocą funkcji wpb_add_dashboard_widget(). Przyjmuje ona trzy argumenty. Pierwszy to identyfikator niestandardowego widżetu, drugi to tytuł widżetu, a trzeci argument to funkcja wywołania zwrotnego.
custom_dashboard_help() to nasza funkcja zwrotna, a wewnątrz niej dodaliśmy kod HTML, który chcemy wyświetlić, gdy widżet jest prezentowany.
Podłączyliśmy naszą funkcję my_custom_dashboard_widgets do haka wp_dashboard_setup za pomocą add_action. Ten hak zasadniczo przygotowuje stronę pulpitu do wyświetlenia.
Po dodaniu niestandardowego kodu musisz przewinąć w dół do sekcji „Wstawienie” i wybrać „Tylko administrator” z listy rozwijanej Lokalizacja.
Na koniec kliknij przycisk „Zapisz fragment” i przełącz opcję statusu na „Aktywny”.
To wszystko. Możesz teraz odwiedzić stronę Pulpitu, aby zobaczyć swój niestandardowy widżet pulpitu administratora WordPress w akcji.
Metoda 2: Utwórz niestandardowy widżet pulpitu za pomocą wtyczki (łatwiejsze)
Ta metoda jest łatwiejsza, ale umieściliśmy ją jako drugą, ponieważ jest nieco mniej elastyczna niż dodawanie niestandardowego kodu.
W tej metodzie użyjemy wtyczki Ultimate Dashboard. Jest to jedna z najlepszych wtyczek do panelu administracyjnego WordPress i pomaga łatwo tworzyć niestandardowe widżety administracyjne.
Więcej szczegółów znajdziesz w naszej kompletnej recenzji Ultimate Dashboard.
Najpierw musisz zainstalować i aktywować wtyczkę Ultimate Dashboard. Więcej szczegółów znajdziesz w naszym artykule o instalowaniu wtyczki WordPress.
Po aktywacji musisz odwiedzić stronę Ultimate Dash…» Dodaj nowy. Najpierw musisz podać tytuł dla swojego widżetu, a następnie wybrać Typ widżetu.
Istnieją trzy typy widżetów, które możesz utworzyć:
- Widżet ikony – Pokaż dużą ikonę i skieruj ją na dowolną stronę w Twojej witrynie.
- Widget tekstowy – Używa edytora wizualnego, w którym można dodawać dowolny tekst z podstawowymi opcjami formatowania.
- Widżet HTML – Dodaj kod HTML do swojego niestandardowego widżetu.
Przyjrzyjmy się każdemu z nich.
1. Utwórz niestandardowy widżet ikony
Wybierz „Widżet ikon” jako „Typ widżetu”, a następnie wybierz ikonę, którą chcesz wyświetlić. Domyślnie dostępna jest ograniczona liczba ikon do wyboru.
Poniżej możesz dodać tekst pod etykietą „Podpowiedź”, aby wyjaśnić użytkownikom, co się stanie po kliknięciu ikony. Na przykład: „Przenosi do strony ustawień WordPress”.
Następnie dodaj link, do którego chcesz wysłać użytkowników po kliknięciu ikony.
Na koniec kliknij „Opublikuj”, aby zapisać zmiany i odwiedź Pulpit, aby zobaczyć widżet w akcji.
Tak to będzie wyglądać.
2. Utwórz niestandardowy widżet tekstowy
Jeśli jeszcze tam nie jesteś, przejdź do strony Ultimate Dash…» Dodaj nowy. Wybierz „Widget tekstowy” jako typ widżetu.
Wtyczka wyświetli wizualny edytor tekstu (ten sam, co stary klasyczny edytor), w którym możesz dodać dowolny tekst, który chcesz wyświetlić, z podstawowym formatowaniem HTML.
Po zakończeniu kliknij „Opublikuj”, aby zapisać zmiany.
Możesz teraz odwiedzić swój pulpit administracyjny, aby zobaczyć ten niestandardowy widżet administracyjny w akcji.
3. Utwórz niestandardowy widżet HTML
Jeśli jeszcze tam nie jesteś, musisz przejść do strony Ultimate Dash…» Dodaj nowy. Wybierz „Widżet HTML” jako typ widżetu.
Wtyczka pokaże Ci edytor HTML, w którym możesz dodać dowolny kod HTML z osadzonym CSS.
Po zakończeniu kliknij „Opublikuj”, aby zapisać zmiany.
Możesz teraz odwiedzić swój pulpit administracyjny, aby zobaczyć ten niestandardowy widżet administracyjny w akcji.
Korzystając z Ultimate Dashboard, możesz tworzyć dowolną liczbę niestandardowych widżetów i mieszać różne typy widżetów, aby stworzyć pomocne doświadczenie pulpitu administratora.
Wprowadź swój panel administracyjny WordPress na wyższy poziom
Obszar administracyjny WordPressa to miejsce, w którym większość właścicieli witryn spędza dużo czasu na pisaniu treści, tworzeniu stron, zarządzaniu zamówieniami i nie tylko.
Oto kilka dodatkowych zasobów dotyczących optymalizacji pulpitu administracyjnego WordPress:
- Jak dostosować pulpit administratora WordPress
- Jak zastosować white label do panelu administracyjnego WordPress
- Jak tworzyć zautomatyzowane przepływy pracy w WordPressie
- Wtyczki i wskazówki dotyczące ulepszenia obszaru administracyjnego WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dodać niestandardowe widżety pulpitu w obszarze administracyjnym WordPress. Możesz również zapoznać się z naszym przewodnikiem po bezpieczeństwie WordPress lub zapoznać się z tym samouczkiem na temat ukrywania niepotrzebnych elementów menu w obszarze administracyjnym.
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.
Brandon
Bardzo przydatne. Dziękuję.
Wsparcie WPBeginner
Cieszę się, że było to przydatne!
Admin
Jef Vermeire
Czy można dodać wiele widżetów tego samego typu na pulpicie nawigacyjnym WordPress. Na przykład, czy mogę dodać niestandardowy widżet „custom_help_widget” dwukrotnie na moim pulpicie nawigacyjnym?
Wsparcie WPBeginner
You could if you wanted to, you would want to add an additional line of the wp_add_dashboard_widget if you wanted it twice
Admin
Xavier Barbot
Very useful, thank you, I’ve tried all the plugins but none achieved adding a simple widget for my clients, very slick and easy to replicate by cresting a custom plugin, I give you 5 stars!
Wsparcie WPBeginner
Glad our recommendation was helpful
Admin
Syed Ali Ahmed
Dzięki za udostępnienie, to jest zbyt niesamowite, uwielbiam to.
Wsparcie WPBeginner
Glad you found our guide helpful
Admin
Mike
Czy można stylizować widżet niestandardowymi atrybutami za pomocą HTML lub CSS?
Wsparcie WPBeginner
Można by, ale to wykracza poza zakres naszych artykułów.
Admin
daan van middendorp
Jak mogę tego użyć z niestandardową rolą?
Wsparcie WPBeginner
Jeśli Twoja niestandardowa rola może widzieć widżety pulpitu, powinna również widzieć niestandardowy widżet.
Admin
haqem
jak umieścić ten niestandardowy widżet w obszarze „Dodaj nowy wpis” do pisania
Ron Sierra
Zapytano o to raz, ale nie mogłem znaleźć odpowiedzi. Jak stworzyć wiele widżetów pulpitu?
Bjornen
Jak dodać funkcję wp_mail do tego widżetu?
Oznacza to; jak zapewnić klientowi formularz kontaktowy w tym widżecie?
Vishah
Jak mogę dodać przycisk?
Wade
Użyłem twojego kodu i dostałem biały ekran śmierci. WP 4.7.2
Jakieś pomysły?
Wsparcie WPBeginner
Cześć Wade,
Kod można usunąć za pomocą FTP. Zapoznaj się również z naszym przewodnikiem, jak naprawić biały ekran śmierci w WordPressie
Admin
gobinda das
czy mogę zmienić nagłówek motywu Flowtown na coś innego
Javier
Cześć, próbuję tworzyć niestandardowe widżety na podstawie użytkownika. Każdy użytkownik potrzebuje widżetu z innym tekstem.
Czy jest jakiś sposób, aby to osiągnąć?
David Guerreiro
To bardzo proste! Za pomocą PHP pobierz bieżącego użytkownika w funkcji, której używasz do wyświetlania zawartości metaboksu i zmień HTML w zależności od pobranego użytkownika. Spójrz na to:
Lại Đình Cường
Witaj Syedzie Balkhi, jak mogę dodać nowy widżet administratora z kolejnością?
shakun
Jak dodać wiele widżetów do pulpitu nawigacyjnego
Nishant
Próbowałem wstawić do_shortcode() z krótkim kodem dla formularza kontaktowego, aby dać użytkownikowi szybki dostęp do zgłaszania błędów lub udzielania informacji zwrotnych, ale to nie działa... czy masz pomysł, jak sprawić, aby CF 7 działał z tym?
Dzięki
Dustin
Byłoby świetnie to wiedzieć. Próbuję również użyć skróconego kodu w widżecie pulpitu nawigacyjnego.
Mike
To nie działa u mnie w wersji 3.5. Czy są jakieś aktualizacje, aby to zadziałało? Dzięki!
smayzes
Czy można to zrobić za pomocą OOP?
np.:
wewnątrz klasy:
wp_add_dashboard_widget(‘custom_help_widget’, ‘Pomoc i wsparcie’, array($this, ‘customDashboardHelp’));
function customDashboardHelp() {
echo ‘<p>Witamy w Twoim niestandardowym CMS!’;
}
Nick Powers
Wiem, że Twoja wiadomość jest dość stara, ale dla dobra innych, którzy tu trafią i mają to samo pytanie. Tak, działa z OOP, tak jak wskazałeś.
luxsub
Czy można umieścić widżet z AdSense na pulpicie dla witryny wieloużytkownikowej?
y3kgeek
Świetny pomysł. Co jeśli chcę stworzyć niestandardowy widżet pulpitu, który będą widzieć tylko osoby z określoną rolą użytkownika, powiedzmy Współpracujący Pisarz?
Personel redakcyjny
Możesz to zrobić, używając instrukcji warunkowej if user_can lub nawet ról użytkowników.
Admin
DramaKing
Wiem, że minęły trzy lata, ale jeśli ktoś inny trafi tutaj szukając odpowiedzi (tak jak ja), oto jak to zrobiłem. Nie wiem dużo o kodowaniu, więc prawdopodobnie nie jest to czyste, ale tak udało mi się sprawić, że działa:
add_action(‘wp_dashboard_setup’, ‘dashboard_widget_mail’);
function dashboard_widget_mail() { global $wp_meta_boxes;
if ( current_user_can( ‘delete_users’ ) ) {
wp_add_dashboard_widget(‘custom_mail_widget’, ‘Widgetname to show up on dashboard’, ‘custom_dashboard_mail’);
} return true;
}
function custom_dashboard_mail() {
echo ‘Twój własny tekst tutaj.’;
}
—
Możesz oczywiście zastąpić „delete_users” dowolną uprawnieniem, które chcesz.
Martin
Dzięki za to! Działa świetnie.
Mam tylko szybkie pytanie:
Jeśli chcę dodać 2 lub więcej niestandardowych widżetów w pliku functions.php, czy muszę zmienić nazwy „akcji” i „funkcji”?
Personel redakcyjny
Tak, musiałbyś dodać dwie oddzielne funkcje i akcje...
Admin
ACS04
Brzmi dobrze, ale lepiej byłoby stworzyć prosty plugin, aby to zrobić, w ten sposób ten widżet będzie niezależny od motywów… Czy tak nie uważasz?
Personel redakcyjny
Cóż, możesz, ale w naszym przypadku zawiera informacje o wsparciu, które chcemy, aby nasi klienci znali. Jest to głównie dla niestandardowych projektów motywów, więc jest to przydatne tylko wtedy, gdy nasz motyw jest aktywowany.
Admin
Frankie Jarrett
Thanks a lot for the easy example. I was able to get something up and running in just a few seconds
Stéphane
Wow! Nigdy wcześniej nie słyszałem o tym triku… Bardzo miło, dziękuję!
Daniel
Worked like a charm. Using this as a workaround for one of my membership site that locked all dashboard menus; this will point members to the appropriate edit posts links again.
richard
podczas tworzenia dwóch widżetów, jak sprawić, aby były obok siebie, zamiast jeden na drugim?
Personel redakcyjny
Cześć Richard, Możesz sprawić, że Twój widżet będzie wyświetlany na samej górze, używając kodu z WordPress Codex Dashboard API. Nie wiemy, jak ustawić je obok siebie bez ręcznego wprowadzania zmian i zapisywania ich dla klienta. Być może wysłanie e-maila do Jake'a z zapytaniem byłoby dobrym pomysłem.
Pamiętaj jednak, że ustawienia zdefiniowane w functions.php nie zastąpią normalnych ustawień, jeśli użytkownik wcześniej je zmienił. Działa to tylko wtedy, gdy użytkownik nigdy wcześniej nie organizował swojego pulpitu.
Admin
Ash Blue
Użyj display block na najbardziej zewnętrznym elemencie i float left, upewnij się, że ustawisz szerokość, ale to może to zepsuć. Jest to bardzo podobne do układu galerii. Nie jest to zalecane i niekoniecznie tak, jak WordPress zaprojektował widżety (używaj na własne ryzyko).
david
wpmu. Znalazłem /wp-includes/functions.php, ale gdzie powinienem wstawić kod? Dziękuję za pomoc
Personel redakcyjny
W rzeczywistości dodajesz to do pliku functions.php swojego motywu, a nie do pliku rdzeniowego.
Admin
cho
co masz na myśli funkcję motywu.php?
nie mogę znaleźć takiego pliku
Personel redakcyjny
W folderze Twojego motywu znajduje się plik functions.php.
Ash Blue
Ciekawie, zrobiłem to wszystko za pomocą poniższej linii. Czy jedno jest lepsze, czy oba są równie dobre?
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'Kontakt',
));
}
Personel redakcyjny
Twój kod służy do rejestrowania widżetów paska bocznego. Kod, który udostępniamy w tym artykule, służy do dodawania niestandardowego widżetu pulpitu. Kiedy ktoś loguje się do swojego wp-admin, widzi statystyki postów i inne informacje. To pole zostanie tam dodane.
Dwa zupełnie różne tematy.
Admin
Vivek @ InfoEduTech
dzięki za tutorial.
proszę, nie bierz tego źle, kiedy będziesz publikować jakikolwiek artykuł, opublikuj go z odpowiednim zrzutem ekranu, aby było to łatwe dla nowicjuszy.
Jim
To jest niesamowite, dziękuję za udostępnienie.