ఈ వ్యాసం కింది అవుట్‌లైన్‌ని ఉపయోగించి WordPressలో ప్రోగ్రెస్ బార్‌ను జోడించే విధానాన్ని అందిస్తుంది:
- WPలో ప్రోగ్రెస్ బార్ అంటే ఏమిటి?
- కోడ్ ఉపయోగించి WordPress వెబ్‌సైట్‌లకు ప్రోగ్రెస్ బార్‌లను ఎలా జోడించాలి?
- ప్లగిన్‌లను ఉపయోగించి WordPress వెబ్‌సైట్‌లకు ప్రోగ్రెస్ బార్‌లను ఎలా జోడించాలి?
WordPress లో ప్రోగ్రెస్ బార్ అంటే ఏమిటి?
ప్రోగ్రెస్ బార్ క్షితిజ సమాంతర పట్టీని ఉపయోగించి శాతంలో ఏదైనా పురోగతిని చూపుతుంది. ఇది కేవలం ఒక చూపుతో వినియోగదారుకు సమాచారాన్ని అందించగల కొంత డేటా యొక్క గ్రాఫికల్ ప్రాతినిధ్యం. డేటా లేదా గణాంకాలను సూచించడానికి మీ WordPress పోస్ట్‌లలో ప్రోగ్రెస్ బార్‌లను ఉపయోగించడం వల్ల వెబ్‌సైట్ యొక్క అప్పీల్ మరియు వినియోగదారుల నిశ్చితార్థాన్ని మెరుగుపరచడంలో సహాయపడుతుంది.
కోడ్ ఉపయోగించి WordPress వెబ్‌సైట్‌లకు ప్రోగ్రెస్ బార్‌లను ఎలా జోడించాలి?
ప్లగిన్ లేకుండా WordPressకి ప్రోగ్రెస్ బార్‌ని జోడించడానికి, వినియోగదారు పోస్ట్‌లో అనుకూల HTML మరియు CSSని ఉపయోగించాలి. దీన్ని చేయడానికి, దిగువ అందించిన దశలను అనుసరించండి:
దశ 1: డాష్‌బోర్డ్‌కి లాగిన్ చేయండి
బ్రౌజర్‌ని తెరిచి ''కి వెళ్లండి http://localhost/<Website-Name>/wp-login.php ” లింక్. నిర్వాహక ఆధారాలను అందించండి మరియు 'ని నొక్కండి ప్రవేశించండి ”బటన్:
దశ 2: కొత్త పోస్ట్‌ను సృష్టించండి
వెళ్ళండి' పోస్ట్లు > కొత్తవి జోడించండి ” అడ్మిన్ డాష్‌బోర్డ్ సైడ్ మెను నుండి:
దశ 3: అనుకూల HTML కోడ్‌ని జోడించండి
పోస్ట్‌లో, శీర్షిక మరియు అదనపు కంటెంట్‌ను అందించండి. ఆపై, 'పై క్లిక్ చేయండి + 'చిహ్నం, మరియు ' కోసం శోధించండి అనుకూల HTML ”బ్లాక్:
జోడించిన HTML బ్లాక్‌లో, దిగువ అందించిన కోడ్‌ను అతికించండి. మార్చు ' వెడల్పు 'లోపల' ప్రోగ్రెస్ బార్‌లో కావలసిన శాతం కోసం ” ట్యాగ్‌లు. అదేవిధంగా, 'ని మార్చండి పురోగతి-వచనం ”అనుగుణంగా:
< div తరగతి = 'కస్టమ్-ప్రోగ్రెస్-బార్' >< వ్యవధి శైలి = 'వెడల్పు: 80%' >< / వ్యవధి >
< div తరగతి = 'పురోగతి-వచనం' > 80% < / div >
< / div >
ఆ తర్వాత, '' నొక్కండి ప్రచురించండి పోస్ట్‌ను వెబ్‌సైట్‌కి అప్‌లోడ్ చేయడానికి బటన్:
దశ 4: అనుకూల CSSని జోడించండి
పోస్ట్ ప్రచురించబడిన తర్వాత, 'పై క్లిక్ చేయండి పోస్ట్‌ని వీక్షించండి ”బటన్:
ప్రివ్యూలో, 'పై క్లిక్ చేయండి అనుకూలీకరించండి ప్రోగ్రెస్ బార్ కోసం స్టైలింగ్‌ను జోడించడానికి ” బటన్:
స్క్రీన్ ఎడమ వైపున ఎడిటర్ మెను కనిపిస్తుంది. ఇక్కడ, క్రిందికి స్క్రోల్ చేసి, 'పై క్లిక్ చేయండి అదనపు CSS 'విభాగం:
ప్రోగ్రెస్ బార్‌ను స్టైల్ చేయడానికి క్రింది CSS కోడ్‌ను బాక్స్‌లో అతికించండి:
.కస్టమ్-ప్రోగ్రెస్-బార్ {నేపథ్య- రంగు : #1a1a1a;
ఎత్తు : 30px;
పాడింగ్: 5px;
వెడల్పు : 500px;
మార్జిన్: 5px 0 ;
సరిహద్దు-వ్యాసార్థం: 5px;
పెట్టె నీడ: 0 1px 5px #000 ఇన్సెట్, 0 1px 0 # 444 ;
}
.కస్టమ్-ప్రోగ్రెస్-బార్ వ్యవధి {
నేపథ్య- రంగు : #0000FF;
ప్రదర్శన: ఇన్లైన్-బ్లాక్;
ఫ్లోట్: ఎడమ;
ఎత్తు : 100 %;
సరిహద్దు-వ్యాసార్థం: 3px;
పెట్టె నీడ: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) ఇన్సెట్;
పరివర్తన: వెడల్పు .4s ఈజ్-ఇన్-అవుట్;
}
.ప్రగతి- వచనం {
వచనం- సమలేఖనం : కుడి;
రంగు : తెలుపు;
మార్జిన్: 0px;
}
దశ 5: పోస్ట్‌ను ప్రచురించండి
చివరగా, 'పై క్లిక్ చేయండి ప్రచురించండి ” ఈ మార్పులను సేవ్ చేయడానికి పోస్ట్:
పేజీని మళ్లీ లోడ్ చేసిన తర్వాత, పోస్ట్‌లో ప్రోగ్రెస్ బార్ కనిపించడాన్ని వినియోగదారు చూడగలరు:
ప్లగిన్‌లను ఉపయోగించి WordPress వెబ్‌సైట్‌లకు ప్రోగ్రెస్ బార్‌లను ఎలా జోడించాలి?
ఈ ప్రదర్శన WordPress వెబ్‌సైట్‌కి ప్రోగ్రెస్ బార్‌ను జోడించడానికి 'అల్టిమేట్ బ్లాక్స్' ప్లగ్ఇన్‌ను ఉపయోగిస్తుంది. అదే విధంగా చేయడానికి, దిగువ అందించిన దశలను అనుసరించండి.
దశ 1: కొత్త ప్లగిన్‌ని జోడించండి
వినియోగదారు డాష్‌బోర్డ్‌లోకి లాగిన్ అయిన తర్వాత, “కి వెళ్లండి ప్లగిన్‌లు > కొత్తవి జోడించండి సైడ్ మెను బార్ నుండి ” ఎంపిక:
దశ 2: అల్టిమేట్ బ్లాక్స్ ప్లగిన్‌ని ఇన్‌స్టాల్ చేయండి
అల్టిమేట్ బ్లాక్స్ కోసం శోధించండి మరియు '' నొక్కండి నమోదు చేయండి ”కీ. ఆపై, దిగువ సూచించిన “పై క్లిక్ చేయండి ఇప్పుడే ఇన్‌స్టాల్ చేయండి ”బటన్:
దశ 3: అల్టిమేట్ బ్లాక్‌లను యాక్టివేట్ చేయండి
ప్లగ్ఇన్ ఇన్‌స్టాల్ చేయబడిన తర్వాత, 'పై క్లిక్ చేయండి యాక్టివేట్ చేయండి WordPressలో ప్రోగ్రెస్ బార్‌ని ఉపయోగించడానికి ” బటన్:
దశ 4: కొత్త పోస్ట్‌ను సృష్టించండి
WordPress పోస్ట్‌కి ప్రోగ్రెస్ బార్‌ని జోడించడానికి, ''కి వెళ్లండి పోస్ట్లు > కొత్తవి జోడించండి సైడ్ మెను నుండి ” ఎంపిక:
దశ 5: ప్రోగ్రెస్ బార్ బ్లాక్‌ను జోడించండి
పోస్ట్‌కు శీర్షిక మరియు కంటెంట్‌ను అందించండి. తరువాత, 'ని నొక్కండి + 'కొత్త బ్లాక్‌ని జోడించడానికి చిహ్నం. మెనులో, '' కోసం శోధించండి ప్రోగ్రెస్ బార్ ” మరియు బ్లాక్‌ని ఎంచుకోండి:
దశ 6: బార్ కోసం శాతాన్ని సెట్ చేయండి
ప్రోగ్రెస్ బార్ కోసం శాతాన్ని సెట్ చేయడానికి, నీలిరంగు స్లయిడర్‌ని ఉపయోగించండి లేదా దిగువ-హైలైట్ బాక్స్‌లో శాతాన్ని నమోదు చేయండి:
దశ 7: పోస్ట్‌ను ప్రచురించండి
పోస్ట్ పూర్తయిన తర్వాత, 'పై క్లిక్ చేయండి ప్రచురించండి పోస్ట్‌ను వెబ్‌సైట్‌కి అప్‌లోడ్ చేయడానికి బటన్:
దశ 8: పోస్ట్‌ను వీక్షించండి
పోస్ట్‌ను ప్రచురించిన తర్వాత, వెబ్‌సైట్‌లో పోస్ట్ ప్రివ్యూను చూడటానికి “పోస్ట్‌ని వీక్షించండి” బటన్‌పై క్లిక్ చేయండి:
పోస్ట్‌కి ప్రోగ్రెస్ బార్ జోడించబడిందని దిగువ అవుట్‌పుట్‌లో చూడవచ్చు:
WordPress లో ప్రోగ్రెస్ బార్‌ని జోడించడం గురించి అంతే.
ముగింపు
WordPress వెబ్‌సైట్‌కి ప్రోగ్రెస్ బార్‌ను జోడించడానికి, ''కి వెళ్లండి ప్లగిన్‌లు > కొత్తవి జోడించండి సైడ్ మెను నుండి ” ఎంపిక. 'ని శోధించి, ఇన్‌స్టాల్ చేయండి అల్టిమేట్ బ్లాక్స్ ' అనుసంధానించు. సంస్థాపన తర్వాత, దానిని సక్రియం చేయండి. అప్పుడు, వెళ్ళండి' పోస్ట్లు > కొత్తవి జోడించండి ” మరియు పోస్ట్ యొక్క శీర్షిక మరియు కంటెంట్‌ను అందించండి. తరువాత, 'పై క్లిక్ చేయండి + ' చిహ్నం మరియు ' కోసం శోధించండి ప్రోగ్రెస్ బార్ ”బ్లాక్. స్లయిడర్‌ని ఉపయోగించి లేదా సంఖ్యను నమోదు చేయడం ద్వారా పురోగతి శాతాన్ని సెట్ చేయండి. ప్లగిన్‌తో మరియు లేకుండా WordPressలో ప్రోగ్రెస్ బార్‌ని జోడించే విధానాన్ని ఈ కథనం వివరించింది.