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

क्या आप अपना खुद का कस्टम वर्डप्रेस विजेट बनाना चाहते हैं? विजेट आपको साइडबार या अपनी वेबसाइट के किसी भी विजेट-तैयार क्षेत्र में गैर-सामग्री आइटम जोड़ने की अनुमति देते हैं।

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

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

ध्यान दें: यह ट्यूटोरियल वर्डप्रेस DIY उपयोगकर्ताओं के लिए है जो वर्डप्रेस विकास और कोडिंग सीख रहे हैं।

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

वर्डप्रेस विगेट्स में कोड के स्निपेट होते हैं जिन्हें आप अपनी वेबसाइट के साइडबार या विजेट-रेडी क्षेत्रों में जोड़ सकते हैं।

उन्हें एक मॉड्यूल के रूप में सोचें जिसे आप एक सरल ड्रैग और ड्रॉप इंटरफ़ेस का उपयोग करके विभिन्न तत्वों को जोड़ने के लिए उपयोग कर सकते हैं।

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

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

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

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

इसके साथ ही कहा, आइए देखें कि कैसे आसानी से अपने स्वयं के कस्टम वर्डप्रेस विजेट बनाएं।

वीडियो ट्यूटोरियल

WPBeginner की सदस्यता लें

यदि आप लिखित निर्देश पसंद करते हैं, तो पढ़ना जारी रखें।

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

यदि आप वर्डप्रेस कोडिंग सीख रहे हैं, तो आपको स्थानीय विकास वातावरण की आवश्यकता होगी। आप अपने कंप्यूटर (मैक या विंडोज) पर वर्डप्रेस इंस्टॉल कर सकते हैं।

अपने कस्टम वर्डप्रेस विजेट कोड को जोड़ने के कई तरीके हैं।

आदर्श रूप से, आप एक साइट-विशिष्ट प्लगइन बना सकते हैं और वहां अपना विजेट कोड पेस्ट कर सकते हैं।

आप अपने थीम के फंक्शन्स.php फ़ाइल में कोड भी पेस्ट कर सकते हैं। हालाँकि, यह केवल तभी उपलब्ध होगा जब वह विशेष विषय सक्रिय हो।

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

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

चलिए शुरू करते हैं।

एक मूल वर्डप्रेस विजेट बनाएँ

वर्डप्रेस एक अंतर्निहित वर्डप्रेस विजेट वर्ग के साथ आता है। प्रत्येक नया वर्डप्रेस विजेट वर्डप्रेस विजेट क्लास का विस्तार करता है।

वर्डप्रेस डेवलपर मैनुअल में 18 विधियां उल्लिखित हैं जिनका उपयोग WP विजेट वर्ग के साथ किया जा सकता है।

हालाँकि, इस ट्यूटोरियल के लिए, हम निम्नलिखित विधियों पर ध्यान देंगे।

• __construct (): यह वह हिस्सा है जहां हम विजेट आईडी, शीर्षक और विवरण बनाते हैं।
• विजेट: यह वह जगह है जहाँ हम विजेट द्वारा उत्पन्न परिणाम को परिभाषित करते हैं।
• फॉर्म: कोड का यह हिस्सा वह है जहां हम बैकएंड के लिए विजेट विकल्पों के साथ फॉर्म बनाते हैं।
• अद्यतन: यह वह हिस्सा है जहाँ हम डेटाबेस में विजेट विकल्प सहेजते हैं।

आइए निम्नलिखित कोड का अध्ययन करें जहां हमने WP_Widget वर्ग के भीतर इन चार विधियों का उपयोग किया है।

// Creating the widget 
class wpb_widget extends WP_Widget {

// The construct part  
function __construct() {

}
 
// Creating widget front-end
public function widget( $args, $instance ) {

}
         
// Creating widget Backend 
public function form( $instance ) {

}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {

}

// Class wpb_widget ends here
} 

कोड का अंतिम भाग वह है जहां हम वास्तव में विजेट को पंजीकृत करेंगे और इसे वर्डप्रेस में लोड करेंगे।

function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

अब, एक मूल वर्डप्रेस विजेट बनाने के लिए यह सब एक साथ रखें।

आप निम्न कोड को अपने कस्टम प्लगइन या थीम के फंक्शन्स.php फ़ाइल में कॉपी और पेस्ट कर सकते हैं।

// विजेट बनाना
वर्ग wpb_widget का विस्तार WP_Widget {
 
फ़ंक्शन __construct () {
जनक :: __ निर्माण (
 
// अपने विजेट का आधार आईडी
'Wpb_widget',
 
// UI में विजेट नाम दिखाई देगा
__ ('WPBeginner विजेट', 'wpb_widget_domain'),
 
// विजेट विवरण
सरणी ('विवरण' => __ ('WPBeginner ट्यूटोरियल पर आधारित नमूना विजेट', 'wpb_widget_domain'),)
);
}
 
// फ्रंट-एंड विजेट बनाना
 
सार्वजनिक समारोह विजेट ($ args, $ उदाहरण) {
$ शीर्षक = apply_filters ('widget_title', $ उदाहरण ('शीर्षक'));
 
// पहले और बाद में विजेट तर्कों को विषयों द्वारा परिभाषित किया गया है
इको $ args ('पहले_गेट');
यदि (खाली ($ शीर्षक))
इको $ args ('पहले_तितल')। $ शीर्षक। $ args ('after_title');
 
// यह वह जगह है जहां आप कोड चलाते हैं और आउटपुट प्रदर्शित करते हैं
इको __ ('हैलो, वर्ल्ड!', 'wpb_widget_domain');
इको $ args ('after_widget');
}
         
// बैकएंड विजेट
सार्वजनिक समारोह फॉर्म ($ उदाहरण) {
अगर (isset ($ उदाहरण ('शीर्षक'))) {
$ शीर्षक = $ उदाहरण ('शीर्षक');
}
अन्य {
$ शीर्षक = __ ('नया शीर्षक', 'wpb_widget_domain');
}
// व्यवस्थापक प्रपत्र विजेट
?>








	



	



	



	



कोड जोड़ने के बाद, आपको जाना चाहिए सूरत »विजेट पृष्ठ। उपलब्ध विगेट्स की सूची में आप नए WPBeginner विजेट को देखेंगे। आपको इस विजेट को साइडबार पर ड्रैग और ड्रॉप करना होगा। 

इस विजेट में भरने के लिए केवल एक फॉर्म फ़ील्ड है, आप अपने पाठ को जोड़ सकते हैं और अपने परिवर्तनों को संग्रहीत करने के लिए सहेजें बटन पर क्लिक कर सकते हैं। 






	



	



	



	



अब आप कार्रवाई में देखने के लिए उनकी वेबसाइट पर जा सकते हैं। 

अब फिर से कोड का अध्ययन करते हैं। 






	



	



	



	



हम पहले "wpb_widget" रजिस्टर करते हैं और अपने कस्टम विजेट को लोड करते हैं। उसके बाद हम परिभाषित करते हैं कि विजेट क्या करता है और विजेट बैकएंड को कैसे प्रदर्शित किया जाए।  
अंत में, हम परिभाषित करते हैं कि विजेट में किए गए परिवर्तनों को कैसे संभालना है। 
अब कुछ चीजें हैं जो आप पूछना चाहते हैं। उदाहरण के लिए, wpb_text_domain क्या है?






	



	



	



	



वर्डप्रेस अनुवाद और स्थानीयकरण को संभालने के लिए गेटटेक्स्ट का उपयोग करता है। यह wpb_text_domain और __e gettext को अनुवाद के लिए एक स्ट्रिंग उपलब्ध कराने के लिए कहता है। देखें कि आप कैसे अनुवाद-तैयार वर्डप्रेस थीम पा सकते हैं। 
यदि आप अपने विषय के लिए एक कस्टम विजेट बना रहे हैं, तो आप अपने विषय के टेक्स्ट डोमेन के साथ wpb_text_domain को बदल सकते हैं। 
हमें उम्मीद है कि इस लेख से आपको यह सीखने में मदद मिली होगी कि आसानी से एक कस्टम वर्डप्रेस विजेट कैसे बनाया जा सकता है। आप हमारी साइट के लिए सबसे उपयोगी वर्डप्रेस विजेट की हमारी सूची भी देख सकते हैं। 






	



	



	



	



अगर आपको यह लेख पसंद आया है, तो हमारे यूट्यूब चैनल को सब्सक्राइब करें। आप हमें भी देख सकते हैं Twitter तथा Facebook।