Denne artikkelen vil gi prosedyren for å legge til en fremdriftslinje i WordPress ved å bruke følgende oversikt:
- Hva er en fremdriftslinje i WP?
- Hvordan legge til fremdriftslinjer på WordPress-nettsteder ved hjelp av kode?
- Hvordan legge til fremdriftslinjer på WordPress-nettsteder ved hjelp av plugins?
Hva er en fremdriftslinje i WordPress?
En fremdriftslinje viser fremdriften til noe i prosent ved hjelp av en horisontal linje. Det er en grafisk representasjon av noen data som kan gi informasjon til brukeren bare ved et enkelt blikk. Å bruke fremdriftsindikatorer i WordPress-innleggene dine for å representere data eller statistikk kan bidra til å forbedre appelleren til nettstedet og engasjementet til brukerne.
Hvordan legge til fremdriftslinjer på WordPress-nettsteder ved hjelp av kode?
For å legge til en fremdriftslinje til WordPress uten en plugin, må brukeren bruke tilpasset HTML og CSS i et innlegg. For å gjøre det, følg trinnene nedenfor:
Trinn 1: Logg inn på dashbordet
Åpne nettleseren og gå til ' http://localhost/<Website-Name>/wp-login.php ' lenke. Oppgi administratorlegitimasjonen og trykk på ' Logg Inn ”-knapp:
Trinn 2: Opprett et nytt innlegg
Gå til ' Innlegg > Legg til ny ' fra sidemenyen til admin-dashbordet:
Trinn 3: Legg til egendefinert HTML-kode
Oppgi tittel og tilleggsinnhold i innlegget. Klikk deretter på ' + '-ikonet, og søk etter ' Egendefinert HTML ' blokk:
I HTML-blokken som er lagt til, limer du inn koden nedenfor. Endre ' bredde ' inne i ' ”-tagger for ønsket prosentandel av fremdriftslinjen. På samme måte endrer du ' progresjonstekst ' tilsvarende:
< div klasse = 'egendefinert fremdriftslinje' >< span stil = 'bredde: 80%' >< / span >
< div klasse = 'progresjonstekst' > 80 % < / div >
< / div >
Deretter trykker du på ' publisere '-knappen for å laste opp innlegget til nettstedet:
Trinn 4: Legg til tilpasset CSS
Når innlegget er publisert, klikk på ' Se innlegg ”-knapp:
I forhåndsvisningen klikker du på ' Tilpass '-knappen for å legge til stilen for fremdriftslinjen:
En redigeringsmeny vil vises på venstre side av skjermen. Her, rull ned og klikk på ' Ekstra CSS ' seksjon:
Lim inn følgende CSS-kode i boksen for å style fremdriftslinjen:
.custom-progress-bar {bakgrunn- farge : #1a1a1a;
høyde : 30px;
polstring: 5px;
bredde : 500px;
margin: 5px 0 ;
kantradius: 5px;
boks-skygge: 0 1px 5px #000 innfelt, 0 1 px 0 # 444 ;
}
.custom-progress-bar span {
bakgrunn- farge : #0000FF;
display: inline-blokk;
flyte: venstre;
høyde : 100 %;
border-radius: 3px;
boks-skygge: 0 1 px 0 rgba ( 255 , 255 , 255 , .5 ) innfelt;
overgang: bredde .4s lett inn-ut;
}
.progresjon- tekst {
tekst- tilpasse : Ikke sant;
farge : hvit;
margin: 0px;
}
Trinn 5: Publiser innlegget
Til slutt klikker du på ' publisere ' post for å lagre disse endringene:
Ved å laste inn siden på nytt kan brukeren se at fremdriftslinjen kan sees i innlegget:
Hvordan legge til fremdriftslinjer på WordPress-nettsteder ved hjelp av plugins?
Denne demonstrasjonen vil bruke 'Ultimate Blocks'-pluginen for å legge til en fremdriftslinje på et WordPress-nettsted. For å gjøre det samme, følg trinnene nedenfor.
Trinn 1: Legg til en ny plugin
Når brukeren er logget på dashbordet, gå til ' Plugins > Legg til ny alternativ fra sidemenylinjen:
Trinn 2: Installer Ultimate Blocks Plugin
Søk etter de ultimate blokkene og trykk på ' Tast inn '-tasten. Deretter klikker du på den pekte ' Installere nå ”-knapp:
Trinn 3: Aktiver Ultimate Blocks
Når plugin-en er installert, klikker du på ' Aktiver '-knappen for å bruke fremdriftslinjen i WordPress:
Trinn 4: Opprett et nytt innlegg
For å legge til en fremdriftslinje til et WordPress-innlegg, gå til ' Innlegg > Legg til nytt alternativ fra sidemenyen:
Trinn 5: Legg til fremdriftslinjeblokken
Oppgi tittel og innhold til innlegget. Deretter trykker du på ' + ”-ikonet for å legge til en ny blokk. I menyen, søk etter ' Fremdriftslinje ' og velg blokken:
Trinn 6: Angi prosentandelen for linjen
For å angi en prosentandel for fremdriftslinjen, bruk den blå glidebryteren eller skriv inn prosentandelen i uthevingsboksen nedenfor:
Trinn 7: Publiser innlegget
Etter at innlegget er fullført, klikk på ' publisere '-knappen for å laste opp innlegget til nettstedet:
Trinn 8: Se innlegget
Etter å ha publisert innlegget, klikk på 'Se innlegg'-knappen for å se forhåndsvisningen av innlegget på nettstedet:
Det kan sees i utgangen nedenfor at fremdriftslinjen er lagt til innlegget:
Det handler om å legge til en fremdriftslinje i WordPress.
Konklusjon
For å legge til en fremdriftslinje på et WordPress-nettsted, gå til ' Plugins > Legg til ny '-alternativet fra sidemenyen. Søk og installer ' Ultimate blokker ' plugg inn. Etter installasjonen, aktiver den. Gå deretter til ' Innlegg > Legg til nytt ” og oppgi tittelen og innholdet på innlegget. Klikk deretter på ' + '-ikonet og søk etter ' Fremdriftslinje ' blokk. Still inn fremdriftsprosenten ved å bruke glidebryteren eller ved å taste inn tallet. Denne artikkelen har illustrert prosedyren for å legge til en fremdriftslinje i WordPress med og uten plugin.