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

एक इमेज-आधारित आर्काइव पेज बनाना: प्रारंभ करना

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating an Image-Based Archive Page.
Creating an Image-Based Archive Page: Styling

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

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

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

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

इस पहले भाग में आप निम्नलिखित सीखेंगे:

  • आर्काइव पेज बनाते समय काम करने के लिए एक कस्टम पोस्ट टाइप कैसे रजिस्टर करें
  • इमेजेज और खिताब को सही तरीके से डिस्प्ले करने के लिए लूप को कैसे कोड करें
  • पैरामीटर और क्लासेज को आपको एक्सेसिबिलिटी को अधिकतम करने के लिए इमेज और टाइटल में जोड़ने की आवश्यकता होगी और इमेज ग्रिड को स्टाइल करने के लिए CSS को जोड़ना संभव हो जाएगा

अगले भाग में आप सीखेंगे कि CSS को होवर प्रभाव के साथ अपनी इमेज ग्रिड डिस्प्ले करने के लिए कैसे कोड करें।


इस ट्यूटोरियल के लिए आपको रिसोर्स की आवश्यकता होगी

यह ट्यूटोरियल अपने पैरेंट के रूप में Twenty Twelve थीम के साथ एक चाइल्ड थीम का उपयोग करता है। आपको इस थीम के साथ इनस्टॉल WordPress इंस्टॉलेशन की आवश्यकता होगी (इसे डिफ़ॉल्ट के रूप में इनस्टॉल किया जाना चाहिए)। यदि आप किसी चाइल्ड थीम को सेट अप करने के बारे में अनिश्चित हैं, तो WordPress Codex पर निर्देश देखें।

आपको अपनी साइट पर FTP एक्सेस के साथ कोड एडिटर की भी आवश्यकता होगी, जब तक कि आप स्थानीय रूप से डेवेलोप नहीं कर रहे हैं, इस मामले में आपको FTP की आवश्यकता नहीं होगी।

आप उपरोक्त डाउनलोड लिंक का उपयोग करके, चाइल्ड थीम फ़ाइलों सहित कोड बंडल डाउनलोड कर सकते हैं।


कस्टम पोस्ट टाइप रजिस्टर करना

पहला कदम अपने कस्टम पोस्ट टाइप के 'animal' को रजिस्टर करना है।

अपने चाइल्ड थीम में, एक नई functions.php फ़ाइल बनाएं और इसमें निम्न जोड़ें:

यह दो पैरामीटर का उपयोग कर कस्टम पोस्ट टाइप रजिस्टर करता है:

  • 'animal', कस्टम पोस्ट टाइप का नाम
  • $args, कस्टम पोस्ट टाइप के लिए आर्ग्यूमेंट्स का ऐरे। इनमें समर्थन के लिए आर्ग्यूमेंट्स शामिल हैं, चाहे पोस्ट टाइप हिरार्चिकाल है (यह नहीं है, इसलिए टैग की तरह व्यवहार करता है), चाहे पोस्ट टाइप में एक आर्काइव हो, जो आपके आर्काइव पेज के लिए काम करने के लिए सच हो, और लेबल, जिन्हें $labels का उपयोग कर एक ऐरे परिभाषित किया गया है।

कस्टम पोस्ट टाइप को रजिस्टर करने के लिए फ़ंक्शन को 'init' एक्शन हुक का उपयोग करके WordPress में लगाया जाता है, जिसका अर्थ यह है कि जब WordPress का इरादा होता है तो यह चलता है।

अपनी functions.php फ़ाइल को सेव करें।

स्क्रीनशॉट में दिखाए गए अनुसार नया पोस्ट टाइप अब WordPress एडमिन मेनू में डिस्प्ले होगा:

The WordPress admin showing the listing page for the new 'animals' custom post type

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

The populated admin page listing animals that have been added

आर्काइव लिस्टिंग URL को काम करने लायक बनाना

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

Permalinks स्क्रीन में, पर्मालिंक सेटिंग्स को एडिट करें ताकि %postname% ऑप्शन पर क्लिक करके 'pretty permalinks' चालू हो जाएं। इसका मतलब है कि आप आसानी से पोस्ट टाइप के आर्काइव के URL में टाइप करने में सक्षम होंगे।

Change permlainks settings to enable pretty permalinks

अपने परिवर्तन को परमालिंक में सेव करें।


आर्काइव पेज देखना

अपने ब्राउज़र में, आर्काइव को डिस्प्ले करने के लिए अपनी साइट के URL के बाद /animal टाइप करें। मेरी डेमो साइट के मामले में पूरा URL http://rachelmccollin.co.uk/wptutsplus-image-archive/animal/ है। यह आपके कस्टम पोस्ट टाइप के लिए आर्काइव को डिस्प्ले करेगा:

The animal archive page before creating your template file for this type of archive - displaying post content, titles and images

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

अगला स्टेप एक टेम्पलेट फाइल को बनाएगा जिसमे वह सभी एनिमल की सिर्फ इमेज और टाइटल दिखायेगा।


कस्टम पोस्ट टाइप आर्काइव के लिए एक टेम्पलेट फ़ाइल बनाना

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

टैग और आर्काइव टाइटल शामिल करना

अपने चाइल्ड थीम में, archive-animal.php नामक एक नई खाली फ़ाइल बनाएं।

पेज को डिस्प्ले करने के लिए एलिमेंट्स के लिए टाइटल - हेडर, फुटर और साइडबार, साथ ही ओपनिंग और क्लोजिंग टैग को कॉल करने के लिए कोड जोड़ें। ये एलिमेंट Twenty Twelve थीम का उपयोग करके अन्य टेम्पलेट फ़ाइलों के अनुरूप हैं और पैरेंट थीम के स्टाइल को प्रेसेर्व करेंगे:

इसके बाद, आर्काइव टाइटल को जोड़ें जो पेज टाइटल के रूप में डिस्प्ले होगा। यह ओपनिंग <div id = "content" role="main"> टैग के बाद चला जाता है:

यह पोस्ट टाइप का नाम डिस्प्ले करने के लिए post_type_archive_title() का उपयोग करता है जिसका आर्काइव डिस्प्ले किया जा रहा है। यह सिमेंटिक और स्टाइल के संदर्भ में मूल थीम के साथ कंसिस्टेंसी को संरक्षित रखने के लिए <header> और <h1> टैग के अंदर लपेटता है।

लूप जोड़ना और कंटेंट के साथ इसे पॉप्युलेट करना

अगला, आर्काइव हैडर के नीचे, लूप के लिए बेसिक कोड जोड़ें:

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

लूप के अंदर निम्नलिखित जोड़ें:

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

लूप के अंदर निम्नलिखित जोड़ें:

यह प्रत्येक पोस्ट (या प्रत्येक एनिमल) के लिए विशेष इमेज डिस्प्ले करने के लिए the_post_thumbnail() का उपयोग करता है। इसके लिए पैरामीटर निम्नानुसार हैं:

  • 'thumbnail' - इमेज का आकार जो डिस्प्ले किया जाएगा, जो थंबनेल आकार है
  • $attr - एट्रिब्यूट का एक ऐरे: the_post_thumbnail() फ़ंक्शन द्वारा img एलिमेंट आउटपुट की क्लास, जिसका उपयोग स्टाइल के लिए किया जाएगा; और 'alt' एट्रिब्यूट, जो strip_tags का उपयोग किसी भी alt ऐट्रिब्यूट्स को डिस्प्ले करने के लिए करती है जब इमेज को किसी भी HTML टैग को कम से कम अपलोड किया गया था। यह इमेज के लिए मेटाडेटा तक पहुंचने के लिए $wp_postmeta का उपयोग करता है

यह इमेज पोस्ट परमालिंक के लिंक के अंदर है (<a href="<?php the_permalink(); ?> ">)।

अगला स्टेप इमेज के नीचे पोस्ट टाइटल जोड़ना है। फीचर्ड इमेज को डिस्प्ले करने के लिए कोड के नीचे निम्न कोड जोड़कर ऐसा करें लेकिन बंद </ article> टैग के ऊपर:

यह पोस्ट परमालिंक के दूसरे लिंक के अंदर पोस्ट का टाइटल (यानी एनिमल का नाम) जोड़ता है, जो फिर से archive-title क्लास के साथ एक h2 टैग के अंदर है। इस क्लास को जोड़ने से बाद में स्टाइलिंग में मदद मिलेगी और h2 टैग पोस्ट टाइटल पर सिमेंटिक जोड़ता है और पहुंच के लिए सहायक है।

आपकी पूरी टेम्पलेट फ़ाइल में अब निम्न शामिल होंगे:

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

The archive page as displayed using your new template file

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

  • इमेजेज को एक ग्रिड में डिस्प्ले करना
  • टाइटल को छुपाना
  • टाइटल तब प्रकट करना जब यूजर इमेज पर अपने माउस को घुमाता है

ऐसा करने के बाद, आपके पास एक आकर्षक इमेज-आधारित आर्काइव लिस्ट होगी जिसका उपयोग आप किसी भी प्रोजेक्ट के लिए कर सकते हैं जहां पोस्ट फीचर्ड इमेजेज का उपयोग करते हैं।


उपयोगी रिसोर्स

Codex पेज:

ट्यूटोरियल:

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.