Tässä artikkelissa käsitellään edistymispalkin lisäämistä WordPressiin seuraavalla tavalla:
- Mikä on edistymispalkki WP:ssä?
- Kuinka lisätä edistymispalkkeja WordPress-verkkosivustoille koodin avulla?
- Kuinka lisätä edistymispalkkeja WordPress-verkkosivustoille laajennusten avulla?
Mikä on edistymispalkki WordPressissä?
Edistymispalkki näyttää jonkin asian edistymisen prosentteina vaakapalkkia käyttämällä. Se on graafinen esitys tiedoista, jotka voivat tarjota tietoja käyttäjälle yhdellä silmäyksellä. Etenemispalkkien käyttäminen WordPress-viesteissäsi tietojen tai tilastojen esittämiseen voi auttaa parantamaan verkkosivuston houkuttelevuutta ja käyttäjien sitoutumista.
Kuinka lisätä edistymispalkkeja WordPress-verkkosivustoille koodin avulla?
Jos haluat lisätä edistymispalkin WordPressiin ilman laajennusta, käyttäjän on käytettävä mukautettua HTML- ja CSS-koodia viestissä. Voit tehdä sen noudattamalla alla olevia ohjeita:
Vaihe 1: Kirjaudu sisään hallintapaneeliin
Avaa selain ja siirry kohtaan ' http://localhost/<Website-Name>/wp-login.php ” linkkiä. Anna järjestelmänvalvojan tunnistetiedot ja paina ' Kirjaudu sisään ”-painike:
Vaihe 2: Luo uusi viesti
Mene ' Viestit > Lisää uusi ” hallintapaneelin sivuvalikosta:
Vaihe 3: Lisää mukautettu HTML-koodi
Anna viestissä otsikko ja lisäsisältö. Napsauta sitten ' + ' -kuvaketta ja etsi ' Muokattu HTML 'lohko:
Liitä lisättyyn HTML-lohkoon alla annettu koodi. Muuta ' leveys ' sisällä ' ' -tunnisteet edistymispalkin halutulle prosenttiosuudelle. Muuta vastaavasti ' etenemisteksti ' asianmukaisesti:
< div luokkaa = 'muokattu edistymispalkki' >< jänneväli tyyli = 'leveys: 80%' >< / jänneväli >
< div luokkaa = 'etenemisteksti' > 80 % < / div >
< / div >
Paina sen jälkeen ' Julkaista ” -painiketta lähettääksesi julkaisun verkkosivustolle:
Vaihe 4: Lisää mukautettu CSS
Kun viesti on julkaistu, napsauta ' Näytä viesti ”-painike:
Napsauta esikatselussa ' Mukauta ” -painiketta lisätäksesi edistymispalkin tyylin:
Muokkausvalikko tulee näkyviin näytön vasempaan reunaan. Vieritä täällä alas ja napsauta ' Ylimääräinen CSS ”-osio:
Liitä seuraava CSS-koodi kenttään muokataksesi edistymispalkin tyyliä:
.custom-progress-bar {tausta- väri : #1a1a1a;
korkeus : 30px;
täyte: 5px;
leveys : 500px;
marginaali: 5px 0 ;
reunan säde: 5px;
laatikko-varjo: 0 1px 5px #000 upotettu, 0 1px 0 # 444 ;
}
.custom-progress-bar jänneväli {
tausta- väri : #0000FF;
näyttö: inline-block;
kellua: vasen;
korkeus : 100 %;
reunan säde: 3px;
laatikko-varjo: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) upotettu;
siirtyminen: leveys .4s helppous sisään-ulos;
}
.progression- teksti {
teksti- kohdistaa : oikea;
väri : valkoinen;
marginaali: 0px;
}
Vaihe 5: Julkaise viesti
Napsauta lopuksi ' Julkaista ” postitse tallentaaksesi nämä muutokset:
Ladattaessa sivua uudelleen käyttäjä näkee, että edistymispalkki näkyy viestissä:
Kuinka lisätä edistymispalkkeja WordPress-verkkosivustoille laajennusten avulla?
Tämä esittely käyttää Ultimate Blocks -laajennusta edistymispalkin lisäämiseen WordPress-verkkosivustolle. Voit tehdä saman noudattamalla alla olevia ohjeita.
Vaihe 1: Lisää uusi laajennus
Kun käyttäjä on kirjautunut kojelautaan, siirry kohtaan ' Plugins > Lisää uusi ” -vaihtoehto sivuvalikkopalkista:
Vaihe 2: Asenna Ultimate Blocks -laajennus
Etsi Ultimate Blocks ja paina ' Tulla sisään ”-näppäintä. Napsauta sitten alla olevaa ' Asenna nyt ”-painike:
Vaihe 3: Aktivoi Ultimate Blocks
Kun laajennus on asennettu, napsauta ' Aktivoida ” -painiketta käyttääksesi edistymispalkkia WordPressissä:
Vaihe 4: Luo uusi viesti
Jos haluat lisätä edistymispalkin WordPress-viestiin, siirry kohtaan ' Viestit > Lisää uusi ” vaihtoehto sivuvalikosta:
Vaihe 5: Lisää edistymispalkkilohko
Anna viestille otsikko ja sisältö. Paina seuraavaksi ' + ” -kuvaketta lisätäksesi uuden lohkon. Etsi valikosta ' Edistymispalkki ' ja valitse lohko:
Vaihe 6: Aseta palkin prosenttiosuus
Aseta edistymispalkin prosenttiosuus käyttämällä sinistä liukusäädintä tai kirjoittamalla prosenttiosuus alla olevaan korostusruutuun:
Vaihe 7: Julkaise viesti
Kun viesti on valmis, napsauta ' Julkaista ” -painiketta lähettääksesi julkaisun verkkosivustolle:
Vaihe 8: Katso viesti
Kun olet julkaissut viestin, napsauta 'Näytä viesti' -painiketta nähdäksesi julkaisun esikatselun verkkosivustolla:
Alla olevasta lähdöstä näkyy, että edistymispalkki on lisätty viestiin:
Siinä on kyse edistymispalkin lisäämisestä WordPressiin.
Johtopäätös
Jos haluat lisätä edistymispalkin WordPress-verkkosivustoon, siirry kohtaan ' Plugins > Lisää uusi ” -vaihtoehto sivuvalikosta. Etsi ja asenna ' Ultimate Blocks ' kytkeä. Aktivoi se asennuksen jälkeen. Siirry sitten kohtaan ' Viestit > Lisää uusi ” ja anna julkaisun otsikko ja sisältö. Napsauta seuraavaksi ' + ' -kuvaketta ja etsi ' Edistymispalkki ” lohko. Aseta edistymisprosentti liukusäätimellä tai syöttämällä numero. Tämä artikkeli on havainnollistanut prosessin edistymispalkin lisäämiseksi WordPressiin laajennuksen kanssa ja ilman.