Denne artikel vil give proceduren for tilføjelse af en statuslinje i WordPress ved hjælp af følgende oversigt:
- Hvad er en statuslinje i WP?
- Sådan tilføjer du statuslinjer til WordPress-websteder ved hjælp af kode?
- Hvordan tilføjer man statuslinjer til WordPress-websteder ved hjælp af plugins?
Hvad er en Progress Bar i WordPress?
En statuslinje viser fremskridtet for noget i procent ved hjælp af en vandret bjælke. Det er en grafisk repræsentation af nogle data, der kan give information til brugeren ved blot et enkelt blik. Brug af statuslinjer i dine WordPress-indlæg til at repræsentere data eller statistik kan hjælpe med at forbedre webstedets tiltrækningskraft og brugernes engagement.
Sådan tilføjer du statuslinjer til WordPress-websteder ved hjælp af kode?
For at tilføje en statuslinje til WordPress uden et plugin, skal brugeren bruge den tilpassede HTML og CSS i et indlæg. For at gøre det, følg nedenstående trin:
Trin 1: Log ind på dashboardet
Åbn browseren og gå til ' http://localhost/<Website-Name>/wp-login.php ' link. Angiv administratoroplysningerne og tryk på ' Log på ” knap:
Trin 2: Opret et nyt indlæg
Gå til ' Indlæg > Tilføj nyt ” fra sidemenuen på admin-dashboardet:
Trin 3: Tilføj tilpasset HTML-kode
Angiv titlen og yderligere indhold i indlægget. Klik derefter på ' + '-ikonet, og søg efter ' Brugerdefineret HTML ' blok:
Indsæt nedenstående kode i den tilføjede HTML-blok. Skift ' bredde ' inde i ' ” tags for den ønskede procentdel af statuslinjen. Tilsvarende skal du ændre ' progressionstekst ' følgelig:
< div klasse = 'custom-progress-bar' >< span stil = 'bredde: 80%' >< / span >
< div klasse = 'progressions-tekst' > 80 % < / div >
< / div >
Tryk derefter på ' Offentliggøre knappen for at uploade indlægget til hjemmesiden:
Trin 4: Tilføj Custom CSS
Når indlægget er offentliggjort, klik på ' Se indlæg ” knap:
I forhåndsvisningen skal du klikke på ' Tilpas knappen for at tilføje stilen til statuslinjen:
En redigeringsmenu vises i venstre side af skærmen. Her, scroll ned og klik på ' Yderligere CSS ” afsnit:
Indsæt følgende CSS-kode i boksen for at style statuslinjen:
.custom-progress-bar {baggrund- farve : #1a1a1a;
højde : 30px;
polstring: 5px;
bredde : 500px;
margin: 5px 0 ;
kant-radius: 5px;
box-shadow: 0 1px 5px #000 indsat, 0 1 px 0 # 444 ;
}
.custom-progress-bar span {
baggrund- farve : #0000FF;
display: inline-blok;
flyde: venstre;
højde : 100 %;
kant-radius: 3px;
box-shadow: 0 1 px 0 rgba ( 255 , 255 , 255 , .5 ) indsat;
overgang: bredde .4s let ind-ud;
}
.progression- tekst {
tekst- justere : højre;
farve : hvid;
margin: 0px;
}
Trin 5: Udgiv indlægget
Klik til sidst på ' Offentliggøre ' post for at gemme disse ændringer:
Ved genindlæsning af siden kan brugeren se, at statuslinjen kan ses i indlægget:
Hvordan tilføjer man statuslinjer til WordPress-websteder ved hjælp af plugins?
Denne demonstration vil bruge 'Ultimate Blocks' plugin til at tilføje en statuslinje til et WordPress-websted. For at gøre det samme, følg nedenstående trin.
Trin 1: Tilføj et nyt plugin
Når brugeren er logget ind på dashboardet, skal du gå til ' Plugins > Tilføj nyt ' valgmulighed fra sidemenulinjen:
Trin 2: Installer Ultimate Blocks Plugin
Søg efter de ultimative blokke og tryk på ' Gå ind ” nøgle. Klik derefter på nedenstående pegede ' Installer nu ” knap:
Trin 3: Aktiver Ultimate Blocks
Når pluginnet er installeret, skal du klikke på ' Aktiver knappen for at bruge statuslinjen i WordPress:
Trin 4: Opret et nyt indlæg
For at tilføje en statuslinje til et WordPress-indlæg skal du gå til ' Indlæg > Tilføj nyt ' valgmulighed fra sidemenuen:
Trin 5: Tilføj statuslinjeblokken
Angiv en titel og indhold til indlægget. Tryk derefter på ' + ”-ikonet for at tilføje en ny blok. I menuen skal du søge efter ' Fremskridtslinje ' og vælg blokken:
Trin 6: Indstil procentdelen for bjælken
For at angive en procentdel for statuslinjen skal du bruge den blå skyder eller indtaste procentdelen i feltet nedenfor:
Trin 7: Udgiv indlægget
Når indlægget er færdigt, skal du klikke på ' Offentliggøre knappen for at uploade indlægget til hjemmesiden:
Trin 8: Se indlægget
Når du har offentliggjort indlægget, skal du klikke på knappen 'Se indlæg' for at se forhåndsvisningen af indlægget på hjemmesiden:
Det kan ses i nedenstående output, at statuslinjen er tilføjet til indlægget:
Det handler om at tilføje en statuslinje i WordPress.
Konklusion
For at tilføje en statuslinje til et WordPress-websted skal du gå til ' Plugins > Tilføj nyt ” valgmulighed fra sidemenuen. Søg og installer ' Ultimative blokke ' plugin. Efter installationen skal du aktivere den. Gå derefter til ' Indlæg > Tilføj nyt ” og angiv titlen og indholdet af indlægget. Klik derefter på ' + '-ikonet og søg efter ' Fremskridtslinje ” blok. Indstil fremskridtsprocenten ved hjælp af skyderen eller ved at indtaste tallet. Denne artikel har illustreret proceduren for at tilføje en statuslinje i WordPress med og uden plugin.