शॉर्टकट के साथ वर्डप्रेस में शॉर्टकोड यूज़र इंटरफेस कैसे जोड़ें

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

शॉर्टकट क्या है?

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

उदाहरण के लिए, एक विशिष्ट वर्डप्रेस विषयवस्तु में अगर कोई बटन दर्ज करने के लिए एक शोर्ट कोड होता है, तो उपयोगकर्ता को कम से कम दो से पांच पैरामीटर जोड़ना होगा इस कदर:

[थीमबटन यूआरएल = “http://example.com” शीर्षक = “अब डाउनलोड करें” रंग = “बैंगनी” लक्ष्य = “न्यूविंडो”]

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

शुरू करना

यह ट्यूटोरियल उन प्रयोक्ताओं के लिए है, जो वर्डप्रेस के विकास के लिए नए हैं। शुरुआती स्तर के उपयोगकर्ता जो अपने वर्डप्रेस विषयों को ज़ूम करना चाहते हैं, वे भी इस ट्यूटोरियल को उपयोगी पाते हैं।

ऐसा करने के बाद, चलो शुरू करें

आपको सबसे पहले जो शॉर्टकेक (शॉर्टकोड यूआई) प्लगइन को स्थापित और सक्रिय करने की ज़रूरत है

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

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

add_shortcode ('cta- बटन', 'cta_button_shortcode');

 फ़ंक्शन cta_button_shortcode ($ एटीटी) {
        निकालें (शॉर्टकोड_टेट्स (
                सरणी (
                        'शीर्षक' => 'शीर्षक',
                        'url' => ''
                ),
                $ Atts
        ));
        वापसी ' '  $ शीर्षक  ' ';
 } 

आपको अपने सीएसएस को स्टाइल करने के लिए कुछ सीएसएस भी जोड़ना होगा। आप अपने सीएसएस के अपने स्टाइलशीट में इस सीएसएस का उपयोग कर सकते हैं।

.cta- बटन {
 पैडिंग: 10 पीएक्स;
 फ़ॉन्ट-आकार: 18px;
 सीमा: 1 पीएक्स ठोस # एफएफएफ;
 सीमा-त्रिज्या: 7px;
 रंग: # एफएफएफ;
 पृष्ठभूमि रंग: # 50 ए 7ईसी;
 } 

यह कैसे एक उपयोगकर्ता अपनी पोस्ट और पृष्ठों में शोर्ट का उपयोग करेगा:

[सीटीए-बटन शीर्षक = "अब डाउनलोड करें" url = "http://example.com"]

अब जब हमारे पास एक शोर्ट कोड है जो पैरामीटर स्वीकार करता है, तो इसके लिए एक UI बनाएं

शॉर्टकट के साथ अपना शोर्ट यूज़र इंटरफेस पंजीकृत करना

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

यहां एक नमूना कोड स्निपेट है जिसे हम अपने शोर्टकोड के यूआई रजिस्टर करने के लिए उपयोग करेंगे। हमने इनलाइन टिप्पणियों के साथ प्रत्येक चरण की व्याख्या करने का प्रयास किया है। आप इसे अपने विषय की फ़ंक्शंस फ़ाइल में या साइट-विशिष्ट प्लग इन में पेस्ट कर सकते हैं।

shortcode_ui_register_for_shortcode (

 / ** आपका शोर्ट संभाल * /
 'सीटीए बटन',

 / ** आपका शोर्ट लेबल और आइकन * /
 सरणी (

 / ** अपने शोर्ट उपयोगकर्ता इंटरफ़ेस के लिए लेबल।  इस भाग की आवश्यकता है  * /
 'लेबल' => 'बटन जोड़ें',

 / ** चिह्न या शोर्ट के लिए कोई छवि अनुलग्नक  वैकल्पिक।  src या डैशिकॉन- $ आइकन  * /
 'listItemImage' => 'डैशिकॉन-लाइटबुल',

 / ** शोर्ट एट्रिब्यूट्स * /
 'attrs' => सरणी (

 / **
 * प्रत्येक विशेषता जो उपयोगकर्ता इनपुट को स्वीकार करती है, उसकी इस तरह परिभाषित अपनी खुद की सरणी होगी
 * हमारा शॉोर्ट दो पैरामीटर या गुण, शीर्षक और URL स्वीकार करता है
 * पहले शीर्षक फ़ील्ड के लिए यूआई को परिभाषित करता है।
 * /

 सरणी (

 / ** यह लेबल उपयोगकर्ता इंटरफ़ेस में दिखाई देगा / /
 'लेबल' => 'शीर्षक',

 / ** यह शॉर्टकोड के लिए उपयोग किए गए कोड में प्रयुक्त वास्तविक एआरआर है * /
 'attr' => 'शीर्षक',

 / ** इनपुट प्रकार को परिभाषित करें  समर्थित प्रकार पाठ, चेकबॉक्स, टेक्स्टरेआ, रेडियो, चयन, ईमेल, यूआरएल, संख्या, और दिनांक हैं।  * /
 'प्रकार' => 'पाठ',

 / ** उपयोगकर्ताओं के लिए उपयोगी विवरण जोड़ें
 'विवरण' => 'कृपया बटन पाठ दर्ज करें',
 ),

 / ** अब हम यूआरएल फ़ील्ड के लिए यूआई को परिभाषित करेंगे * /

 सरणी (
 'लेबल' => 'यूआरएल',
 'एट्रर' => 'यूआरएल',
 'प्रकार' => 'पाठ',
 'विवरण' => 'पूर्ण यूआरएल',
 ),
 ),
 ),

 / ** आप चुन सकते हैं कि कौन सा पोस्ट प्रकार शॉर्टकोड UI * /
 'post_type' => सरणी ('पोस्ट', 'पृष्ठ'),
 )
 ); 

यह सब है, अब आप एक पोस्ट संपादित करके कार्रवाई में शॉर्टकोड उपयोगकर्ता इंटरफ़ेस देख सकते हैं। बस एक पोस्ट संपादक के ऊपर जोड़ें मीडिया बटन पर क्लिक करें। यह मीडिया अपलोडर को लाना होगा जहां आप बाएं हाथ कॉलम में एक नया आइटम ‘डालें पोस्ट तत्व’ देखेंगे। उस पर क्लिक करने से आपको अपना कोड सम्मिलित करने के लिए एक बटन दिखाई देगा।

लाइटबल्ब आइकन वाले थंबनेल पर क्लिक करना और आपका शॉर्टकट लेबल आपको शॉर्टकोड UI दिखाएगा

एकाधिक इनपुट के साथ शोर्ट जोड़ना

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

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

add_shortcode ('mybutton', 'my_button_shortcode');

 फ़ंक्शन my_button_shortcode ($ atts) {
        निकालें (शॉर्टकोड_टेट्स (
                सरणी (
                        'रंग' => 'नीला',
                        'शीर्षक' => 'शीर्षक',
                        'url' => ''
                ),
                $ Atts
        ));
        वापसी ' '  $ शीर्षक  ' ';
 } 

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

.mybutton {
     पैडिंग: 10 पीएक्स;
     फ़ॉन्ट-आकार: 18px;
     सीमा: 1 पीएक्स ठोस # एफएफएफ;
     सीमा-त्रिज्या: 7px;
     रंग: # एफएफएफ;
 }

 .blue-button {
     पृष्ठभूमि रंग: # 50 ए 7ईसी;
 }
 । ऑरेंज-बटन {
 पृष्ठभूमि का रंग: # FF7B00;
 }

 .green-button {
 पृष्ठभूमि का रंग: # 29B577;
 } 

यह कैसे बटन जैसा दिखेंगे:

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

shortcode_ui_register_for_shortcode (

 / ** आपका शोर्ट संभाल * /
 'Mybutton',

 / ** आपका शोर्ट लेबल और आइकन * /
 सरणी (

 / ** अपने शोर्ट उपयोगकर्ता इंटरफ़ेस के लिए लेबल।  इस भाग की आवश्यकता है  * /
 'label' => 'एक रंगीन बटन जोड़ें',

 / ** चिह्न या शोर्ट के लिए कोई छवि अनुलग्नक  वैकल्पिक।  src या डैशिकॉन- $ आइकन  * /
 'listItemImage' => 'डैशिकॉन-फ्लैग',

 / ** शोर्ट एट्रिब्यूट्स * /
 'attrs' => सरणी (

 / **
 * प्रत्येक विशेषता जो उपयोगकर्ता इनपुट को स्वीकार करती है, उसकी इस तरह परिभाषित अपनी खुद की सरणी होगी
 * हमारा शॉोर्ट दो पैरामीटर या गुण, शीर्षक और URL स्वीकार करता है
 * पहले शीर्षक फ़ील्ड के लिए यूआई को परिभाषित करता है।
 * /

 सरणी (

 / ** यह लेबल उपयोगकर्ता इंटरफ़ेस में दिखाई देगा / /
 'लेबल' => 'शीर्षक',

 / ** यह शॉर्टकोड के लिए उपयोग किए गए कोड में प्रयुक्त वास्तविक एआरआर है * /
 'attr' => 'शीर्षक',

 / ** इनपुट प्रकार को परिभाषित करें  समर्थित प्रकार पाठ, चेकबॉक्स, टेक्स्टरेआ, रेडियो, चयन, ईमेल, यूआरएल, संख्या, और दिनांक हैं।  * /
 'प्रकार' => 'पाठ',

 / ** उपयोगकर्ताओं के लिए उपयोगी विवरण जोड़ें * /
 'विवरण' => 'कृपया बटन पाठ दर्ज करें',
 ),

 / ** अब हम यूआरएल फ़ील्ड के लिए यूआई को परिभाषित करेंगे * /

 सरणी (
 'लेबल' => 'यूआरएल',
 'एट्रर' => 'यूआरएल',
 'प्रकार' => 'पाठ',
 'विवरण' => 'पूर्ण यूआरएल',
 ),

 / ** अंत में हम रंग चयन के लिए UI परिभाषित करेंगे * /
 सरणी (
 'लेबल' => 'रंग',
 'attr' => 'रंग',

 / ** हम टेक्स्ट के बजाय चयन फ़ील्ड का उपयोग करेंगे * /
 'type' => 'चुनें',
     'options' => सरणी (
         'नीला' => 'ब्लू',
         'नारंगी' => 'ऑरेंज',
         'हरा' => 'ग्रीन',
     ),
 ),

 ),

 / ** आप चुन सकते हैं कि कौन सा पोस्ट प्रकार शॉर्टकोड UI * /
 'post_type' => सरणी ('पोस्ट', 'पृष्ठ'),
 )
 ); 

यह सब है, अब आप एक पोस्ट या पृष्ठ संपादित कर सकते हैं और जोड़ें मीडिया बटन पर क्लिक कर सकते हैं। आप ‘पोस्ट तत्वों सम्मिलित करें’ के तहत अपने नए जोड़े गए शोर्ट को देखेंगे।

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

आप प्लगइन के रूप में इस ट्यूटोरियल में उपयोग किए गए कोड को डाउनलोड कर सकते हैं।

WPB-छोटा केक-ट्यूटोरियल

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