jak dodać pasek informacyjny wordpress

Jak dodać pasek z powiadomieniami do strony na WordPress?

W tym wpisie dowiesz się jak dodać pasek z powiadomieniami na Twojej stronie WordPress / WooCommerce używając wtyczki WPFront Notification Bar.
Pomoże Ci to dodać belkę na stronie z ważną informacją, który możesz edytować.

Wtyczkę możesz pobrać tutaj: WPFront Notification Bar

Na samym końcu tego artykułu znajdziesz również wersję wideo tego poradnika. Zaczynajmy!

Do czego służy ta wtyczka?

Wtyczka WPFront Notification Bar pozwala dodać pasek z informacją do Twojej strony dzięki czemu możesz poinformować klientów na przykład o jakiejś promocji w Twoim sklepie, urlopie czy też o progu kwotowym od którego można uzyskać darmową dostawę. Możliwości jest wiele i tylko od Ciebie zależy jaką informację umieścisz na takim pasku. Używam tej wtyczki od dawna i mogę ją z czystym sumieniem polecić. Zainstalowałem ją również w sklepie z biżuterią handmade z kamieni naturalnychglossyllery.pl, który stworzyłem.

Zanim przejdziesz do instalacji wtyczki, zrób kopie zapasowe. Podczas instalacji, włączania i używania wtyczki zawsze jest ryzyko jakichś błędów w związku z czym lepiej się zabezpieczyć.

Instalacja

Przejdźmy do instalacji wtyczki. Po lewej stronie wybieramy wtyczki > dodaj nową. W polu wyszukiwania wpisujemy „WPFront Notification Bar” i instalujemy wtyczkę.

Następnie włącz wtyczkę a gdy to zrobisz, w zakładce „Ustawienia” pojawi Ci się nowa pozycja o nazwie „Notification Bar„. W związku z tym, żeby przejść do ustawień wtyczki wystarczy ją kliknąć.

Ustawienia wtyczki

Twoim oczom ukaże się strona na której możesz edytować ustawienia. Opiszę najważniejsze i najczęściej używane ustawienia. Zaczyniemy od pierwszej sekcji czyli „Display„.

Pierwsza opcja to Enabled – należy ją kliknąć włączyć pasek.
Druga opcja to Preview Mode – po kliknięciu tej opcji, pojawi Ci się link, który pozwoli Ci podejrzeć wprowadzone zmiany.
Trzecia opcja to Position – tutaj możesz wybrać czy pasek powiadomień ma sie wyświetlać na samej górze czy na samym dole.
Następnie Fixed at Position – zaznaczając tę opcję sprawisz, że pasek powiadomień WordPress będzie przyklejony – tzw. sticky. Oznacza to, że będzie się poruszał razem z użytkownikiem, który przewija stronę.

Przejdźmy trochę niżej do opcji Display Close Button. Po włączeniu tej opcji, w prawym rogu paska pojawi się przycisk w kształcie x, za pomocą którego będzie można zamknąć (wyłączyć) pasek.
Dalej mamy Auto Close After – pozwala wyznaczyć czas po upłynięciu, którego pasek zniknie.
Siódma opcja to Keep Closed oraz pokrewna Keep Closed For. Pierwsza to ustawienie, które chowa pasek na wszystkich stronach w przypadku gdy na jednej z nich użytkownik go zamknie a druga to wybór przez ile czasu w dniach pasek ma pozostać ukryty dla danego użytkownika.

W tej sekcji zwrócę Twoją uwagę na jeszcze jedną opcję czyli Display On Devices. Możesz wybrać czy wyświetlać baner na wszystkich urządzeniach (All devices), małych urządzeniach (Small devices) czy tylko na dużych (Except small devices).

Zakładka „Content”

  1. Set Maximum Width for Message – ustaw maksymalną szerokość dla tekstu
  2. Message Text – treść na pasku powiadomień
  3. Message Text Preview – podgląd treści
  4. Process Shortcode – włącz działanie shortcodów w tekście
  5. Display Button – włącz przycisk obok tekstu
  6. Button Text – tekst na przycisku, Button Text Preview – podgląd tekstu na przycisku
  7. Button Action – tutaj możesz ustawić adres URL na który użytkownik zostanie przeniesiony po kliknięciu, ustawienia dotyczące SEO oraz czy wykonać kod JavaScript
  8. Close Bar on Button Click – zamknij pasek po kliknięciu przycisku

Zakładka Filter

W tej zakładce możesz ustawić reguły dotyczące wyświetlania paska.
Trzy pierwsze opcje dotyczą ustawienia daty startu i zakończenia wyświetlania baneru w formacie Rok/Miesiąc/Dzień.

Dalej jest Display on Pages – na których stronach ma być wyświetlany pasek.
Następnie Display for User Roles – ustawienia wyświetlenia dla użytkowników z konkretnymi rolami.

Zakładka „Color”

Tutaj znajdziesz ustawienia dotyczące kolorów na banerze.
Przetłumaczę ustawienia po kolei zaczynając od góry:
1. Kolor paska (wybierając dwa kolory stworzysz gradient)
2. Kolor teksu na banerze
3. Kolor przycisku
4. Kolor tekstu na przycisku
5. Kolor przycisku, który pozwala ponownie wyświetlić baner
6. Kolor przycisku zamykającego pasek

Ostatnia sekcja pozwala Ci edytować stronę za pomocą CSS

Sprawdź działanie

Po ustawieniu opcji zgodnie z własnym pomysłem, należy kliknąć „Zapisz zmiany„. Jeśli chcesz zobaczyć efekty na Twojej stronie kliknij „Preview mode„, który opisywałem wcześniej lub wyczyść cache i otwórz nowe okno prywatne/incognito w przeglądarce i wpisz adres.

Na samej górze widać pasek z informacją


To wszystko! Właśnie ustawiłeś/aś pasek z powiadomieniami WordPress / WooCommerce. Jak widać to nic trudnego i na pewno sobie poradzisz.


Wolisz wersję wideo? Sprawdź wideo-poradnik:

W tym poradniku to już wszystko. Dziękuję za poświęcony czas i zapraszam do śledzenia mojego kanału na YouTube:
Partofweb.pl – Strony internetowe & biznes online.


Jako PARTOFWEB świadczę usługi tworzenia blogów, stron i sklepów internetowych. Pomagam przy optymalizacji SEO oraz diagnostyce usterek witryny. Jeśli potrzebujesz pomocy napisz do mnie za pomocą formularza kontaktowego lub e-mailem na kontakt@partofweb.pl.

Podobne wpisy

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *