W tym artykule opisano procedurę dodawania paska postępu w WordPressie, korzystając z następującego schematu:
- Co to jest pasek postępu w WP?
- Jak dodać paski postępu do witryn WordPress za pomocą kodu?
- Jak dodać paski postępu do witryn WordPress za pomocą wtyczek?
Co to jest pasek postępu w WordPress?
Pasek postępu pokazuje postęp czegoś w procentach za pomocą poziomego paska. Jest to graficzna reprezentacja niektórych danych, która może dostarczyć użytkownikowi informacji już po jednym spojrzeniu. Używanie pasków postępu w postach WordPress do przedstawiania danych lub statystyk może pomóc poprawić atrakcyjność witryny i zaangażowanie użytkowników.
Jak dodać paski postępu do witryn WordPress za pomocą kodu?
Aby dodać pasek postępu do WordPress bez wtyczki, użytkownik będzie musiał użyć niestandardowego kodu HTML i CSS w poście. Aby to zrobić, wykonaj poniższe kroki:
Krok 1: Zaloguj się do Panelu
Otwórz przeglądarkę i przejdź do „ http://localhost/<Website-Name>/wp-login.php ”połączenie. Podaj dane administratora i naciśnij „ Zaloguj sie ' przycisk:
Krok 2: Utwórz nowy post
Iść do ' Posty > Dodaj nowe ” z bocznego menu panelu administracyjnego:
Krok 3: Dodaj niestandardowy kod HTML
W poście podaj tytuł i dodatkową treść. Następnie kliknij przycisk „ + ” i wyszukaj ikonę „ Niestandardowy kod HTML ' blok:
W dodanym bloku HTML wklej poniższy kod. Zmienić ' szerokość ' w środku '
< Zakres styl = „szerokość: 80%” >< / Zakres >
< div klasa = „tekst postępu” > 80% < / div >
< / div >
Następnie naciśnij przycisk „ Publikować ”, aby przesłać post na stronę internetową:
Krok 4: Dodaj niestandardowy CSS
Po opublikowaniu postu kliknij „ Zobacz post ' przycisk:
W podglądzie kliknij „ Dostosuj ”, aby dodać styl paska postępu:
Po lewej stronie ekranu pojawi się menu edytora. Tutaj przewiń w dół i kliknij „ Dodatkowe CSS ' Sekcja:
Wklej następujący kod CSS w polu, aby nadać styl paskowi postępu:
.niestandardowy pasek postępu {tło- kolor : #1a1a1a;
wysokość : 30 pikseli;
dopełnienie: 5px;
szerokość : 500 pikseli;
margines: 5 pikseli 0 ;
promień obramowania: 5px;
pudełko-cień: 0 wstawka 1px 5px #000, 0 1 px 0 # 444 ;
}
.niestandardowy pasek postępu Zakres {
tło- kolor : #0000FF;
wyświetlacz: blok inline;
pływak: w lewo;
wysokość : 100 %;
promień obramowania: 3px;
pudełko-cień: 0 1 px 0 RGB ( 255 , 255 , 255 , .5 ) wstawka;
przemiana: szerokość .4s łatwość wysiadania;
}
.postęp- tekst {
tekst- wyrównywać : Prawidłowy;
kolor : biały;
margines: 0px;
}
Krok 5: Opublikuj post
Na koniec kliknij przycisk „ Publikować ” post, aby zapisać te zmiany:
Po ponownym załadowaniu strony użytkownik może zobaczyć, że w poście widoczny jest pasek postępu:
Jak dodać paski postępu do witryn WordPress za pomocą wtyczek?
W tej demonstracji zostanie wykorzystana wtyczka „Ultimate Blocks”, aby dodać pasek postępu do witryny WordPress. Aby zrobić to samo, wykonaj poniższe kroki.
Krok 1: Dodaj nową wtyczkę
Po zalogowaniu się użytkownika do panelu przejdź do zakładki „ Wtyczki > Dodaj nowe ” z bocznego paska menu:
Krok 2: Zainstaluj wtyczkę Ultimate Blocks
Wyszukaj najlepsze bloki i naciśnij „ Wchodzić ' klucz. Następnie kliknij poniższy znak „ Zainstaluj teraz ' przycisk:
Krok 3: Aktywuj najlepsze bloki
Po zainstalowaniu wtyczki kliknij przycisk „ Aktywuj ”, aby skorzystać z paska postępu w WordPressie:
Krok 4: Utwórz nowy post
Aby dodać pasek postępu do wpisu WordPress, przejdź do „ Posty > Dodaj nowe ” z bocznego menu:
Krok 5: Dodaj blok paska postępu
Podaj tytuł i treść posta. Następnie naciśnij przycisk „ + ”, aby dodać nowy blok. W menu wyszukaj opcję „ Pasek postępu ” i wybierz blok:
Krok 6: Ustaw procent paska
Aby ustawić wartość procentową paska postępu, użyj niebieskiego suwaka lub wprowadź wartość procentową w podświetlonym polu poniżej:
Krok 7: Opublikuj post
Po zakończeniu wpisu kliknij „ Publikować ”, aby przesłać post na stronę internetową:
Krok 8: Wyświetl post
Po opublikowaniu wpisu należy kliknąć w przycisk „Wyświetl post”, aby zobaczyć podgląd wpisu na stronie:
Na poniższym wyjściu widać, że pasek postępu został dodany do posta:
To wszystko na temat dodania paska postępu w WordPress.
Wniosek
Aby dodać pasek postępu do witryny WordPress, przejdź do „ Wtyczki > Dodaj nowe ” z bocznego menu. Wyszukaj i zainstaluj „ Ostateczne bloki ' podłącz. Po instalacji aktywuj go. Następnie idź do ' Posty > Dodaj nowe ” i podaj tytuł oraz treść posta. Następnie kliknij przycisk „ + ” i wyszukaj „ Pasek postępu ' blok. Ustaw procent postępu za pomocą suwaka lub wpisując liczbę. W tym artykule przedstawiono procedurę dodawania paska postępu w WordPressie z wtyczką i bez niej.