Tento článek poskytuje postup pro přidání ukazatele průběhu do WordPress pomocí následující osnovy:
- Co je ukazatel pokroku ve WP?
- Jak přidat ukazatele průběhu na weby WordPress pomocí kódu?
- Jak přidat ukazatele průběhu na weby WordPress pomocí pluginů?
Co je ukazatel průběhu ve WordPressu?
Ukazatel průběhu zobrazuje průběh něčeho v procentech pomocí vodorovného pruhu. Jedná se o grafické znázornění některých dat, které může uživateli poskytnout informace pouhým jediným pohledem. Použití ukazatelů průběhu ve vašich příspěvcích WordPress k reprezentaci dat nebo statistik může pomoci zlepšit přitažlivost webu a zapojení uživatelů.
Jak přidat ukazatele průběhu na weby WordPress pomocí kódu?
Chcete-li přidat ukazatel průběhu do WordPress bez pluginu, uživatel bude muset použít vlastní HTML a CSS v příspěvku. Chcete-li to provést, postupujte podle níže uvedených kroků:
Krok 1: Přihlaste se do řídicího panelu
Otevřete prohlížeč a přejděte na „ http://localhost/<Website-Name>/wp-login.php ' odkaz. Zadejte přihlašovací údaje správce a stiskněte „ Přihlásit se ' knoflík:
Krok 2: Vytvořte nový příspěvek
Jít do ' Příspěvky > Přidat nový “ z postranní nabídky administračního panelu:
Krok 3: Přidejte vlastní HTML kód
V příspěvku uveďte název a další obsah. Poté klikněte na „ + “ a vyhledejte „ Vlastní HTML ”blok:
Do přidaného bloku HTML vložte níže uvedený kód. Změň ' šířka ' uvnitř ' ” pro požadované procento ukazatele průběhu. Podobně změňte „ postup-text “ podle toho:
< div třída = 'custom-progress-bar' >< rozpětí styl = 'šířka: 80 %' < / rozpětí >
< div třída = 'text postupu' > 80 % < / div >
< / div >
Poté stiskněte „ Publikovat ” tlačítko pro nahrání příspěvku na web:
Krok 4: Přidejte vlastní CSS
Po zveřejnění příspěvku klikněte na „ Zobrazit příspěvek ' knoflík:
V náhledu klikněte na „ Přizpůsobit ” tlačítko pro přidání stylu pro ukazatel průběhu:
Na levé straně obrazovky se objeví nabídka editoru. Zde přejděte dolů a klikněte na „ Další CSS sekce:
Chcete-li upravit styl ukazatele průběhu, vložte do pole následující kód CSS:
.vlastní-progress-bar {Pozadí- barva : #1a1a1a;
výška : 30px;
výplň: 5px;
šířka : 500px;
okraj: 5px 0 ;
border-radius: 5px;
box-shadow: 0 1px 5px #000 vložka, 0 1px 0 # 444 ;
}
.vlastní-progress-bar rozpětí {
Pozadí- barva : #0000FF;
displej: inline-block;
plavat vlevo;
výška : 100 %;
border-radius: 3px;
box-shadow: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) vložka;
přechod: šířka .4s easy-in-out;
}
.postup- text {
text- zarovnat : že jo;
barva : bílá;
okraj: 0px;
}
Krok 5: Publikování příspěvku
Nakonec klikněte na „ Publikovat ” příspěvek pro uložení těchto změn:
Po opětovném načtení stránky může uživatel vidět, že v příspěvku je vidět ukazatel průběhu:
Jak přidat ukazatele průběhu na weby WordPress pomocí pluginů?
Tato ukázka použije plugin „Ultimate Blocks“ k přidání ukazatele průběhu na web WordPress. Chcete-li provést totéž, postupujte podle níže uvedených kroků.
Krok 1: Přidejte nový plugin
Jakmile je uživatel přihlášen do řídicího panelu, přejděte na „ Pluginy > Přidat nový ” možnost z postranní nabídky:
Krok 2: Nainstalujte plugin Ultimate Blocks
Vyhledejte ultimátní bloky a stiskněte „ Vstupte “ klíč. Poté klikněte na níže uvedený „ Nainstalovat nyní ' knoflík:
Krok 3: Aktivujte Ultimate Blocks
Jakmile je plugin nainstalován, klikněte na „ aktivovat ” pro použití ukazatele průběhu ve WordPressu:
Krok 4: Vytvořte nový příspěvek
Chcete-li k příspěvku WordPress přidat ukazatel průběhu, přejděte na „ Příspěvky > Přidat nový “ možnost z boční nabídky:
Krok 5: Přidejte blok ukazatele průběhu
Zadejte název a obsah příspěvku. Dále stiskněte tlačítko „ + ” pro přidání nového bloku. V nabídce vyhledejte „ Ukazatel průběhu “ a vyberte blok:
Krok 6: Nastavte procento pro pruh
Chcete-li nastavit procento pro ukazatel průběhu, použijte modrý posuvník nebo zadejte procento do pole pod zvýrazněním:
Krok 7: Publikování příspěvku
Po dokončení příspěvku klikněte na „ Publikovat tlačítko pro nahrání příspěvku na web:
Krok 8: Zobrazte příspěvek
Po zveřejnění příspěvku klikněte na tlačítko „Zobrazit příspěvek“, abyste viděli náhled příspěvku na webu:
V níže uvedeném výstupu je vidět, že ukazatel průběhu je přidán k příspěvku:
To je vše o přidání ukazatele průběhu do WordPress.
Závěr
Chcete-li přidat ukazatel průběhu na web WordPress, přejděte na „ Pluginy > Přidat nový “ z postranní nabídky. Vyhledejte a nainstalujte „ Ultimátní bloky ' zapojit. Po instalaci jej aktivujte. Poté přejděte na „ Příspěvky > Přidat nový “ a uveďte název a obsah příspěvku. Dále klikněte na „ + “ a vyhledejte „ Ukazatel průběhu ”blok. Nastavte procento průběhu pomocí posuvníku nebo zadáním čísla. Tento článek ilustruje postup pro přidání ukazatele průběhu do WordPress s pluginem a bez něj.