Jak stworzyć dynamiczny pasek postępu w Brizy

Czasami trzeba pokazać dane w projekcie graficznym. Cóż, rozwiązaniem może być pasek postępu. Zwykle pasek postępu służy do wizualizacji postępu rozszerzonej operacji komputera, takiej jak pobieranie/przesyłanie plików, pamięć dyskowa, procesor, instalacja itd. Dzisiaj pasek postępu służy nie tylko do pokazywania działania komputera. Dzięki swojej kreatywności pasek postępu może być używany do wielu rzeczy, które możesz zastosować w swojej witrynie.

Poniżej przedstawiono zastosowania paska postępu na stronie internetowej:

• Opinie
• Tabela danych
• Wskaźnik ulepszeń
• Wskaźnik postępu projektu
• Itp.

Dzięki Brizy możesz bardzo łatwo utworzyć pasek postępu. Dzięki możliwości wyświetlania danych z pól niestandardowych możesz dynamicznie dodawać niestandardowe elementy do treści, w tym pasek postępu. W tym artykule dowiesz się, jak stworzyć dynamiczny pasek postępu w Brizy.

Jak stworzyć dynamiczny pasek postępu w Brizy

Krok 1: Utwórz pola niestandardowe

Najpierw musisz utworzyć pola niestandardowe i ustawić typ pola na liczbę . Domyślnie WordPress nie ma funkcji pól niestandardowych. Więc musisz go najpierw pobrać i zainstalować. W katalogu WordPressa znajduje się wiele wtyczek pól niestandardowych WordPress. W tym samouczku używamy ACF jako wtyczki WordPress z niestandardowymi polami. Jeśli nie lubisz ACF, możesz użyć Podsów lub innych alternatyw ACF, które obsługują pole liczbowe .

Po pobraniu i zainstalowaniu wtyczki ACF do WordPressa, w panelu WordPress, przejdź do Custom Fields -> Add New , aby utworzyć nową grupę pól niestandardowych. Nadaj nazwę grupie pól niestandardowych i kliknij przycisk Dodaj pole , aby dodać nowe pole.

Następnie możesz ustawić etykietę pola i nazwę pola w polach Etykieta pola i Nazwa pola. W polu Typ pola ustaw wartość Liczba , a następnie możesz ustawić wartość minimalną i maksymalną w polach Wartość minimalna i Wartość maksymalna . W tym przykładzie ustawiliśmy minimalną wartość na 1 i maksymalną wartość na 100 .

Kliknij przycisk Dodaj pole , aby dodać więcej pól i powtórz powyższe kroki. Ten przykład utworzy dynamiczny pasek postępu do przeglądu butów. Dodaliśmy więc kilka pól związanych z oceną tenisówek.

Po dodaniu pól niestandardowych przejdź do sekcji Lokalizacja , aby określić, gdzie ma zostać przypisana grupa pól niestandardowych. Możesz użyć domyślnej reguły, jeśli chcesz, aby grupa pól niestandardowych była przydzielana do postów na blogu. Kliknij przycisk Publikuj , aby opublikować grupę pól niestandardowych.

Krok 2: Utwórz niestandardowy szablon dla posta na blogu

Funkcja tworzenia niestandardowego szablonu jest dostępna w bezpłatnej wersji Brizy, ale zalecamy uaktualnienie Brizy do wersji pro, która umożliwia dostęp do wszystkich elementów w panelu elementów. Dzięki Brizy Pro Twój niestandardowy szablon można zmaksymalizować.

OK, gdy pola niestandardowe będą gotowe, możesz utworzyć niestandardowe szablony dla typów artykułów, które chcesz dodać do dynamicznego paska postępu. Jeśli masz już szablon/y, możesz bezpośrednio przejść do istniejącego szablonu i edytować go. W tym samouczku edytujemy nasz obecny szablon. Ale jeśli jesteś nowy w Brizy i chcesz dowiedzieć się, jak utworzyć niestandardowy szablon, możesz przeczytać artykuł „Jak utworzyć niestandardowy szablon pojedynczego posta w WordPress za pomocą Brizy”.

Przejdź do istniejącego szablonu i kliknij przycisk Edytuj za pomocą Brizy , który przeniesie Cię do edytora Brizy.

W porządku, czas dodać pasek postępu do szablonu. W edytorze Brizy wybierz element Postęp z panelu elementów, a następnie przeciągnij go i upuść w obszarze obszaru roboczego. Możesz umieścić element postępu w dowolnym miejscu. W tym przykładzie umieścimy element Progress pod elementem Content.

Następnie nadszedł czas na edycję i stylizację paska postępu. Najpierw chcemy edytować szerokość paska postępu. Na pasku opcji paska postępu przejdź do Ustawień i kliknij je. W tym przykładzie ustawiamy Szerokość na 60% .

Po edycji szerokości paska postępu przejdź do skrajnego lewego paska narzędzi opcji i kliknij go. Tutaj możesz ustawić kilka ustawień. Dostępne są Styl, Wypełnienie, Tytuł i Procent . Najpierw przejdź do ustawień wypełnienia , kliknij ikonę hamburgera (zobacz GIF) i przypisz etykietę pola do właśnie utworzonych pól niestandardowych.

Jak wspomnieliśmy, stworzymy dynamiczny pasek postępu do przeglądu sneakersów. Dlatego chcemy wyłączyć opcję procentową, przesuwając przełącznik Procent w lewo.

Następnie edytuj tytuł paska postępu zgodnie z etykietą pola przypisaną w ustawieniach wypełnienia . Po edycji tytułu możesz powielić pasek postępu, klikając przycisk Powiel . Ponieważ mamy cztery etykiety pól niestandardowych, więc trzykrotnie powielamy pasek postępu.

Teraz możesz edytować inne paski postępu, tak jak na pierwszym pasku postępu (przypisując etykietę pola w ustawieniach wypełnienia i edytując tytuł paska postępu). Po edycji i stylizacji tych pasków postępu zaktualizuj szablon pojedynczego posta, klikając przycisk Aktualizuj .

Krok 3: Utwórz nowy post na blogu

W porządku, możesz utworzyć nowy post na blogu, gdy wszystko będzie gotowe. Pamiętaj, aby dodać wartości w polach niestandardowych utworzonych w kroku pierwszym powyżej. Podane wartości zostaną użyte do ustawienia wypełnienia słupków.

Na koniec upewnij się, że ustawiłeś kategorię zgodnie z kategorią niestandardowego szablonu, do którego jest przypisana (krok 2).

Dolna linia

W tym artykule dowiesz się, jak utworzyć dynamiczny pasek postępu w Birizy. Brizy to jedno z najprostszych narzędzi do tworzenia stron internetowych, blogów i sklepów internetowych. Integracja Brizy i wtyczki WordPress z polami niestandardowymi umożliwia nam stworzenie dynamicznego paska postępu dla naszej strony. Oprócz paska postępu możemy dodać dynamiczną zawartość do dowolnych elementów Brizy, które oferują opcję dynamicznego ustawiania wartości. Element oceny to kolejny przykład, w którym można go użyć do stworzenia dynamicznej oceny w postaci gwiazdek.