Ez a cikk bemutatja a folyamatjelző WordPress hozzáadásának folyamatát a következő vázlat segítségével:
- Mi az a folyamatjelző sáv a WP-ben?
- Hogyan adhatunk folyamatjelző sávokat a WordPress webhelyekhez kód használatával?
- Hogyan adhatunk folyamatjelző sávokat a WordPress webhelyekhez bővítmények segítségével?
Mi az a folyamatjelző sáv a WordPressben?
A folyamatjelző sáv egy vízszintes sáv segítségével százalékban mutatja valaminek az előrehaladását. Néhány adat grafikus ábrázolása, amely egyetlen pillantással információt nyújthat a felhasználónak. A folyamatjelző sávok használata a WordPress-bejegyzésekben adatok vagy statisztikák megjelenítésére javíthatja a webhely vonzerejét és a felhasználók elkötelezettségét.
Hogyan adhatunk folyamatjelző sávokat a WordPress webhelyekhez kód használatával?
Ha egy folyamatjelző sávot szeretne hozzáadni a WordPresshez plugin nélkül, a felhasználónak egyéni HTML-t és CSS-t kell használnia egy bejegyzésben. Ehhez kövesse az alábbi lépéseket:
1. lépés: Jelentkezzen be az irányítópultra
Nyissa meg a böngészőt, és lépjen a ' http://localhost/<Website-Name>/wp-login.php ” linkre. Adja meg az adminisztrátori hitelesítő adatokat, és nyomja meg a „ Belépés ” gomb:
2. lépés: Hozzon létre egy új bejegyzést
Menj ' Bejegyzések > Új hozzáadása ” az adminisztrációs műszerfal oldalsó menüjéből:
3. lépés: Adjon hozzá egyéni HTML-kódot
A bejegyzésben adja meg a címet és a további tartalmat. Ezután kattintson a „ + ' ikonra, és keresse meg a ' Egyéni HTML ' Blokk:
A hozzáadott HTML blokkba illessze be az alább megadott kódot. Változtasd meg a ' szélesség ' benne ' ” címkéket a folyamatjelző sáv kívánt százalékához. Hasonlóképpen változtassa meg a „ progresszió-szöveg ' Eszerint:
< div osztály = 'egyéni folyamatjelző sáv' >< span stílus = 'szélesség: 80%' >< / span >
< div osztály = 'progresszió-szöveg' > 80% < / div >
< / div >
Ezt követően nyomja meg a „ Közzététel ” gombbal töltheti fel a bejegyzést a weboldalra:
4. lépés: Adjon hozzá egyéni CSS-t
A bejegyzés közzététele után kattintson a „ Bejegyzés megtekintése ” gomb:
Az előnézetben kattintson a „ Testreszab ” gombot a folyamatjelző sáv stílusának hozzáadásához:
A képernyő bal oldalán megjelenik egy szerkesztő menü. Itt görgessen le, és kattintson a „ További CSS ” szakasz:
Illessze be a következő CSS-kódot a mezőbe a folyamatjelző sáv stílusához:
.custom-progress-bar {háttér- szín : #1a1a1a;
magasság : 30 képpont;
padding: 5px;
szélesség : 500 képpont;
margó: 5 képpont 0 ;
határsugár: 5 képpont;
box-shadow: 0 1px 5px #000 betét, 0 1 képpont 0 # 444 ;
}
.custom-progress-bar span {
háttér- szín : #0000FF;
kijelző: inline-block;
balra lebeg;
magasság : 100 %;
határsugár: 3 képpont;
box-shadow: 0 1 képpont 0 rgba ( 255 , 255 , 255 , .5 ) betét;
átmenet: szélesség .4s könnyű be-ki;
}
.progression- szöveg {
szöveg- igazítsa : jobb;
szín : fehér;
margó: 0px;
}
5. lépés: Tegye közzé a bejegyzést
Végül kattintson a „ Közzététel ” bejegyzést a módosítások mentéséhez:
Az oldal újratöltésekor a felhasználó láthatja, hogy a folyamatjelző sáv látható a bejegyzésben:
Hogyan adhatunk folyamatjelző sávokat a WordPress webhelyekhez bővítmények segítségével?
Ez a bemutató az „Ultimate Blocks” beépülő modult használja, hogy folyamatjelző sávot adjon egy WordPress webhelyhez. Ugyanezhez kövesse az alábbi lépéseket.
1. lépés: Új beépülő modul hozzáadása
Miután a felhasználó bejelentkezett az irányítópultra, lépjen a „ Bővítmények > Új hozzáadása ” opciót az oldalsó menüsorból:
2. lépés: Telepítse az Ultimate Blocks beépülő modult
Keresse meg az Ultimate Blocks-t, és nyomja meg a „ Belép ' kulcs. Ezután kattintson a lenti „ Telepítés most ” gomb:
3. lépés: Az Ultimate Blocks aktiválása
A bővítmény telepítése után kattintson a „ Aktiválja ” gombot a folyamatjelző sáv használatához a WordPressben:
4. lépés: Hozzon létre egy új bejegyzést
Ha folyamatjelző sávot szeretne hozzáadni egy WordPress-bejegyzéshez, lépjen a ' Bejegyzések > Új hozzáadása ” opciót az oldalsó menüből:
5. lépés: Adja hozzá a folyamatjelző blokkot
Adja meg a bejegyzés címét és tartalmát. Ezután nyomja meg a „ + ” ikonra új blokk hozzáadásához. A menüben keresse meg a „ Fejlődésmutató ” és válassza ki a blokkot:
6. lépés: Állítsa be a sáv százalékát
A folyamatjelző sáv százalékának beállításához használja a kék csúszkát, vagy írja be a százalékot az alábbi kiemelő mezőbe:
7. lépés: Tegye közzé a bejegyzést
A bejegyzés elkészülte után kattintson a „ Közzététel ” gombbal töltheti fel a bejegyzést a weboldalra:
8. lépés: Tekintse meg a bejegyzést
A bejegyzés közzététele után a „Bejegyzés megtekintése” gombra kattintva megtekintheti a bejegyzés előnézetét a weboldalon:
Az alábbi kimeneten látható, hogy a folyamatjelző sáv hozzáadódik a bejegyzéshez:
Ez mind arról szól, hogy adjunk hozzá egy folyamatjelzőt a WordPresshez.
Következtetés
Ha folyamatjelző sávot szeretne hozzáadni egy WordPress webhelyhez, lépjen a „ Bővítmények > Új hozzáadása ” opciót az oldalsó menüből. Keresse meg és telepítse a ' Végső blokkok ' csatlakoztat. A telepítés után aktiválja. Ezután lépjen a ' Bejegyzések > Új hozzáadása ” és adja meg a bejegyzés címét és tartalmát. Ezután kattintson a „ + ' ikonra, és keresse meg a ' Fejlődésmutató ' Blokk. Állítsa be a haladási százalékot a csúszkával vagy a szám beírásával. Ez a cikk bemutatja, hogyan lehet folyamatjelző sávot hozzáadni a WordPresshez a bővítménnyel és anélkül.