Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

एक वर्डप्रेस-संचालित फ़्रंट-एंड बनाना: पोस्ट, कैटेगरी, और यूज़र कंट्रोलर्स 

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: A Custom Directive for Post Listing

Hindi (हिंदी) translation by Shubham Sharma (you can also view the original English article)

सीरीज़ के पिछले हिस्से में, हमने फ्रन्ट-एन्ड पर पोस्ट की लिस्टिंग के लिए के लिए कस्टम निर्देश बनाया। यह निर्देश एचटीएमएल विशेषता (ऐट्रब्यूट) में और साथ ही यूआरएल में सर्वर से पोस्ट प्राप्त करने के लिए तर्कों को सीधे लेता है।  डीरेक्टिव के निर्माण ने हमें हमारे ऐप्लकेशन में कहीं भी पोस्ट सूची की सुविधा दिखाने की अनुमति दी है, डीरेक्टिव द्वारा प्रदान किए गए व्यापारिक तर्क और रेंडरिंग तर्क का पुनः उपयोग करके।

श्रृंखला के इस समापन भाग में, हम अपने ऐप्लकेशन के शेष हिस्से पर काम करेंगे और पोस्ट लिस्टिंग, एकल पोस्ट, लेखक, और श्रेणी पृष्ठ के लिए नियंत्रकों (कन्ट्रोलर) का निर्माण करेंगे। हम इन नियंत्रकों के टेम्पलेट्स पर भी काम करेंगे और नियंत्रकों (कन्ट्रोलर) द्वारा प्रदान किए गए डेटा को प्रदर्शित करेंगे। 

विशिष्ट होने के लिए, श्रृंखला के वर्तमान भाग में, हम: 

  • अपने आप को अंगुलर-जेएस (AngularJS) नियंत्रक (कन्ट्रोलर) का परिचय देंगे 
  • पदों, श्रेणियों और उपयोगकर्ताओं के लिए कन्ट्रोलर का निर्माण 
  • कन्ट्रोलर द्वारा प्रदान किए गए डेटा से टेम्पलेट को लिंक करना 

तो आइए हम खुद को ऐंग्यलर जेएस (AngularJS) कन्ट्रोलर के परिचय करने से शुरू करें। 

ऐंग्यलर-जेएस (AngularJS) कन्ट्रोलर का परिचय 

ऐंग्यलर जेएस (AngularJS) में कन्ट्रोलर ऐप्लकेशन के मुख्य निर्माण ब्लॉकों में से एक हैं। वे बिज़्नस तर्क रखते हैं जो यह निर्धारित करता है कि उपयोगकर्ता को किस डेटा को प्रदर्शित किया जा सकता है।  वे एप्लिकेशन के सबसे अधिक यूआई-संबंधी कार्यक्षमता को ड्राइव करते हैं और उपयोगकर्ता इंटरैक्शन के लिए समर्थन भी प्रदान करते हैं। 

कन्ट्रोलर कसकर डीओएम (DOM) से जुड़ा हुआ है और वे ऐप्लकेशन के मॉडल को चिपकाते हैं- जहां डेटा रहता है- एप्लिकेशन दृश्य (व्यू) से। 

हमारे मामले में, जिसमें हम डब्ल्यू.पी. रेस्ट एपीआई (WP REST API) द्वारा संचालित ऐप्लकेशन का निर्माण कर रहे हैं, कन्ट्रोलर वह हैं जहां हम एपीआई (API) के माध्यम से प्राप्त आंकड़ों को दिखाते हैं और अंत उपयोगकर्ता को विभिन्न सेवाएं देते हैं। 

पोस्ट लिस्टिंग व्यू (दृश्य) के लिए एक नियंत्रक (कन्ट्रोलर) का निर्माण 

ऐंग्यलर जेएस (AngularJS) के कन्ट्रोलर को मॉड्यूल में परिभाषित किया जाता है, और हम डिपेन्डन्सी इंजेक्शन की सुरक्षित शैली (स्टाइल) का एक ही अंकन (नोटेशन) का उपयोग करेंगे, जैसा कि हमने कस्टम निर्देश जारी करने के लिए किया था। निम्न कोड पर विचार करें, जिसमें हम पोस्ट सूची पृष्ठ के लिए नियंत्रक (कन्ट्रोलर) की घोषणा कर रहे हैं:

नियंत्रकों (कन्ट्रोलर) को मॉड्यूल .controller() विधि का उपयोग कर के परिभाषित किया गया है जो मॉड्यूल में उपलब्ध है। हम ऊपर परिभाषित नियंत्रक का नाम PostListing रखते है। 

कन्ट्रोलर कन्स्ट्रक्टर फ़ंक्शन के अंदर किसी भी डेटा को बाहरी दुनिया में बेनकाब करने के लिये this कीवर्ड पर सेट करने की आवश्यकता है। इसलिए हम this कीवर्ड को कैश करते हैं, एक self वेरीअबल (चर) बनाकर। 

पोस्ट लिस्टिंग के नियंत्रक उन सभी नियंत्रकों में सरलतम है जो हम बनाएंगे, अर्थात् इसमें किसी भी डेटा की आवश्यकता नहीं होती है। इसके लिए सिर्फ एक टेम्पलेट लिंक होना चाहिए, और हम उस टेम्पलेट में <post-listing></post-listing> डीरेक्टिव को रख देंगे, पोस्ट लिस्टिंग शुरू करने के लिए। यह डीरेक्टिव Posts सर्विस (सेवा) का उपयोग करके स्वयं के लिये पोस्ट को प्राप्त करेगा और अपने स्वयं के रेंडरिंग तर्क का उपयोग करके उन्हें सूचीबद्ध करेगा।  

तो पहले चरण के रूप में, हम PostListing नियंत्रक (कन्ट्रोलर) को views/listing.html टेम्पलेट से लिंक करेंगे, और हम अपने ऐप्लकेशन के .config() अनुभाग में ऐसा करेंगे। .config() खंड वह है जहां हमने ऐप्लकेशन के लिए राउट कॉन्फ़िगर किया है, और हमें निम्न में /wp/v2/post राउट को संशोधित करने की आवश्यकता है: 

उपरोक्त कोड में, हमने राउट परिभाषा में दो अतिरिक्त गुण दिए, और ये गुण हैं: 

  1. controller: कन्ट्रोलर का नाम जिसे हम इस राउट और इसके टेम्पलेट से लिंक करने की आवश्यकता है।
  2. controllerAs: वह कीवर्ड जिसके द्वारा हम अपने टेम्पलेट में कन्ट्रोलर को संदर्भित करते हैं। 

इसलिए हमने PostListing को कन्ट्रोलर नाम के रूप में पारित किया, और हम इसे postListing कुंजीशब्द का उपयोग करते हुए टेम्पलेट में संदर्भित करेंगे। 

राउट और टेम्पलेट के साथ कन्ट्रोलर से जुड़े होने के बाद, अब हमें पोस्ट को ठीक से सूचीबद्ध करने के लिए टेम्पलेट को संशोधित करने की आवश्यकता है। तो views/listing.html टेम्पलेट फ़ाइल को खोलें और निम्नलिखित कोड के साथ इसकी सामग्री बदलें: 

नीचे दिए गए टेम्पलेट का एक स्क्रीनशॉट है: 

Post listing view

और बस! कोड की उपरोक्त रेखा एंगुलर-जेएस (AngularJS) निर्देशों की शक्ति दर्शाती है। कोड की सिर्फ एक पंक्ति के साथ, हम पोस्ट लिस्टींग के लिए कार्यक्षमता की नकल करने में सफल रहे हैं जिसमें व्यापार तर्क भी शामिल है, साथ ही साथ रेन्डरिंग तर्क भी।   और हम आगे देखेंगे कि यह एंगुलर-जेएस (AngularJS) डीरेक्टिव कितना लचीला हो सकता है जब निम्नलिखित वर्गों में श्रेणी और यूजर लिस्टिग दृश्य (व्यू) के लिए नियंत्रकों (कन्ट्रोलर) का निर्माण किया जा सकता है। 

श्रेणी व्यू के लिए एक नियंत्रक (कन्ट्रोलर) का निर्माण 

खुद को कन्ट्रोलर घोषणा सिन्टैक्स के साथ परिचित होने और पोस्ट लिस्टिंग के लिए एक बहुत आसान कन्ट्रोलर बनाने के बाद, हम श्रेणियों के व्यू के लिए और अधिक उन्नत कन्ट्रोलर पर काम करना शुरू करने के लिए तैयार हैं। 

श्रेणियों को देखने वाले कन्ट्रोलर, यूआरएल (URL) में श्रेणी आईडी (कैटगोरी ID) का उपयोग करने के लिए $routeParam सेवा का उपयोग करेंगे, और उस आईडी (ID) का उपयोग करते हुए, कन्ट्रोलर श्रेणी की जानकारी लाने के लिए Categories सेवा का इस्तेमाल करेगा और इसके संबद्ध पदों की सूची का उपयोग करेगा।  हालांकि, नियंत्रक Posts सेवा का उपयोग कर सीधे पोस्ट को नहीं लाएगा, बल्कि यह postListing डीरेक्टिव का उपयोग करेगा और उस श्रेणी से जुड़े पोस्ट की सूची को प्राप्त करने के लिए कैटगॉरी आईडी पास करेगा। 

नीचे CategoryListing नियंत्रक के लिए कोड है:  

ऊपर CategoryListing कन्ट्रोलर के पास $routeParams सेवा और Categories कस्टम सेवा के लिए दो निर्भरताएं हैं। $routeParams सेवा का उपयोग करके, यह यूआरएल (URL) से श्रेणी के आईडी (ID) को पुनः प्राप्त करता है, और फिर यह Categories सेवा के माध्यम से श्रेणी की जानकारी के लिए उस आईडी का प्रयोग करता है। 

नियंत्रक (कन्ट्रोलर) के पास एक वेरीअबल परिभाषित किया गया है जिसे $scope ऑब्जेक्ट categoryInfo नाम दिया गया है। इस वेरीअबल में सर्वर द्वारा लौटाया गया श्रेणी ऑब्जेक्ट है, और क्वेरी सफल होने के बाद इसका मान सेट किया गया है। 

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

तो निम्न कोड को शामिल करने के लिए  /categories/:id  राउट को संशोधित करें: 

उपरोक्त कोड में, हम राउट को CategoryListing कंट्रोलर से लिंक करते हैं और उस categoryListing कीवर्ड को भी परिभाषित करते हैं जिसके माध्यम से हम टेम्पलेट में इसका उल्लेख करते हैं। 

अब views/category.html टेम्पलेट को संशोधित करने का समय है ताकि वह स्टैटिक HTML कोड दिखाने के बजाय डाइनैमिक रूप से डेटा प्रदर्शित कर सके। 

उपरोक्त कोड में, हमने {{categoryListing.categoryInfo.name}} के साथ हार्ड-कोड वाले श्रेणी नाम को बदल दिया है, जहां categoryListing  इस CategoryListing कन्ट्रोलर का एक उदाहरण है। categoryInfo वेरीअबल सर्वर द्वारा लौटाया हूआ कैटगोरी ऑब्जेक्ट रखता है, और इस ऑब्जेक्ट में श्रेणी के नाम के लिए name विशेषता शामिल है।

पोस्ट लिस्टिंग की सुविधा के लिए, हम postListing डीरेक्टिव का उपयोग करते हैं और इसे post-args एट्रिब्यूट के जरिए श्रेणी आईडी (ID) पास करते हैं।  इस उद्देश्य के लिए, हम WP REST API के /wp/v2/posts राउट द्वारा समर्थित filter[] सिन्टैक्स का उपयोग करते हैं। WP REST API के बारे में परिचयात्मक श्रृंखला के चौथे हिस्से में हम पहले से ही filter[] सिन्टैक्स से परिचित हैं।

नीचे पूर्ण श्रेणी दृश्य (व्यू) का एक स्क्रीनशॉट है: 

Category view

अब उपयोगकर्ताओं के लिए कन्ट्रोलर का काम करते हैं, जो श्रेणियों  के कन्ट्रोलर के समान है। 

यूज़र व्यू (उपयोगकर्ता दृश्य) के लिए एक कन्ट्रोलर का निर्माण  

उपयोगकर्ता दृश्य (यूज़र व्यू) के कन्ट्रोलर उसके श्रेणियों के समान ही है। कन्ट्रोलर को टेम्पलेट से लिंक करने के लिए हम रूटिंग कॉन्फ़िगरेशन को संशोधित करके शुरू करेंगे: 

यहां हम UserListing कन्ट्रोलर को राउट और इसके टेम्पलेट से लिंक करते हैं। कीवर्ड जिसके द्वारा हम कन्ट्रोलर उदाहरण का उल्लेख करते हैं, userListing है।

UserListing कन्ट्रोलर के लिए निम्नलिखित कोड है: 

UserListing कन्ट्रोलर निर्भरता के रूप में $routeParams और Users सेवाएं लेता है। $routeParams सेवा का उपयोग करते हुए, यह URL में उपयोगकर्ता आईडी (ID) तक पहुंचता है।  Users सेवा तब उपयोगकर्ता आईडी (यूज़र ID) का उपयोग करके उपयोगकर्ता ऑब्जेक्ट को लाने के लिए उपयोग की जाती है। userInfo वैरिएबल सर्वर द्वारा लौटाया हुआ यूज़र ऑब्जेक्ट रखता है। 

इस डेटा को उपयोगकर्ता को प्रस्तुत करने के लिए अब views/author.html टेम्पलेट को संशोधित करें। निम्न के साथ author.html फ़ाइल की सभी सामग्री को बदलें: 

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

उपयोगकर्ता द्वारा लिखित पोस्ट को सूचीबद्ध करने के लिए, हम postListing निर्देश (डीरेक्टिव) का उपयोग करते हैं और इसे उपयोगकर्ता आईडी author पैरामीटर के मान के रूप में पास करते हैं। निर्देश तो Posts सेवा का उपयोग करते हुए पोस्ट को प्राप्त करता है। 

पूरा व्यू ऐसा दिखना चाहिए: 

User view

चौथे और अंतिम कन्ट्रोलर जिस पर अब काम करने की आवश्यकता है, वह एक एकल पोस्ट सूची दृश्य के लिये है, और हम निम्न अनुभाग में ऐसा करते हैं। 

एकल पोस्ट व्यू के लिए एक कन्ट्रोलर का निर्माण 

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

उपर्युक्त कारणों के कारण, हम Posts सेवा को मैन्युअल रूप से एक एकल पोस्ट के लिए नियंत्रक में अपने स्लग पर आधारित पोस्ट प्राप्त करने के लिए उपयोग करेंगे। 

कन्ट्रोलर और टेम्पलेट को लिंक करने के लिए पहले एक ही पोस्ट रूट में एक त्वरित (क्विक) संशोधन करते है: 

इसलिए एक एकल पोस्ट के लिए कन्ट्रोलर का नाम SinglePost होगा। हम singlePost कीवर्ड का उपयोग इसे इसके टेम्पलेट में उल्लेख करने के लिए करेंगे।

नीचे कन्ट्रोलर घोषणा के लिए कोड है: 

उपरोक्त कोड में, हम पहले $routeParam सेवा का उपयोग करके पोस्ट स्लग पुनः प्राप्त करते हैं और फिर इसे कन्ट्रोलर के स्कोप पर self.postSlug  गुण में सहेजते हैं। इसके बाद हम डेटाबेस को क्वेरी करते हैं, पोस्ट स्लग को क्वेरी तर्क के रूप में प्रदान करके Posts सेवा का उपयोग कर के। लौटा हुआ डेटा एक अरै है जिसमें एक अकेला ऑब्जेक्ट होता है, और हम इस लौटे हुए डेटा का उपयोग करते हुए स्कोप पर self.post प्रापर्टी को सेट करते हैं। यह सरल है! 

अब टेम्पलेट के लिए, नीचे views/single.html फ़ाइल की सामग्री दी हूई है: 

उपरोक्त कोड बहुत सरल है क्योंकि हम पोस्ट ऑब्जेक्ट के विभिन्न गुणों को विभिन्न तत्वों से बाँधते हैं, जैसे हम पिछले कुछ हिस्सों में कर रहे थे। 

नीचे पूर्ण एकल पोस्ट व्यू का एक स्क्रीनशॉट है: 

Single post view

ऐप्लकेशन अब पूरा हो चुका है (अभी तक नहीं!) और पोस्ट लिस्टिंग, एकल पोस्ट, उपयोगकर्ता और श्रेणी पृष्ठों के लिए विचार प्रदान करता है। 

निष्कर्ष 

यहां हम हमारे चार भाग की श्रृंखला समाप्त करते हैं, जिसमें हमने WP REST API और AngularJS (एंगुलर जेएस) द्वारा संचालित फ्रंट-एंड बनाया है। हमने आवश्यकताओं का विश्लेषण करके और वायरफ्रेम की समीक्षा करके शुरू किया था।  फिर हमने एक साथी प्लगइन का निर्माण किया है जो मानक प्रतिक्रियाओं में कुछ अतिरिक्त फ़ील्ड प्रदान करता है जो हमारे फ्रंट-एंड में जरूरत होगी।

निम्नलिखित भागों में, हमने हमारे AngularJS (एंगुलर जेएस) एप्लिकेशन को बूटस्ट्रैप किया, अलग-अलग व्यू के लिए विच्छेदित टेम्पलेट और  एप्लिकेशन रूटिंग कॉन्फ़िगर किए। हमने पोस्ट लिस्टिविटी फीचर के लिए एक कस्टम AngularJS (एंगुलर जेएस) डायरेक्टिव भी बनाया है, जो पोस्टिंग लिस्टिंग के लिए कार्यक्षमता को हटा देता है और विभिन्न आवश्यकताओं के लिए पोस्टस का एक समूह पुनः प्राप्त करने के लिए एक लचीला तरीका प्रदान करता है।

श्रृंखला के अंतिम भाग में, हमने पोस्ट लिस्टिंग, एकल पोस्ट, श्रेणी, और उपयोगकर्ता के विचारों के लिए कन्ट्रोलरस का निर्माण किया और हमारे ऐप्लकेशन के .config () अनुभाग के माध्यम से उन्हें अपने संबंधित टेम्पलेट से लिंक किया। 

ऐप्लकेशन पूर्ण नहीं है और इसे कई तरह से सुधार किया जा सकता है। कुछ सुझाव नीचे सूचीबद्ध हैं: 

  • एकल पोस्ट व्यू पर टिप्पणी थ्रेड 
  • लेखक द्वारा कोई पोस्ट नहीं है का संदेश जब लेखक प्रोफाइल पेज पर उपयोगकर्ता द्वारा कोई पोस्ट नहीं होता है
  • पोस्ट लिस्टिंग पृष्ठों पर नम्बरड (संख्यांकित) पृष्ठांकन (पैजनैशन) 
  • AngularJS (एंगुलर जेएस) सिंगल पेज एप्लीकेशन के साथ बेहतर एसईओ (SEO) 

हम इन सुविधाओं पर भविष्य के ट्यूटोरियल में उन्हें बनाने का प्रयास करेंगे। लेकिन अभी के लिए, मैं ऐप्लकेशन के साथ चारों ओर खेलने के लिए और कुछ अद्भुत सुविधाओं के साथ विस्तार करने के लिए इसे यहाँ आपके ऊपर छोड़ रहा हूं। टिप्पणियों में ऐप्लकेशन के लिए एक ऑनलाइन डेमो प्रदान करना सुनिश्चित करें क्योंकि मैं अपने पाठकों से सीखने के लिए उत्सुक हूं। 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.