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

कस्टम क्वेरीज़ का उपयोग कर मल्टीप्ल लिस्टिंग के साथ होमपेज कैसे बनाएं

by
Difficulty:IntermediateLength:MediumLanguages:

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

WordPress आपको अपनी वेबसाइट के फ्रंट पेज के लिए कुछ बिल्ट-इन ऑप्शन प्रदान करता है: आपके रीसेंट ब्लॉग पोस्ट या आपकी पसंद का एक स्टैटिक पेज को डिस्प्ले करना। लेकिन क्या होगा यदि आप इससे कुछ और दिलचस्प बनाना चाहते हैं?

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

  • अपनी थीम के उपयोग के लिए एक कस्टम होमपेज टेम्पलेट बनाएं
  • तीन कस्टम क्वेरीज सहित विभिन्न टाइप के डेटा को डिस्प्ले करने के लिए उस टेम्पलेट में चार क्वेरीज शामिल करें

क्वेरीज इस प्रोजेक्ट के लिए रजिस्टर स्टैंडर्ड पोस्ट्स और एक कस्टम पोस्ट टाइप लिस्ट करेंगे, जिसे 'animal' कहा जाएगा। आप कोड बंडल में चार क्वेरीज के साथ टेम्पलेट फ़ाइल पा सकते हैं।


इस ट्यूटोरियल को पूरा करने के लिए आपको क्या चाहिए

  • WordPress की एक डेवलपमेंट इंस्टालेशन
  • एक इनस्टॉल की हुई थीम जिसे आप एडिट कर सकें। यदि आप किसी मौजूदा थीम के साथ काम कर रहे हैं तो मैं एक चाइल्ड थीम बनाने की सलाह देता हूं ताकि आप पैरेंट थीम एडिट किए बिना टेम्पलेट फाइलें बना सकें। मैं Twenty Twelve के एक चाइल्ड थीम का उपयोग कर रहा हूँ

होमपेज डिजाइन

होमपेज टेम्पलेट सेट अप करने से पहले, होमपेज पर क्या है यह पहचानने के लिए पहले कुछ समय लें:

Front page design with header

होमपेज में शामिल हैं:

  • बैनर और नेविगेशन मेनू वाला एक हेडर
  • होमपेज कंटेंट - टेक्स्ट और एक इमेज
  • तीन लिस्टिंग, प्रत्येक कस्टम क्वेरी का उपयोग करके:
    • Updates - ये 'Updates' केटेगरी में स्टैंडर्ड पोस्ट हैं
    • In Details - 'Detail' केटेगरी में स्टैंडर्ड पोस्ट्स
    • Animals - ये 'animal' नामक एक कस्टम पोस्ट टाइप का उपयोग करते हैं
  • एक स्टैंडर्ड फुटर

इस लेआउट के एलिमेंट में आप होम पेज कंटेंट और तीन लिस्टिंग के साथ काम करेंगे।


शुरू करने से पहले: डेटा सेट अप करना

शुरू करने से पहले, आपको अपने क्वेरीज के साथ काम करने के लिए कुछ आइटमों की आवश्यकता होगी:

  • एक 'animal' कस्टम पोस्ट टाइप रजिस्टर है। इसे कैसे करें के विवरण के लिए, WordPress कोडेक्स में register_post_type देखें। वैकल्पिक रूप से, कोड बंडल में functions.php फ़ाइल में कोड शामिल होता है जो यह करता है
  • सामान्य posts के लिए सेटअप दो कैटेगरीज - 'Updates' और 'In Detail'
  • एक स्टैटिक पेज जिसे 'Home' कहा जाता है, इसमें कुछ कंटेंट शामिल होते है। यह WordPress डैशबोर्ड में सेटिंग्स पेज के माध्यम से होमपेज के रूप में सेटअप किया जाना चाहिए
  • प्रत्येक केटेगरी और कुछ जानवरों में कुछ सामान्य पोस्ट (कस्टम पोस्ट टाइप का उपयोग करके)। टेम्पलेट प्रत्येक में से आठ तक प्रदर्शित करेगा

फ्रंट पेज टेम्पलेट बनाना

पहला स्टेप अपने कोड को पकड़ने के लिए टेम्पलेट फ़ाइल बनाना है। अपने थीम फ़ोल्डर में एक खाली फ़ाइल बनाएं और इसे front-page.php नाम दें। फ़ाइल में निम्न कोड जोड़ें:

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

blank home page with header and footer, no content

होमपेज पर स्टेटिक कंटेंट को जोड़ना

साथ ही कस्टम क्वेरीज के परिणाम दिखाते हुए, आपका होमपेज 'Home' स्टैटिक पेज से कंटेंट को प्रदर्शित करेगा। इसे अपनी टेम्पलेट फ़ाइल में जोड़ने के लिए, '// front page content goes here' को रीप्लेस करने के लिए निम्न कोड डालें:

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

the home page with static page content

WP_Query के साथ पहली कस्टम क्वेरी

कस्टम क्वेरीज के लिए, आप WP_Query क्लास का उपयोग करेंगे। यह आपको कस्टम क्वेरी सेट अप करने और पोस्ट प्रदर्शित करने के लिए प्रत्येक पर आधारित लूप चला सकता है।

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

  • post_type - पोस्ट, पेज, अटैचमेंट या एक कस्टम पोस्ट टाइप
  • केटेगरी
  • टैग
  • टेक्सोनोमी टर्म (टर्म्स)
  • posts_per_page - प्रदर्शित करने के लिए पोस्ट्स की संख्या
  • order - ASC या DESC
  • orderby - आप date, name, author, menu_order या कई और पैरामीटर द्वारा ऑर्डर कर सकते हैं
  • ...और भी बहुत सारे

पैरामीटर के विवरण के लिए आप WP_Query के साथ उपयोग कर सकते हैं, WordPress कोडेक्स में WP_Query देखें। WP_Query का उपयोग करने के लिए, आप निम्न कोड डालते हैं:

अपने होमपेज पर आप 'Updates' केटेगरी में पिछले आठ पोस्ट्स को लिस्ट करना चाहते हैं। ऐसा करने के लिए, मुख्य क्वेरी और फुटर को कॉल के बीच निम्न कोड जोड़ें:

यह आपकी लिस्टिंग को शामिल करने के लिए एक <section> एलिमेंट बनाता है और <h2> टैग में केटेगरी आर्काइव के लिंक के साथ लिस्टिंग खोलता है। यह WP_Query के लिए आर्गुमेंट को परिभाषित करता है और उस क्वेरी के आधार पर लूप चलाता है। अतिरिक्त क्लासेज का उपयोग प्रत्येक इंडिविजुअल लिस्टिंग को स्टाइल करने के लिए किया जा सकता है।


दूसरी कस्टम क्वेरी

दूसरी कस्टम क्वेरी पहले की तरह लगभग समान है, यह सिर्फ एक अलग केटेगरी से पोस्ट क्वेरी करता है। पहली क्वेरी के बाद और दूसरे समापन से पहले </section> टैग के बाद निम्नलिखित जोड़ें:

यह 'In Detail' केटेगरी में पोस्ट के लिए दूसरी पोस्ट लिस्टिंग जोड़ता है।


तीसरी कस्टम क्वेरी: एक कस्टम पोस्ट टाइप क्वेरी

तीसरी और अंतिम क्वेरी स्टैंडर्ड पोस्ट्स से पूछताछ नहीं करती है, लेकिन आपके टेम्पलेट फ़ाइल बनाने से पहले 'animal' कस्टम पोस्ट टाइप आपने रजिस्टर किया है। दूसरी कस्टम क्वेरी के बाद, निम्न जोड़ें:

अब आपके पास सभी क्वेरीज हैं और होम पेज पर प्रदर्शित हैं:

the home page with all queries added

लिस्ट को स्टाइल करें

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

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

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

the home page with the listings styled

सारांश

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

  • एक फ्रंट पेज के लिए जो केवल आर्काइव और कोई स्टैटिक कंटेंट नहीं दिखाता है, बस पहले लूप को हटा दें
  • 'animals' पोस्ट टाइप को एक अलग तरीके से लिस्ट करने के लिए, आप WP_Query के लिए अपने आर्ग्यूमेंट्स में टैक्सोनोमी निर्दिष्ट कर सकते हैं
  • आप प्रत्येक पोस्ट के लिए प्रदर्शित कंटेंट को जोड़ या बदल सकते हैं, उदाहरण के लिए पोस्ट थंबनेल (या फीचर्ड इमेजेज) प्रदर्शित करने के लिए the_thumbnail() का उपयोग करना
  • आप अपने साइडबार या फुटर टेम्पलेट में सभी पेजेज पर डिस्प्ले करने के लिए कस्टम क्वेरी जोड़ सकते हैं

रिसोर्सेज

कुछ उपयोगी रिसोर्सेज:

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.