Advertisement
  1. Code
  2. WordPress

वर्डप्रेस में सक्रिय पेज टेम्पलेट, भाग 2

by
Read Time:12 minsLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 1
Dynamic Page Templates in WordPress, Part 3

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

इस ट्यूटोरियल श्रृंखला के भाग 1 में मैंने सक्रिय पृष्ठ टेम्पलेट्स की बुनियादी अवधारणा को प्रस्तुत किया और भविष्य के काम के लिए आधार के रूप में एक मानक पृष्ठ टेम्पलेट बनाया। बीस सत्रह मूल विषय पर आधारित एक वर्डप्रेस बाल विषय का उपयोग पृष्ठ के टेम्पलेट को लागू करने के लिए किया गया था।

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

मैं आपको पहला ट्यूटोरियल से पेज टेम्प्लेट को कैसे विस्तारित करने के लिए कदम से भी दिखाऊंगा और इसे अपने बहुत पहले कार्यशील पृष्ठ टेम्पलेट में बदल दें!

सक्रिय पेज टेम्पलेट्स: एक और लचीले दृष्टिकोण

तो हम पृष्ठ टेम्पलेट्स को और अधिक लचीला कैसे बना सकते हैं, और यह वैसे भी उपयोगी क्यों होगा?

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

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

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

यह डेवलपर के लिए और अधिक समझ में आता है, जो कि केवल एक पेज टेम्पलेट को तीन से ज्यादा बनाए रखा है! डोन्ट रिपीट यर्सेल्फ (डीआरवाई) सॉफ़्टवेयर विकास सिद्धांत का पालन नहीं करता है।

सभी पृष्ठ टेम्पलेट्स सक्रिय होना चाहिए?

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

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

डायनेमिक पृष्ठ टेम्पलेट के लिए एक अन्य उपयोगी उदाहरण एक संपर्क फ़ॉर्म होगा।ऐसे कई कस्टम नियंत्रण हैं जो इस पृष्ठ का टेम्पलेट अत्यधिक लचीला बनाने के लिए जोड़ा जा सकता है।

उदाहरण के लिए, आउटपुट फ़ील्ड का कोई निश्चित सेट आउट करने के बजाय, कुछ फ़ील्ड को छोड़ने के लिए पृष्ठ टेम्पलेट नियंत्रण जोड़ा जा सकता है। या शायद एक कैप्चा क्षेत्र वैकल्पिक रूप से स्पैम फॉर्म प्रस्तुतियाँ रोकने के लिए प्रदर्शित किया जा सकता है?ऐसे कई तरीके हैं जो आप एक संपर्क फ़ॉर्म को कस्टमाइज़ कर सकते हैं।

मैं इस ट्यूटोरियल श्रृंखला के भाग 3 में एक सक्रिय फ़ॉर्म पृष्ठ टेम्पलेट तैयार कर रहा हूँ।लेकिन पहले हम एक सामान्य प्रयोजन के गतिशील पृष्ठ टेम्पलेट बनाने के साथ आरंभ करते हैं।

हमारा पहला डायनामिक पेज टेम्पलेट

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

कस्टम पेज टेम्पलेट नियंत्रण हम शीघ्र ही जोड़ रहे हैं:

  • टेक्स्ट बॉक्स
  • टेक्स्टएरीअ
  • चेक बॉक्स
  • रेडियो बटनस
  • ड्रॉप-डाउन सलेक्ट बॉक्स

आदर्श रूप से, यह स्पष्ट करने के लिए कि वे पृष्ठ टेम्पलेट से संबंधित हैं, सीधे पृष्ठ टेम्पलेट ड्रॉप-डाउन बॉक्स के नीचे नियंत्रण को जोड़ना चाहिए।

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

हुक वर्डप्रेस के विकास के लिए मौलिक हैं। वे डेवलपर्स को कोर फाइलों को संपादित करने के बिना कोड आधार का विस्तार करने की अनुमति देते हैं, जिसे आम तौर पर एक बुरा विचार माना जाता है। इसका कारण यह है कि जब भी कोई वर्डप्रेस अपडेट किया जाता है (जो काफी नियमित रूप से हो सकता है) किसी कस्टम कोड को मिटा दिया जाएगा।

पेज एडिटर स्क्रीन पर हमारे मेटा बॉक्स को प्रदर्शित करने के लिए, load-post.php और load-post-new.php हुक को बाल थीम init () में जोड़ें, जिसे हमने भाग 1 में बनाया है।

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

मेटा बॉक्स के लिए डेटा बनाने, प्रदर्शित करने और सहेजने के लिए निम्न चार श्रेणी विधियों को जोड़ें।

मैं वर्डप्रेस मेटा बक्से के बारे में बहुत ज्यादा विस्तार में नहीं जाऊंगा, क्योंकि यह पूरी तरह ट्यूटोरियल हो सकता है, परन्तु ऊपर दिए गए कोड के बारे में निम्नलिखित बिंदुओं पर ध्यान दें:

  • page_template_meta_box() और add_page_template_meta_box() क्लास(वर्ग) मेथड(विधि) मेटा बॉक्स को WordPress के साथ पंजीकृत करती हैं।
  • Add_page_template_meta_box() में, 'page' पैरामीटर निर्दिष्ट करता है कि यह मेटा बॉक्स केवल वर्डप्रेस व्यवस्थापक में 'पेज' पोस्ट प्रकार संपादक पर प्रदर्शित होगा।
  • Display_page_template_meta_box() क्लास मेथड(विधि) मेटा बॉक्स को रेखांकित करता है और फॉर्म नियंत्रण को और अधिक सुरक्षित बनाने के लिए एक नान्स सेट करता है।

यदि सबकुछ ठीक है, तो आपको अब पृष्ठ संपादक पर प्रदर्शित मेटा बॉक्स होना चाहिए, जैसा कि नीचे दिखाया गया है।

A new page meta boxA new page meta boxA new page meta box

इस समय थोड़ी सी खाली है, हालांकि, तो कुछ नियंत्रण जोड़ें।

कस्टम नियंत्रण जोड़ना

यदि आप ऊपर से याद करेंगे, तो हम एक टेक्स्ट बॉक्स, टेक्स्ट एरिया, चेकबॉक्स, रेडियो बटन और मेटा बॉक्स में बॉक्स नियंत्रण चुनने जा रहे हैं। नॉन फ़ंक्शन के नीचे display_page_template_meta_box () मेथड(विधि) में निम्न कोड जोड़कर प्रारंभ करें।

यह हमारे मेटा बॉक्स नियंत्रणों के मौजूदा मूल्यों को पुनर्प्राप्त करता है और उन्हें स्थानीय चर में संग्रहीत करता है।अब मेटा बॉक्स नियंत्रण को प्रस्तुत करने के बाद, सीधे निम्नलिखित एचटीएमएल(HTML) जोड़ें।

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

हालांकि, यह तब तक नहीं होगा जब तक कि हम वर्तमान मेटा बॉक्स नियंत्रण डेटा को वर्डप्रेस डेटाबेस से नहीं बचाते।

कुछ समय पहले, मैं हर बार जब पेज एडिटर को अपडेट किया गया था, तो क्लास विधि को निष्पादित करने के लिए एक हुक पंजीकृत किया गया था।चलिए उस मेथड(विधि) को हमारे थीम विषय क्लास में जोड़ते हैं।

Save_page_template_meta () क्लास मेथड(विधि) मेटा बॉक्स नियंत्रण डेटा को सहेजता है। यह केवल मेटा बॉक्स डेटा को सहेजता है, यदि नॉन सत्यापित किया गया है, तो वर्तमान उपयोगकर्ता पोस्ट संपादित कर सकते हैं, और हम पृष्ठ संपादक व्यवस्थापक स्क्रीन पर हैं।

अगर उन शर्तों को संतुष्ट किया जाता है, तो हम प्रत्येक नियंत्रण के लिए डेटा निकाले जाते हैं जो वैश्विक $ _POST चर में संग्रहीत होता है यह चर हर बार एक फ़ॉर्म सबमिट किया जाता है।

अंत में, मेटा बॉक्स नियंत्रण डेटा को वर्तमान पृष्ठ के मेटा डेटा के रूप में वर्डप्रेस डाटाबेस में सहेजा जाता है।

कस्टम पृष्ठ टेम्पलेट नियंत्रणों के साथ, हमारे मेटा बॉक्स को इस तरह दिखना चाहिए।

Adding controls to the meta boxAdding controls to the meta boxAdding controls to the meta box

टेक्स्ट बॉक्स और टेक्स्टरेया के लिए कुछ पाठ दर्ज करें, और चेक बॉक्स, रेडियो बटन, और चयन बॉक्स के लिए चयन करें। अपने परिवर्तनों को सहेजने के लिए अद्यतन को मारो, और जब पृष्ठ संपादक पुनः लोड होता है, तो आपका मेटा बॉक्स नियंत्रण आपके द्वारा अभी दर्ज किए गए डेटा को दिखाना चाहिए।

Populating the meta boxPopulating the meta boxPopulating the meta box

चाइल्ड थीम functions.php फ़ाइल के लिए पूर्ण स्रोत कोड नीचे दिखाया गया है।

पहेली का अंतिम टुकड़ा हमारे पृष्ठ टेम्पलेट में फ्रन्टएन्ड में मेटा बॉक्स नियंत्रण डेटा का उपयोग करना है। हम test-page-template.php फाइल को खोलें, जो हमने भाग 1 में बनाया और इस अपडेटेड कोड के साथ की गई सामग्री को बदल दिया।

सुनिश्चित करें कि 'टेस्ट पेज टेम्पलेट' वर्तमान में चयनित पृष्ठ टेम्पलेट है और फ्रन्ट एन्ड पृष्ठ को देखें।

Viewing the output of the meta boxViewing the output of the meta boxViewing the output of the meta box

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

निष्कर्ष

इस ट्यूटोरियल में, हमने बताया है कि कार्यशील सक्रिय पेज टेम्पलेट कैसे बनाया जाए। फिलहाल, भले ही यह कार्यात्मक है, हमारा मूल पृष्ठ टेम्पलेट बहुत उपयोगी नहीं है।

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

यदि आपके कोई प्रश्न हैं, तो कृपया मुझे नीचे दिए गए टिप्पणियों में एक संदेश दें मैं ट्यूटोरियल पर अपने विचार सुनना अच्छा लगेगा।

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.