• Przejdź do głównej nawigacji
  • Przejdź do treści
  • Przejdź do stopki
  • Nowa, darmowa bramka płatności WP PAY! →
  • Moje konto
  • 0
Wtyczki WooCommerce - WP Desk
  • Wtyczki
  • Docs
  • Blog
  • O nas
    • O nas
    • Dlaczego my?
    • Dla społeczności
    • Pracuj z nami
  • Kontakt

Dołącz do ponad 10 000 czytelników

Poradniki WooCommerce i nowości - wprost na Twój e-mail.

Grzegorz Rola

Powiadomienia w panelu administratora - Kompletny poradnik dewelopera

Aktualizacja: 16.01.2019 / WooCommerce

W tym artykule poznasz powiadomienia w panelu administratora. Pokażę Ci typy powiadomień wraz z dodatkowymi opcjami. Nauczysz się, jak dodać takie powiadomienia do swoich wtyczek i motywów. Wykorzystamy gotową bibliotekę, dlatego ograniczysz swój wysiłek do minimum.

Ten poradnik powstał w ramach akcji 5 dla WordPressa.

Podczas pracy w obszarze administracyjnym WordPressa (wp-admin) napotkasz na powiadomienia w panelu administratora (z ang. admin notices). Informują one o wykonanych akcjach, zaktualizowanych ustawieniach, dostępnych aktualizacjach czy błędach.

Część z tych powiadomień dostarcza WordPress. Wtyczki lub motywy również je wyświetlają. W tym poradniku nauczysz się dodawać je w swoich rozwiązaniach.

Zacznę od wdrożenia teoretycznego. W dalszej części artykułu przedstawię Ci gotowe do zastosowania rozwiązanie. Niech nie przerazi Cię zatem spora ilość kodu w pierwszej części artykułu. Docelowo wdrożysz powiadomienia z gotową biblioteką.

Typy powiadomień

W WordPress wbudowane są 4 typy powiadomień:

  • success
  • info
  • warning
  • error

Prezentują się one następująco:

Typy powiadomień w panelu administratora

Jak widzisz, każdy typ powiadomienia ma zdefiniowany swój własny kolor. Nie musisz definiować tych kolorów samodzielnie, gdyż znajdują się one w arkuszach stylów WordPressa.

Kod powiadomień

Kod źródłowy wszystkich typów powiadomień administracyjnych jest praktycznie taki sam. Jedyną różnicą są nazwy klas i treść komunikatu.

Success

Powiadomienie typu success dodasz z użyciem takiego kodu:

Efekt poniżej:

Powiadomienie typu success

Info

Aby dodać powiadomienie informacyjne, użyj takiego kodu:

Przykład ilustruje zrzut ekranu:

Powiadomienie typu info

Warning

Ostrzeżenie dodasz z użyciem klasy notice-warning:

Efekt:

Powiadomienie typu warning

Error

Błędy dodajemy używając klasy notice-error:

Przykładowy błąd prezentuje się tak:

Powiadomienie typu error

Dodatkowe opcje

Po dodaniu klasy is_dismissible powiadomienie uzyskuje funkcjonalność, która umożliwia jego zamknięcie.

Ta funkcja jest realizowana przyciskiem X przy powiadomieniu.

Kod źródłowy powiadomienia wygląda tak:

<div class="notice notice-success is-dismissible">
<p>Success notice.</p>
</div>

A efekt? Zerknij:

Powiadomienie z przyciskiem zamykającym

(zwróć uwagę na przycisk po prawej stronie)

Wyświetlanie powiadomień

Do wyświetlania powiadomień służy akcja admin_notices. Funkcja podpięta pod akcję powinna dodawać kod odpowiedzialny za wyświetlenie powiadomienia (ang. notice).

Przykład poniżej:

Powiadomienie w panelu administratora wyświetlane warunkowo:

Powiadomienie z funkcjonalnością zamykania:

Czas na AJAX-a

Funkcjonalność zamykania powiadomienia w tej postaci nie działa na kolejnych odsłonach strony.

Aby zamknąć powiadomienie na stałe należy użyć AJAX-a. W ten sposób zapiszemy informację o zamknięciu powiadomienia

Zerknij na przykładowy kod:

Biblioteka wpdesk/wp-notice

Sporo tego kodu, prawda? Na szczęście możesz skorzystać z gotowej biblioteki, aby ograniczyć swój wysiłek do minimum.

Biblioteka wp-notice udostępnia funkcje, które pozwalają w maksymalnie prosty sposób wyświetlać powiadomienia w panelu administratora.

Nie ma konieczności dodawania akcji wyświetlających powiadomienia czy obsługujących funkcjonalność zamykania powiadomień.

Biblioteka jest dostępna pod adresem gitlab.com/wpdesk/wp-notice. Jest to projekt otwarty. Każdy może zatem zgłosić nowe funkcjonalności czy poprawki - do czego zachęcam!

Instalacja biblioteki

Gotowy moduł composera

Bibliotekę możesz dołączyć do własnego projektu w prosty sposób. Wystarczy, że skorzystasz z composera. Jest to narzędzie do zarządzania zależnościami.

W katalogu projektu uruchom polecenie:

Następnie dołącz do projektu plik autoloadera:

Ręczna instalacja biblioteki

Jeżeli nie używasz composera, bibliotekę możesz pobrać w postaci archiwum.

Znajdziesz je pod adresem: gitlab.com/wpdesk/wp-notice/-/jobs/artifacts/master/download?job=library

Pobierz i rozpakuj archiwum. Następnie w katalogu dołącz bibliotekę do projektu:

Wyświetlanie powiadomień

Jak wspomniałem, ta gotowa biblioteka ogranicza Twój wysiłek do minimum.

Powiadomienia wyświetlisz z użyciem minimalnej ilości kodu:

Efekt jest taki sam jak wcześniej:

Typy powiadomień w panelu administratora

Jedyna różnica, to mniej linijek kodu do napisania przez Ciebie.

Zamykanie powiadomień

Biblioteka wpdesk/wp-notices dostarcza funkcjonalność zapewniającą obsługę zamykania powiadomień. Aby jej użyć należy ją zainicjować:

Następnie możemy wyświetlić powiadomienie z funkcjonalnością zamykania:

Parametry tej funkcji to:

  • treść komunikatu
  • unikalny identyfikator powiadomienia (zostanie użyty do zapisania informacji o zamkniętym komunikacie)
  • typ powiadomienia - do wyboru:
    • success
    • info
    • warning
    • error

Podsumowanie

W tym artykule przedstawiłem Ci prosty sposób na dodanie powiadomień w panelu administratora do Twojego projektu.

Jak Ci się podoba biblioteka wp-notices? Daj znać w komentarzu poniżej.

Tweet

3 minuty czytania968 wyświetleń

Grzegorz Rola

Wordpress i WooCommerce developer w WP Desk.

WP Desk

WP Desk to największa i najpopularniejsza polska platforma z rozszerzeniami do WooCommerce. Sprawdź, jak WP Desk może pomóc rozwinąć twój e-sklep.

Zobacz wtyczki WooCommerce →

Dołącz do ponad 10 000 czytelników

Poradniki WooCommerce i nowości - wprost na Twój e-mail.

WP Desk › WooCommerce › Powiadomienia w panelu administratora - Kompletny poradnik dewelopera

Footer

WP Desk - Wtyczki WooCommerce

WP Desk to największa i najpopularniejsza polska platforma z rozszerzeniami do WooCommerce. Swoimi rozwiązaniami wspieramy społeczność WooCommerce. Sprawdź, jak WP Desk może pomóc rozwinąć twój e-sklep →

WP Desk

  • O nas
  • Blog
  • Kontakt
  • Dla społeczności
  • Pracuj z nami

Produkty

  • Wtyczki
  • Darmowe wtyczki
  • FAQ
  • Pomoc
  • Program Partnerski

Prawne

  • Regulamin
  • Polityka prywatności
  • Polityka zwrotów
  • Polityka wsparcia

© 2023 WP Desk