Jak tworzyć paski informacyjne w WordPress

Jeśli masz już witrynę WordPress z czasopismami, gazetami lub czytaniem blogów…, możesz mieć trudności z przyciągnięciem uwagi odwiedzających do wyróżniających się postów, ponieważ Twoja witryna jest przeładowana zbyt dużą ilością informacji. Aby rozwiązać ten problem, paski informacyjne są zdecydowanie idealną funkcją, która sprawi, że Twoja witryna do czytania będzie bardziej czytelna, pouczająca i wyjątkowa!

W tym poście pokażemy Ci, czym są paski informacyjne, dlaczego powinniśmy ich używać i jak stworzyć imponujący pasek informacyjny za pomocą kilku prostych, szybkich kroków.

Zacznijmy!

Czym są paski informacyjne?

Na niektórych typach witryn, takich jak czasopisma online, gazety online, możesz zobaczyć przewijane slajdy z wiadomościami u dołu lub w nagłówku, stopce lub pasku bocznym. Te slajdy wyglądają jak te w telewizyjnych programach informacyjnych.

Spoglądając na pasek wiadomości w programie telewizyjnym lub na stronie czasopisma, widzowie mogą uzyskać najgorętsze i najbardziej zauważalne informacje. Są to zazwyczaj wiele części informacji, które nazywane są kleszcze, w jeden news ticker.

Jak na poniższym gifie, czy widzisz nagłówki wiadomości? Tak działa pasek informacyjny.

Przykład paska wiadomości w WordPressie

Dlaczego powinniśmy używać pasków wiadomości?

Paski wiadomości mają różne zalety dla różnych typów witryn:

• W przypadku czasopism paski informacyjne pomagają wskazać, jakie informacje i posty należy zwrócić uwagę.
• W przypadku portfolio zwracają uwagę rekruterów na zauważalne doświadczenie zawodowe i nagrody.
• W przypadku innych rodzajów witryn same paski informacyjne staną się główną atrakcją witryn, aby na przykład Twoje blogi były bardziej atrakcyjne i profesjonalne.

W ten sposób paski informacyjne są wyraźnie przydatnym narzędziem dla właścicieli witryn. Co więcej, bardzo łatwo jest dodać paski wiadomości do swojej witryny WordPress. Przejdźmy do następnej części i zdobądź jedną dla siebie!

Jak dodać paski wiadomości w WordPress?

Pasek wiadomości można dodać na wiele sposobów.

Na początku możesz użyć gotowego motywu z paskami wiadomości ; to byłoby najłatwiejsze. Wystarczy dokładnie przeczytać dokumentację motywu.

Jednak nie każdy motyw ma taki gotowy pasek wiadomości. Więc w takich przypadkach możesz pomyśleć o użyciu kreatorów stron lub wtyczek.

W tym poście użyjemy darmowej wtyczki o nazwie Ditty News Ticker plugin . Jest darmowy, bardzo łatwy w użyciu i wysoce konfigurowalny . Wystarczy go pobrać i aktywować na pulpicie nawigacyjnym.

Możesz przeczytać więcej o tym, jak zainstalować wtyczkę tutaj.

Teraz nie wahajmy się dłużej i wykonaj nasze 3 kroki, aby mieć niesamowity pasek wiadomości na swojej stronie:

Krok 1: Dodaj nowy pasek informacyjny

Najpierw przejdź do Pasek wiadomości > Dodaj nowy .

Na następnym ekranie zobaczysz 5 zakładek poniżej: Dodaj tytuł, Skrót, Tryb paska, Typ paska i Ustawienia globalne . Te zakładki służą do konfigurowania i wyświetlania pasków wiadomości.

Czy uważasz, że jest zbyt wiele rzeczy, o których warto pamiętać? Nie martw się, zrobimy to krótko i przejrzyście:

Najpierw nadaj swojemu tickerowi nazwę. Wpisz nazwę na karcie Dodaj tytuł . Tytuł jest zwykle wyświetlany w górnej części paska, więc postaraj się wymyślić atrakcyjną nazwę, która przyciągnie uwagę odwiedzających.

Następnie kliknij Typ paska informacyjnego , a następnie dodaj treść, która ma być wyświetlana w pasku wiadomości (w razie potrzeby z łączem) w sekcji Tekst paska informacyjnego.

Jak wspomniałem powyżej, pasek wiadomości może zawierać wiele tików . Po prostu kliknij przycisk ( + ), aby go dodać, i kliknij przycisk ( x ), aby usunąć.

Krok 2: Skonfiguruj pasek wiadomości

Po otrzymaniu nowego paska wiadomości musisz sprawić, by był bardziej przyciągający wzrok, konfigurując go.

Przede wszystkim wybierz, w jaki sposób będą wyświetlane Twoje paski informacyjne. Kliknij Tryb paska , zobaczysz 3 opcje: Przewiń, Obróć i Lista . W rzeczywistości przewijanie jest najczęstszą opcją, ale możesz zdecydować, która jest najbardziej odpowiednia dla Twojej witryny.

Po wybraniu jednej z trzech powyższych opcji możesz dostosować zachowanie pasków za pomocą różnych zakładek poniżej.

Osobiście wybrałem tryb przewijania , więc dostosuję akcję przewijania. Należy zwrócić uwagę na dwie ważne rzeczy: szybkość przewijania i spację . Właściwie trzeba wiele razy próbować, aby znaleźć najbardziej odpowiednie parametry. Dla mnie wolę szybkość przewijania 8 i odstęp 10 pikseli.

Poza tym zaznaczam również opcję Pause on mouse over , aby pasek wiadomości przestał się poruszać, gdy chcę kliknąć haczyk.

Ponadto po kliknięciu opcji Ustawienia globalne zobaczysz kilka innych opcji dostosowania znaczników. Na przykład, jeśli chcesz, aby tytuły były nad nimi, zaznacz opcję Wyświetl tytuł . Lub jeśli chcesz ukryć tickery, gdy nie ma tików, zaznacz opcję jak na poniższym obrazku.

Teraz Twój pasek wiadomości jest gotowy do wyświetlenia!

Krok 3: Wyświetl paski wiadomości

Wróćmy do zakładki Shortcode u góry ekranu:

Pasek wiadomości zostanie wyświetlony w miejscu, w którym wstawisz ten krótki kod. Możesz dodać go do dowolnej pozycji: stopki strony głównej, posta, widżetu paska bocznego,…

Zwykle nie używamy pasków wiadomości do treści posta. Byłoby lepiej, gdybyś umieścił paski wiadomości w nagłówku, stopce lub pasku bocznym. Mogę podać przykład paska wiadomości na pasku bocznym. Najpierw wybieram losową stronę, przechodzę do jej Podgląd > Dostosuj > Widget .

Następnie przejdź do paska bocznego > Dodaj widżet . Zobaczysz wiele opcji dodatkowych pasków bocznych, takich jak Audio, Kalendarz,… Wybierz Tekst, a zobaczysz małe pole , w którym możesz dodać nazwę paska bocznego i wkleić swój krótki kod:

Zrobiłeś wiele kroków, prawda? Ale jeśli chcesz, aby Twoje paski informacyjne były piękniejsze, dzięki niestandardowym kolorom, rozmiarowi czcionki, przezroczystości…, nadal masz trochę pracy do wykonania. Darmowa wersja tej wtyczki nie obsługuje dostosowywania tych parametrów przez użytkowników. Mamy więc tylko wynik taki jak w poniższym gifie:

Paski wiadomości nie wyglądają tak pięknie, więc trochę je wystylizowałem za pomocą CSS. Przejdź do Dostosuj > Dodatkowe CSS .

Tam zobaczysz małe pole do dodania kodu. Te kody zmienią wygląd Twoich pasków wiadomości.

Używam motywu Memory z główną paletą błękitu i bieli. Dlatego dodałem ten CSS, aby pasek wiadomości miał niebieski kolor:

 .mtphr-dnt-tick-contents a {
	kolor: var(--główny-kolor);
}

.mtphr-dnt-tick-zawartość a:najedź {
	kolor: #000;
}

Kliknij Opublikuj i zobacz, co mamy:

Oto prosty przykład dla Ciebie. Jestem pewien, że możesz sam zrobić znacznie bardziej oszałamiający pasek wiadomości. Spróbujmy!

Ostatnie słowa

To wszystko o dodaniu paska wiadomości do swojej witryny WordPress za pomocą wtyczki Ditty News Ticker . Dołożyliśmy wszelkich starań, aby był krótki i przejrzysty, więc mamy nadzieję, że ten post będzie dla Ciebie przydatny.

Może masz jakieś cuda lub pytania dotyczące naszego samouczka, więc nie wahaj się powiedzieć nam w sekcji komentarzy. Chętnie pokażemy Ci bardziej szczegółowy samouczek dotyczący zaawansowanych opcji tej wtyczki lub innych metod dodawania pasków wiadomości bez korzystania z wtyczek. Dlatego nie zapomnij nas połączyć!