Tento článok poskytuje postup na pridanie indikátora priebehu do WordPress pomocou nasledujúceho prehľadu:
- Čo je ukazovateľ pokroku vo WP?
- Ako pridať indikátory pokroku na webové stránky WordPress pomocou kódu?
- Ako pridať indikátory pokroku na webové stránky WordPress pomocou doplnkov?
Čo je indikátor priebehu vo WordPress?
Ukazovateľ priebehu zobrazuje priebeh niečoho v percentách pomocou vodorovného pruhu. Ide o grafické znázornenie niektorých údajov, ktoré môžu používateľovi poskytnúť informácie jediným pohľadom. Používanie indikátorov priebehu vo vašich príspevkoch WordPress na zobrazenie údajov alebo štatistík môže pomôcť zlepšiť príťažlivosť webovej stránky a zapojenie používateľov.
Ako pridať indikátory pokroku na webové stránky WordPress pomocou kódu?
Ak chcete pridať indikátor priebehu do WordPress bez doplnku, používateľ bude musieť v príspevku použiť vlastný kód HTML a CSS. Ak to chcete urobiť, postupujte podľa krokov uvedených nižšie:
Krok 1: Prihláste sa do hlavného panela
Otvorte prehliadač a prejdite na „ http://localhost/<Website-Name>/wp-login.php odkaz. Zadajte poverenia správcu a stlačte „ Prihlásiť sa tlačidlo ”:
Krok 2: Vytvorte nový príspevok
Ísť do ' Príspevky > Pridať nový “ z bočnej ponuky administračného panela:
Krok 3: Pridajte vlastný HTML kód
V príspevku uveďte názov a ďalší obsah. Potom kliknite na „ + “ a vyhľadajte „ Vlastné HTML ”blok:
Do pridaného bloku HTML prilepte nižšie uvedený kód. Zmeniť ' šírka ' vnútri ' ” pre požadované percento indikátora priebehu. Podobne zmeňte „ postup-text “ podľa toho:
< div trieda = 'custom-progress-bar' >< rozpätie štýl = 'šírka: 80 %' < / rozpätie >
< div trieda = 'text postupu' > 80 % < / div >
< / div >
Potom stlačte „ Publikovať ” tlačidlo na nahranie príspevku na webovú stránku:
Krok 4: Pridajte vlastný CSS
Po zverejnení príspevku kliknite na „ Zobraziť príspevok tlačidlo ”:
V náhľade kliknite na „ Prispôsobiť ” tlačidlo na pridanie štýlu pre indikátor priebehu:
Na ľavej strane obrazovky sa zobrazí ponuka editora. Tu prejdite nadol a kliknite na „ Ďalšie CSS sekcia:
Prilepením nasledujúceho kódu CSS do poľa upravte štýl indikátora priebehu:
.vlastný-progress-bar {pozadie- farba : #1a1a1a;
výška : 30px;
výplň: 5px;
šírka : 500px;
okraj: 5px 0 ;
border-radius: 5px;
box-shadow: 0 1px 5px #000 vložka, 0 1px 0 # 444 ;
}
.vlastný-progress-bar rozpätie {
pozadie- farba : #0000FF;
displej: inline-block;
plavák: vľavo;
výška : 100 %;
border-radius: 3px;
box-shadow: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) vložka;
prechod: šírka .4s easy-in-out;
}
.progresia- text {
text- zarovnať : správny;
farba : biely;
okraj: 0px;
}
Krok 5: Zverejnite príspevok
Nakoniec kliknite na „ Publikovať ” príspevok na uloženie týchto zmien:
Po opätovnom načítaní stránky môže používateľ vidieť, že v príspevku sa zobrazuje indikátor priebehu:
Ako pridať indikátory pokroku na webové stránky WordPress pomocou doplnkov?
Táto ukážka použije doplnok „Ultimate Blocks“ na pridanie indikátora priebehu na webovú stránku WordPress. Ak chcete urobiť to isté, postupujte podľa krokov uvedených nižšie.
Krok 1: Pridajte nový doplnok
Po prihlásení používateľa do ovládacieho panela prejdite na „ Pluginy > Pridať nový ” možnosť z bočného panela ponuky:
Krok 2: Nainštalujte doplnok Ultimate Blocks
Vyhľadajte ultimátne bloky a stlačte „ Zadajte “kľúč. Potom kliknite na nižšie uvedený „ Nainštalovať teraz tlačidlo ”:
Krok 3: Aktivujte Ultimate Blocks
Po nainštalovaní doplnku kliknite na „ Aktivovať ” na použitie indikátora priebehu vo WordPress:
Krok 4: Vytvorte nový príspevok
Ak chcete pridať indikátor priebehu do príspevku WordPress, prejdite na „ Príspevky > Pridať nový ” možnosť z bočnej ponuky:
Krok 5: Pridajte blok ukazovateľa priebehu
Zadajte názov a obsah príspevku. Ďalej stlačte tlačidlo „ + ikonu ” na pridanie nového bloku. V ponuke vyhľadajte výraz „ Ukazateľ postupu “ a vyberte blok:
Krok 6: Nastavte percento pre pruh
Ak chcete nastaviť percento pre indikátor priebehu, použite modrý posúvač alebo zadajte percento do poľa pod zvýraznením:
Krok 7: Zverejnite príspevok
Po dokončení príspevku kliknite na „ Publikovať ” tlačidlo na nahranie príspevku na webovú stránku:
Krok 8: Pozrite si príspevok
Po zverejnení príspevku kliknite na tlačidlo „Zobraziť príspevok“ a zobrazí sa náhľad príspevku na webovej stránke:
Vo výstupe nižšie je možné vidieť, že k príspevku je pridaný indikátor priebehu:
To je všetko o pridaní indikátora priebehu vo WordPress.
Záver
Ak chcete pridať indikátor priebehu na webovú stránku WordPress, prejdite na „ Pluginy > Pridať nový “ z bočnej ponuky. Vyhľadajte a nainštalujte „ Ultimátne bloky ' zapojiť. Po inštalácii ho aktivujte. Potom prejdite na „ Príspevky > Pridať nový “ a uveďte názov a obsah príspevku. Ďalej kliknite na „ + “ a vyhľadajte „ Ukazateľ postupu “blok. Nastavte percento postupu pomocou posúvača alebo zadaním čísla. Tento článok ilustruje postup pridania indikátora priebehu do WordPress s doplnkom a bez neho.