वर्डप्रेस में डायनामिक विजेट कैसे बनाएं

वर्डप्रेस विजेट आपकी वेबसाइट को गतिशील बनाने और आगंतुकों के साथ प्रभावी ढंग से बातचीत करने में आपकी सहायता कर सकते हैं। उपयोग के लिए कई वर्डप्रेस विजेट उपलब्ध हैं। लेकिन एक कस्टमाइज्ड वर्डप्रेस विजेट बनाने से आपको अपनी वर्डप्रेस वेबसाइट पर अपनी पसंद का कोड जोड़ने में मदद मिलती है।

अधिकांश वेबसाइटें उपयोगकर्ता अनुभव को बढ़ाने और कुछ अन्य उद्देश्यों के लिए गतिशील विजेट का उपयोग कर रही हैं। आप वर्डप्रेस विजेट्स के साथ अपनी वेबसाइट पर संपर्क फ़ॉर्म, लॉगिन फ़ॉर्म, सदस्यता कार्ड, लाइव ट्रैकिंग और कई अन्य सुविधाएँ बना सकते हैं।

विजेट बनाना आसान है और यह पोस्ट आपके लिए इसे आसान बना देगी। तो बिना समय बर्बाद किए चलिए वर्डप्रेस में डायनेमिक विजेट बनाना शुरू करते हैं।

 

वर्डप्रेस में डायनामिक विजेट कैसे बनाएं

इस पोस्ट में, हम इस विषय को तीन प्रमुख भागों में शामिल करेंगे।

 

भाग 1: शुरू करने से पहले कुछ चीज़ें समझें

इससे पहले कि आप डायनेमिक वर्डप्रेस विजेट बनाना सीखें, आपको कुछ चीजें पता होनी चाहिए।

ये चीजें विगेट्स की मूल बातें और कैसे गतिशील विजेट वर्डप्रेस से बने हैं, से संबंधित हैं। इस हिस्से को नज़रअंदाज़ करने, नज़रअंदाज़ करने या छोड़ने की कोशिश न करें, क्योंकि इससे आपको बहुत मदद मिलेगी।

इस हिस्से को बिल्डिंग ब्लॉक मानें। हालाँकि, यदि आप वर्डप्रेस विजेट्स, कोडिंग, प्लगइन्स, फ़ंक्शंस आदि से परिचित हैं, तो आप इसे छोड़ सकते हैं।

 

वर्डप्रेस विजेट क्या है?

एक वर्डप्रेस विजेट एक छोटा ब्लॉक है और यह ब्लॉक आपके वर्डप्रेस वेबपेज पर कहीं रखा गया है।

विजेट का उपयोग आपके आगंतुकों को बिना किसी कोडिंग के सामग्री और कार्यक्षमता का एक अनूठा टुकड़ा प्रदान करने के लिए किया जा सकता है। विजेट बनाने के लिए थोड़ी सी वर्डप्रेस कोडिंग पर्याप्त होगी।

सब्सक्रिप्शन बॉक्स पॉप-अप, सूचनाएं, संपर्क फ़ॉर्म पॉप-अप, लाइव डेटा अपडेट आदि वर्डप्रेस वेबमास्टर्स द्वारा उपयोग किए जाने वाले कुछ सामान्य विजेट हैं।

 

स्थैतिक विजेट

एक स्थिर विजेट का उपयोगकर्ताओं के साथ कोई संपर्क नहीं होता है क्योंकि केवल एकतरफा संचार होता है। इसका उपयोग गैर-परिवर्तनशील जानकारी प्रदान करने या उपयोगकर्ताओं से सरल तरीके से जानकारी एकत्र करने के लिए किया जाता है।

 

गतिशील विजेट

डायनेमिक विजेट उपयोगकर्ताओं के साथ प्रभावी ढंग से बातचीत करते हैं और वे डेटा प्रदान करते हैं जिसे विभिन्न एपीआई का उपयोग करके अपडेट किया जा रहा है। साथ ही, ये विजेट गतिशील रूप से उपयोग करने के साथ-साथ जानकारी एकत्र करते हैं। गतिशील विजेट में एक पूर्ण स्वचालन कार्य है।

 

संयोजन

इन दिनों अधिकांश वेबसाइट स्थिर और गतिशील विजेट के संयोजन का उपयोग करती हैं। इन विगेट्स में, वे गतिशील कार्यक्षमता के साथ स्थिर जानकारी प्रदान करते हैं। 

 

चीजें जो आपको अवश्य जाननी चाहिए

अब आप वर्डप्रेस विजेट और उसके प्रकार से परिचित हैं। वर्डप्रेस अपने उपयोगकर्ताओं को कई इनबिल्ट विजेट प्रदान करता है। लेकिन अगर आप अपनी साइट के लिए एक कस्टमाइज्ड वर्डप्रेस विजेट बनाना चाहते हैं तो आपको निम्नलिखित चीजों की आवश्यकता हो सकती है। 

 

बेसिक कोडिंग

आपको PHP में मूल OOP (ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग) से परिचित होना चाहिए। 

 

बैकअप मूल कोड

ध्यान रखें कि आप अपने वर्डप्रेस कोड के साथ खेलने जा रहे हैं। किसी भी समस्या से बचने के लिए, आपको अपने मूल वर्डप्रेस कोड का बैकअप लेना होगा।

 

कोड की नियुक्ति

वर्डप्रेस विजेट कोड के साथ विकसित किए जाएंगे लेकिन ये कोड कहां रखे जाएंगे? आप वर्डप्रेस थीम में एक विजेट कोड रख सकते हैं functions.php फ़ाइल। जब आपके पास थीम सक्रिय होगी तो ये विजेट सक्रिय होंगे।

 

वर्डप्रेस विजेट मूल बातें

वर्डप्रेस प्रदान करता है  WP_विजेट  कक्षा गतिशील विजेट बनाने के लिए। डायनामिक वर्डप्रेस विजेट बनाने के लिए हमें अपनी आवश्यकता के अनुसार अधिक फ़ंक्शन जोड़कर इस वर्ग का विस्तार करना होगा। निम्नलिखित चार बुनियादी कार्य हैं जिन्हें हम जोड़ सकते हैं   WP_विजेट   वर्ग.

• कंस्ट्रक्टर फ़ंक्शन।
• विजेट सामग्री प्रदर्शित करने के लिए हम बनाते हैं  विजेट समारोह.
• विजेट की सेटिंग को अपडेट करने के लिए हम इसका उपयोग करते हैं  अपडेट समारोह.
• उपयोगकर्ताओं से जानकारी एकत्र करने के लिए हम इसका उपयोग करते हैं  प्रपत्र समारोह.

गतिशील विजेट में, हम इन चार विजेट कार्यों में से कुछ का उपयोग करेंगे। उसके बाद, हम अपने विजेट का उपयोग करके पंजीकृत करेंगे  रजिस्टर_विजेट। 

 

भाग 2: आइए वर्डप्रेस के लिए एक गतिशील विजेट बनाएं

वर्डप्रेस के लिए डायनामिक विजेट बनाना एक लंबी प्रक्रिया है। यदि आप इसे पहली बार कर रहे हैं तो शायद यह एक जटिल चीज़ की तरह लगे लेकिन हमने इसे आपके लिए सरल बना दिया है।

हमने पूरी प्रक्रिया को चार सरल चरणों में विभाजित किया है। वर्डप्रेस के लिए डायनामिक विजेट बनाने के लिए इन चार सरल चरणों का पालन करें।

 

चरण 1: एक खाली प्लगइन बनाएँ

पहला कदम हमारे वर्डप्रेस विजेट के लिए एक खाली प्लगइन बनाना है, यह कदम सरल और आसान है। यदि आपने कभी प्लगइन्स या विजेट बनाए हैं तो आपने इसे पहले देखा होगा।

हम एक प्लगइन बना रहे हैं क्योंकि हम इस प्लगइन में एक विजेट जोड़ेंगे और फिर उस प्लगइन को अपनी वर्डप्रेस साइट पर जोड़ेंगे।

ऐसा करने के लिए आपको जाना होगा  /wp-सामग्री/प्लगइन्स/. अपनी वर्डप्रेस साइट के लिए उस प्लगइन को बनाते समय, आपको एक नई निर्देशिका जोड़नी होगी और फिर उसी के अनुसार नाम देना होगा।

आप इसे कुछ भी नाम दे सकते हैं जो आप चाहते हैं। अपनी निर्देशिका में, आपको बनाना होगा   Index.php.   इस अनुक्रमणिका फ़ाइल में निम्न नमूना कोड होगा।

खाली प्लगइन में उपरोक्त सभी विवरण वर्डप्रेस द्वारा एडमिन पैनल में आपके प्लगइन का विवरण दिखाने के लिए उपयोग किया जाएगा। खाली प्लगइन बनाने के लिए इस कोड को जोड़ने के बाद। आप इसे अपने वर्डप्रेस एडमिन पैनल में देखेंगे। अब आपको इस प्लगइन को एक्टिवेट करना है।

 

चरण 2: एक नमूना विजेट कोड बनाएँ

दूसरा चरण नमूना विजेट कोड बनाना है। हम उपयोगिता को बढ़ाने के लिए चार बुनियादी कार्यों का उपयोग करेंगे  WP_विजेट  वर्ग.

class example_Widget WP_Widget { public function __construct() { } public function Widget( $args, $instance ) { // नमूना विजेट बनाएं } } // विजेट फ़ंक्शन register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action ('widgets_init', 'register_sample_widget');

उपरोक्त कोड अनुभाग में, आप इसे देख सकते हैं  WP_विजेट निर्माण समारोह के उपयोग के साथ बढ़ाया गया है। और ब्लॉक के अंतिम भाग में, आप देख सकते हैं कि हमने अपने नमूना विजेट को कैसे पंजीकृत किया है  रजिस्टर_विजेट। 

नमूना विजेट बनाने और पंजीकृत करने के बाद, हमें इसमें गतिशील कार्यों को जोड़ना होगा। हम इसका उपयोग कर सकते हैं  विजेट,  फार्म, और  अपडेट हमारी आवश्यकता के अनुसार इसके लिए कार्य करता है।

बोनस टिप: स्टाइल विवरण जोड़ने के लिए आप CSS का उपयोग कर सकते हैं  कक्षा।   इसे HTML DOM में जोड़ा जा सकता है और यह संपूर्ण विजेट के प्रदर्शन को शैलीबद्ध करेगा। 

 

चरण 3: पेज में विजेट जोड़ें

आपके द्वारा कोडिंग भाग के साथ किए जाने के बाद। आप अपने पेज पर विजेट जोड़ सकते हैं। याद रखें कि हमने अभी तक अपने विजेट में कोई गतिशील जानकारी या डेटा स्रोत नहीं जोड़ा है।

इसे गतिशील बनाने के लिए हमें एक गतिशील सूचना स्रोत जोड़ना होगा। हम इसे अगले चरण में करेंगे। अभी के लिए, हम इस नए बनाए गए अनुकूलित विजेट को वर्डप्रेस साइट पेज पर जोड़ देंगे।

इसे पेज में जोड़ने के लिए आपको वर्डप्रेस एडमिन पैनल पर वापस आना होगा। वहां पर आपको जाना होगा उपस्थिति साइडबार में विकल्प। के लिए जाओ सूरत> विजेट।

यहां आप अपना विजेट पेज पर कहीं भी जोड़ सकते हैं जैसे हेडर, फुटर, साइडबार आदि।

 

चरण 4: विजेट में डायनेमिक डेटा जोड़ें

अब आधी से ज्यादा प्रक्रिया पूरी हो चुकी है। अपने विजेट में गतिशील डेटा जोड़ने का समय आ गया है। आप किसी भी स्रोत से डायनेमिक डेटा प्राप्त कर सकते हैं।

उदाहरण के लिए, यदि आप दुनिया के लाइव COVID-19 मामलों को दिखाने के लिए एक विजेट बना रहे हैं, तो आपको WHO या मीडिया साइट जैसी वेबसाइट से डेटा लेना होगा।

जानकारी का URL प्राप्त करें और जोड़ें  एपीआई कुंजी इसे। अब का उपयोग कर रहा हूँ विजेट "GET" निर्देश के साथ आप COVID-19 (उदाहरण के अनुसार) का लाइव विवरण प्राप्त कर सकते हैं।  

एपीआई कुंजी "जीईटी" अनुरोध के साथ आपके विजेट में डेटा या जानकारी प्राप्त करेगा और प्रदर्शित करेगा। अपने विजेट में डेटा अपडेट करने के लिए JSON स्ट्रिंग्स और वेरिएबल्स की मदद लें।

 

चरण 5: प्लगइन अपलोड करना

सभी आवश्यक कोड जोड़ने के बाद आप अपने विजेट का पूर्वावलोकन कर सकते हैं।

अब अंतिम चरण प्लगइन को अपने वर्डप्रेस एडमिन पैनल में अपलोड करना है। इसके लिए आपको प्लगइन को एक ज़िप फ़ाइल में पैक करना होगा। अब जाओ प्लगइन्स > नया जोड़ें > प्लगइन अपलोड करें और अपना प्लगइन अपलोड करें।

 

भाग 3: एक ही स्थान पर तत्व, प्लगइन्स, विजेट प्राप्त करें

प्लगइन्स, विजेट्स और तत्वों को बनाना और जोड़ना कठिन लगता है? चिंता न करें, अच्छी खबर यह है कि आजकल आपको मैन्युअल रूप से कुछ भी करने की आवश्यकता नहीं है।

कई हैं वर्डप्रेस विषयों, प्लगइन्स और विजेट उपलब्ध हैं। आपकी अधिकांश आवश्यकताओं को इन रेडीमेड सह अनुकूलन योग्य विगेट्स के साथ पूरा किया जा सकता है। निम्नलिखित सबसे अच्छा विकल्प उपलब्ध है।

 

Deep WordPress थीम

RSI Deep WordPress विषय द वेबनस द्वारा प्रदान किया गया प्रीमियम वर्डप्रेस थीम, एलिमेंट्स, प्लगइन्स आदि प्राप्त करने के लिए सबसे अच्छे विकल्पों में से एक है। आप इन सभी चीजों का उपयोग अपनी वर्डप्रेस वेबसाइट पर किसी भी गतिशील विजेट को रखने के लिए कर सकते हैं। निम्नलिखित कुछ बेहतरीन विशेषताएं हैं जो आपको केवल इसके साथ मिलेंगी deep वेबनस द्वारा वर्डप्रेस थीम।

 

तेज़ी बढ़ाने वाला

आपके पृष्ठों पर अतिरिक्त कोड आपके पृष्ठ लोड होने की गति को प्रभावित करते हैं। लेकिन इस थीम के साथ लोड करने के लिए कोई अतिरिक्त कोड नहीं है। जिससे आपके पेज तेजी से लोड होते हैं। CSS और JS तत्वों को पेज के सोर्स कोड में लोड किया जाता है। तो यह कम कोड के साथ लोड को आसान बनाता है।

 

सुपर रिस्पांस

आपको अपने वेबपृष्ठों पर बेहतर उपयोगकर्ता अनुभव प्राप्त होगा। उन्नत यूएक्स आपकी साइट के आगंतुकों को एक सुपर प्रतिक्रिया सुविधा प्रदान करने में आपकी सहायता करेगा।

 

प्रयोग करने में आसान

Deep थीम आयातक उपयोग करने में बहुत आसान और त्वरित है। जो आपकी वर्डप्रेस वेबसाइट पर थीम इम्पोर्ट करते समय बहुत ही आरामदायक और सुविधाजनक तरीके से काम करने में आपकी मदद करता है।

 

वास्तविक मूल्य निर्धारण

के इस्तेमाल से काफी बचत होगी deep वेबनस द्वारा वर्डप्रेस थीम। सभी थीम, प्लगइन्स वास्तविक मूल्य पर उपलब्ध हैं।

 

आइए संक्षेप करें!

इस पोस्ट में हमने सीखा कि Dynamic WordPress Widget क्या होता है और इसे कैसे बनाया जाता है।

डेटा जोड़ने से लेकर बेसिक विजेट बनाने तक, हमने पूरी प्रक्रिया के हर पहलू को कवर किया है। यदि आप इस पोस्ट में बताए गए चरणों का पालन करते हैं तो आप आसानी से एक डायनामिक वर्डप्रेस विजेट बना सकते हैं।

साथ ही, हमने सीखा है कि आप वेबनस द्वारा रेडी-मेड प्लगइन्स, विजेट्स, एलिमेंट्स आदि प्राप्त कर सकते हैं। आप का उपयोग करते समय अपना समय और पैसा दोनों बचाएंगे deep वेबनस द्वारा वर्डप्रेस थीम।