यह आलेख निम्नलिखित रूपरेखा का उपयोग करके वर्डप्रेस में प्रगति पट्टी जोड़ने की प्रक्रिया प्रदान करेगा:
- WP में प्रोग्रेस बार क्या है?
- कोड का उपयोग करके वर्डप्रेस वेबसाइटों में प्रगति बार कैसे जोड़ें?
- प्लगइन्स का उपयोग करके वर्डप्रेस वेबसाइटों पर प्रगति बार कैसे जोड़ें?
वर्डप्रेस में प्रोग्रेस बार क्या है?
प्रगति पट्टी क्षैतिज पट्टी का उपयोग करके किसी चीज़ की प्रगति को प्रतिशत में दिखाती है। यह कुछ डेटा का ग्राफिकल प्रतिनिधित्व है जो उपयोगकर्ता को केवल एक नज़र से जानकारी प्रदान कर सकता है। डेटा या आँकड़ों को दर्शाने के लिए अपने वर्डप्रेस पोस्ट में प्रगति पट्टियों का उपयोग करने से वेबसाइट की अपील और उपयोगकर्ताओं की सहभागिता को बेहतर बनाने में मदद मिल सकती है।
कोड का उपयोग करके वर्डप्रेस वेबसाइटों में प्रगति बार कैसे जोड़ें?
प्लगइन के बिना वर्डप्रेस में प्रोग्रेस बार जोड़ने के लिए, उपयोगकर्ता को पोस्ट में कस्टम HTML और CSS का उपयोग करना होगा। ऐसा करने के लिए, नीचे दिए गए चरणों का पालन करें:
चरण 1: डैशबोर्ड में लॉग इन करें
ब्राउज़र खोलें और “पर जाएँ” http://localhost/<Website-Name>/wp-login.php ' जोड़ना। व्यवस्थापक क्रेडेंशियल प्रदान करें और ' दबाएं लॉग इन करें ' बटन:
चरण 2: एक नई पोस्ट बनाएं
जाओ ' पोस्ट > नया जोड़ें एडमिन डैशबोर्ड के साइड मेनू से:
चरण 3: कस्टम HTML कोड जोड़ें
पोस्ट में, शीर्षक और अतिरिक्त सामग्री प्रदान करें। फिर, 'पर क्लिक करें + ' आइकन, और ' खोजें कस्टम HTML ' अवरोध पैदा करना:
जोड़े गए HTML ब्लॉक में, नीचे दिए गए कोड को पेस्ट करें। को बदलें ' चौड़ाई ' के अंदर ' प्रगति पट्टी के वांछित प्रतिशत के लिए टैग। इसी तरह, बदलें ' प्रगति-पाठ ' इसलिए:
< डिव कक्षा = 'कस्टम-प्रगति-बार' >< अवधि शैली = 'चौड़ाई: 80%' < / अवधि >
< डिव कक्षा = 'प्रगति-पाठ' > 80% < / डिव >
< / डिव >
उसके बाद, ' दबाएं प्रकाशित करना वेबसाइट पर पोस्ट अपलोड करने के लिए बटन:
चरण 4: कस्टम सीएसएस जोड़ें
पोस्ट प्रकाशित होने के बाद, “पर क्लिक करें” पोस्ट देखें ' बटन:
पूर्वावलोकन में, “पर क्लिक करें अनुकूलित करें प्रगति पट्टी के लिए स्टाइल जोड़ने के लिए बटन:
स्क्रीन के बाईं ओर एक संपादक मेनू दिखाई देगा। यहां, नीचे स्क्रॉल करें और “पर क्लिक करें” अतिरिक्त सीएसएस ' अनुभाग:
प्रगति पट्टी को स्टाइल करने के लिए बॉक्स में निम्नलिखित CSS कोड चिपकाएँ:
.कस्टम-प्रगति-बार {पृष्ठभूमि- रंग : #1ए1ए1ए;
ऊंचाई : 30px;
पैडिंग: 5px;
चौड़ाई : 500px;
मार्जिन: 5px 0 ;
बॉर्डर-त्रिज्या: 5px;
डब्बे की छाया: 0 1px 5px #000 इनसेट, 0 1px 0 # 444 ;
}
.कस्टम-प्रगति-बार अवधि {
पृष्ठभूमि- रंग : #0000FF;
प्रदर्शन: इनलाइन-ब्लॉक;
नाव छोड़ी;
ऊंचाई : 100 %;
सीमा-त्रिज्या: 3px;
डब्बे की छाया: 0 1px 0 आरजीबीए ( 255 , 255 , 255 , .5 ) इनसेट;
संक्रमण: चौड़ाई .4s आसानी से अंदर-बाहर;
}
.प्रगति- मूलपाठ {
मूलपाठ- संरेखित : सही;
रंग : सफ़ेद;
मार्जिन: 0px;
}
चरण 5: पोस्ट प्रकाशित करें
अंत में, 'पर क्लिक करें प्रकाशित करना इन परिवर्तनों को सहेजने के लिए पोस्ट करें:
पृष्ठ को पुनः लोड करने पर, उपयोगकर्ता देख सकता है कि प्रगति पट्टी पोस्ट में देखी जा सकती है:
प्लगइन्स का उपयोग करके वर्डप्रेस वेबसाइटों पर प्रगति बार कैसे जोड़ें?
यह प्रदर्शन वर्डप्रेस वेबसाइट पर प्रगति बार जोड़ने के लिए 'अल्टीमेट ब्लॉक्स' प्लगइन का उपयोग करेगा। ऐसा करने के लिए, नीचे दिए गए चरणों का पालन करें।
चरण 1: एक नया प्लगइन जोड़ें
एक बार जब उपयोगकर्ता डैशबोर्ड में लॉग इन हो जाए, तो “पर जाएं” प्लगइन्स > नया जोड़ें साइड मेनू बार से विकल्प:
चरण 2: अल्टीमेट ब्लॉक्स प्लगइन इंस्टॉल करें
अल्टीमेट ब्लॉक्स खोजें और “दबाएँ” प्रवेश करना ' चाबी। फिर, नीचे बताए गए बटन पर क्लिक करें अब स्थापित करें ' बटन:
चरण 3: अल्टीमेट ब्लॉक सक्रिय करें
एक बार प्लगइन इंस्टॉल हो जाने पर, “पर क्लिक करें” सक्रिय वर्डप्रेस में प्रगति पट्टी का उपयोग करने के लिए बटन:
चरण 4: एक नई पोस्ट बनाएं
किसी वर्डप्रेस पोस्ट में प्रगति पट्टी जोड़ने के लिए, “पर जाएँ” पोस्ट > नया जोड़ें साइड मेनू से विकल्प:
चरण 5: प्रोग्रेस बार ब्लॉक जोड़ें
पोस्ट को शीर्षक और सामग्री प्रदान करें. इसके बाद, “दबाएं” + 'एक नया ब्लॉक जोड़ने के लिए आइकन। मेनू में, “खोजें” प्रोगेस बार ” और ब्लॉक का चयन करें:
चरण 6: बार के लिए प्रतिशत निर्धारित करें
प्रगति पट्टी के लिए प्रतिशत निर्धारित करने के लिए, नीले स्लाइडर का उपयोग करें या नीचे-हाइलाइट बॉक्स में प्रतिशत दर्ज करें:
चरण 7: पोस्ट प्रकाशित करें
पोस्ट पूरी होने के बाद “पर क्लिक करें” प्रकाशित करना वेबसाइट पर पोस्ट अपलोड करने के लिए बटन:
चरण 8: पोस्ट देखें
पोस्ट प्रकाशित करने के बाद, वेबसाइट पर पोस्ट का पूर्वावलोकन देखने के लिए 'पोस्ट देखें' बटन पर क्लिक करें:
नीचे दिए गए आउटपुट में देखा जा सकता है कि पोस्ट में प्रोग्रेस बार जोड़ा गया है:
यह सब वर्डप्रेस में प्रोग्रेस बार जोड़ने के बारे में है।
निष्कर्ष
किसी वर्डप्रेस वेबसाइट पर प्रोग्रेस बार जोड़ने के लिए, “पर जाएँ” प्लगइन्स > नया जोड़ें साइड मेनू से विकल्प। “खोजें और इंस्टॉल करें” अंतिम ब्लॉक ' लगाना। इंस्टालेशन के बाद इसे एक्टिवेट करें। फिर जाएं ' पोस्ट > नया जोड़ें ” और पोस्ट का शीर्षक और सामग्री प्रदान करें। इसके बाद, 'पर क्लिक करें + ' आइकन और ' खोजें प्रोगेस बार ' अवरोध पैदा करना। स्लाइडर का उपयोग करके या संख्या दर्ज करके प्रगति प्रतिशत निर्धारित करें। इस लेख में प्लगइन के साथ और उसके बिना वर्डप्रेस में प्रोग्रेस बार जोड़ने की प्रक्रिया का वर्णन किया गया है।