Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak wyświetlić animację zliczania liczb w WordPress

Wiesz, co jest lepsze niż wyświetlanie „10 000+ zadowolonych klientów” na twojej witrynie internetowej? Gdy liczby te faktycznie liczone są od zera! Ta wciągająca animacja, zwana licznikiem liczb, może sprawić, że twoje statystyki i osiągnięcia naprawdę się wyróżnią.

Od czasu do czasu używamy liczników liczb na stronach docelowych naszych partnerów, gdy chcemy podkreślić ważne kamienie milowe lub przyciągnąć uwagę odwiedzających. Są one szczególnie skuteczne w prezentowaniu takich rzeczy jak liczba klientów, liczba pobrań lub ukończonych projektów.

A co najlepsze? Dodanie tych animowanych liczników do twojej witryny WordPress jest znacznie prostsze, niż można by się spodziewać. W tym przewodniku pokażemy dwie proste metody tworzenia przyciągających wzrok animacji liczb.

How to show a number count animation in WordPress

Zanim dodasz animację zliczania liczb w WordPress… 📊

Zanim zagłębimy się w „jak”, zastanówmy się szybko, gdzie te animowane liczniki najlepiej sprawdzą się na twojej witrynie internetowej WordPress:

  • Główne sekcje strony głównej prezentujące najważniejsze osiągnięcia
  • Strony produktów podkreślające ocenę zadowolenia klientów
  • Strony Zamierzasz wyświetlić kamienie milowe firmy
  • Strony docelowe podkreślające dowód społeczny
  • Sekcje cenowe pokazujące bazę klientów lub oszczędności

Z naszego doświadczenia wynika, że strategiczne rozmieszczenie jest równie ważne, jak sama animacja. Na przykład OptinMonster skutecznie wykorzystuje licznik liczb do wyświetlania zoptymalizowanych miesięcznych sesji odwiedzających, umieszczając go dokładnie tam, gdzie potencjalni klienci podejmują decyzje.

Number counter at OptinMonster

Dodawanie i konfigurowanie zliczania liczb w WordPress zazwyczaj wymaga edycji kodu. Może to być trudne dla początkujących, którzy nie wiedzą, jak pisać kod.

To powiedziawszy, zobaczmy, jak można wyświetlić animowany licznik liczb w WordPress. Omówimy 2 proste metody przy użyciu narzędzia do tworzenia witryn internetowych premium i darmowej wtyczki.

Możesz kliknąć poniższe odnośniki, aby przejść do twojej preferowanej sekcji:

Nie pozwól , aby ograniczone motywy WordPress Cię powstrzymywały! Nasi eksperci od projektowania WordPress mogą stworzyć własny motyw WordPress z interaktywnymi elementami, takimi jak animowane liczniki, które idealnie pasują do twojej marki.

Zarezerwuj bezpłatną konsultację już dziś!

Jeśli tworzysz stronę docelową i chcesz mieć pełną kontrolę nad wyglądem i zachowaniem twoich liczników, najlepszym rozwiązaniem będzie kreator stron.

Przetestowaliśmy dziesiątki kreatorów stron WordPress na przestrzeni lat, a SeedProd konsekwentnie wyróżnia się rozbudowanymi opcjami konfiguratora, zwłaszcza w przypadku elementów dynamicznych, takich jak liczniki liczb.

W tym poradniku użyjemy wersji SeedProd Pro, ponieważ zawiera ona zaawansowane bloki i pozwala na dodanie licznika. Istnieje również wersja SeedProd Lite, którą można wypróbować za darmo.

Więcej informacji można znaleźć w naszej szczegółowej recenzji SeedProd.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć SeedProd. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu SeedProd poprosi o wpisz klucza licencyjnego. Klucz licencyjny można znaleźć w obszarze Twojego konta oraz w e-mailu z potwierdzeniem zakupu.

Entering the SeedProd license key

Następnie musisz przejść do SeedProd ” Landing Pages z twojego panelu administracyjnego WordPress.

SeedProd umożliwia tworzenie profesjonalnie zaprojektowanych własnych stron docelowych, w tym strony „coming soon„, strony trybu konserwacji, strony logowania i strony 404.

Kliknij przycisk „Utwórz nową stronę docelową”.

Click the Add New Landing Page button

Następnie możesz wybrać szablon SeedProd dla twojej strony docelowej i wyświetlić animowany licznik liczb.

Wystarczy najechać kursorem na szablon i kliknąć pomarańczowy przycisk wyboru.

Select a page template

Otworzy się wyskakujące okno. Wystarczy wpisz nazwę strony i adres URL strony.

Następnie kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Enter a Page Name and Page URL

Spowoduje to uruchomienie kreatora przeciągania i upuszczania SeedProd.

Następnie możesz edytować szablon twojej strony, dodając różne bloki lub klikając istniejące elementy na stronie.

Aby dodać animowaną liczbę, wystarczy przeciągnąć blok Licznik z menu po twojej lewej stronie i upuścić go na szablonie.

Add the counter block

Następnie można wybrać blok licznika, aby dostosować go do własnych potrzeb.

Dostępne są na przykład opcje zmiany początkowego i końcowego numeru licznika, wpisz prefiks i sufiks numeru oraz edytuj tytuł.

Edit the title of the counter

Następnie możesz przejść do karty „Zaawansowane” w ustawieniach bloku licznika po twojej lewej stronie.

Tutaj znajdziesz więcej opcji zmiany stylu, schematu kolorów, odstępów, kroju pisma i innych elementów twojego bloku licznika.

Edit the color and style of the block

Następnie kliknij przełącznik „Zapisz” u góry.

Możesz teraz wybrać opcję „Opublikuj” z menu rozwijanego.

Save and publish your changes

Aby zobaczyć animowany licznik liczb w działaniu, przejdź na twój blog WordPress.

Tak to wyglądało na naszej witrynie demonstracyjnej.

Number counter preview

Opcja 2: Dodanie animacji szybkiego zliczania liczb do dowolnej strony za pomocą wtyczki

Czasami kreator stron może być zbyt rozbudowany, gdy potrzebujesz tylko prostego licznika. W tym miejscu z pomocą przychodzi wtyczka Counter Number. Jest to darmowe, lekkie rozwiązanie, które robi jedną rzecz i robi to dobrze: pozwala dodawać animacje liczb w dowolnym miejscu na twojej witrynie za pomocą krótkich kodów.

Najpierw musisz zainstalować i włączyć wtyczkę Counter Number. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu możesz przejść do Numery liczników ” Wszystkie liczniki z twojego kokpitu WordPress i kliknąć przycisk „Utwórz nowy licznik”.

Add a new counter

Następnie możesz wpisz tytuł dla twojego numeru licznika.

W wersji darmowej można wybrać tylko zwykły szablon.

Enter a name for the counter and select a template

Następnie można dodać szczegóły numeru licznika. Dostępne są opcje edycji tytułu licznika, wyboru ikonki i wpisz wartość numeru licznika.

Możesz dodać dowolną liczbę numerów liczników, klikając przycisk „Utwórz nowy licznik” na dole.

Add counter details

Poza tym, w panelu po twojej prawej stronie dostępnych jest więcej opcji konfiguratora.

Wtyczka pozwala na przykład zmienić kolor tytułu licznika, kolor liczb, rozmiar ikonki, wielkość litery, rodzinę pisma i wiele innych.

Po wprowadzeniu zmian, przewiń z powrotem na górę i opublikuj twój licznik.

Publish your counter number

Następnie możesz przejść do Numery liczników ” Wszystkie liczniki z twojego kokpitu WordPress.

Śmiało i skopiuj krótki kod licznika. Będzie on wyglądał mniej więcej tak:

[COUNTER_NUMBER id=41].

Copy the shortcode for counter

Następnie możesz umieścić ten element projektu WordPress w dowolnym miejscu na twojej witrynie internetowej, od wpisów i stron po panele boczne.

Wystarczy utworzyć nowy wpis lub stronę albo edytować już istniejącą. Po przejściu do edytora treści wystarczy kliknąć znak „+” i dodać blok krótkiego kodu.

Adding a shortcode block to WordPress

Następnie możesz wkleić krótki kod numeru licznika w bloku.

W tym miejscu możesz wyświetlić podgląd i opublikować swoją stronę lub wpis, aby zobaczyć animowaną liczbę w działaniu.

Free plugin counter number preview

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyświetlić animację zliczania liczb w WordPress. Możesz również zapoznać się z naszym poradnikiem na temat dodawania animowanego tła w WordPressie i naszym eksperckim wyborem najlepszych kreatorów motywów WordPress, aby zaprojektować twój idealny motyw.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.