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

WordPress लैंडिंग पेज टेम्पलेट कैसे बनाएं

by
Difficulty:IntermediateLength:MediumLanguages:

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

Final product image
What You'll Be Creating

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

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

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

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

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

ऐसा करने के लिए, हम अपनी थीम में कुछ फाइलों के साथ काम करेंगे:

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

तो चलो शुरू करते है!

आपको किस चीज़ की ज़रूरत पड़ेगी

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

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

शुरुआती पेज

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

the landing page using a standard page template

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

लैंडिंग पेज टेम्पलेट बनाना

सबसे पहले आपको एक लैंडिंग पेज टेम्पलेट बनाना होगा। इसे दो तरीकों में से एक से करें:

यदि आप अपनी थीम के साथ काम कर रहे हैं, तो page.php का डुप्लिकेट बनाएं और इसका नाम बदलें।

यदि आप किसी थर्ड पार्टी थीम के साथ काम कर रहे हैं, तो एक चाइल्ड थीम बनाएं। चाइल्ड थीम में पैरेंट थीम से page.php का डुप्लिकेट बनाएं और उसका नाम बदलें।

इसे एक फ़ाइल नाम न दें जो page- से शुरू होता है क्योंकि यह WordPress को भ्रमित करेगा यदि आप बाद में page- के बाद उपयोग किए गए स्लग के साथ एक पेज बनाते हैं। मैं अपना landing-page-template.php कॉल कर रहा हूं।

अब अपनी टेम्पलेट फ़ाइल खोलें। टॉप पर कोड की इस लाइन को जोड़ें:

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

Picking a page template in the page editing screen

अब फ़ाइल से साइडबार कॉल हटा दें। इस लाइन को ढूंढें:

...और इसे डिलीट कर दें। अपनी फाइल को सेव करें। आपका नया पेज टेम्पलेट तैयार है। लेकिन आपने अभी तक पूरा नहीं किया है।

हैडर फ़ाइल को एडिट करना

अगला step header.php फ़ाइल को एडिट करना है, उस पेज टेम्पलेट का उपयोग होने पर किसी भी लिंक को हटाने के लिए। इसके लिए हम is_page_template() कंडीशनल टैग का उपयोग करेंगे।

अपनी header.php फ़ाइल खोलें और अपनी साइट टाइटल के लिए कोड ढूंढें।

नोट: यदि आप किसी थर्ड-पार्टी थीम का उपयोग कर रहे हैं, तो अपने चाइल्ड थीम में एक header.php फ़ाइल बनाएं जो पैरेंट थीम से एक का डुप्लिकेट है, और इसे एडिट करें।

मेरी थीम में, यह ऐसा लगता है:

इसे एडिट करें ताकि इसे इस तरह से पढ़ सके, अपनी थीम के लिए एडजस्ट कर सके:

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

आपको नेविगेशन को हटाने की भी आवश्यकता है। अपने मुख्य मेनू के लिए कोड को ढूंढे। मेरी थीम में, यह ऐसा लगता है:

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

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

अब header.php फ़ाइल को सेव करें और इसे बंद करें।

फुटर फ़ाइल को एडिट करना

अंतिम चरण यह सुनिश्चित करने के लिए है कि कोई भी विजेट एरिया फुटर में प्रदर्शित न हो।

लैंडिंग पेज टेम्पलेट का उपयोग न करने पर हम केवल उसी विजेट टैग को आउटपुट विजेट एरियाज में उपयोग करेंगे।

अपना footer.php टेम्पलेट खोलें (या प्रासंगिक होने पर अपने चाइल्ड थीम पर डुप्लिकेट बनाएं)।

अपने विजेट को आउटपुट करने के लिए कोड फाइंड करें। ये मेरे हैं:

अब एक कंडीशनल टैग में उसी तरह से लपेटें जैसा आपने हेडर फ़ाइल में किया था।

इसके बाद, हमें कोलोफोन में संशोधन (amend) करने की आवश्यकता होगी। इसमें आपके होम पेज और/या WordPress साइट पर एक लिंक शामिल हो सकता है।

ये मेरा है:

अब लैंडिंग पेज पर लिंक के बिना कोलोफ़ोन आउटपुट करने के लिए एक कंडीशनल टैग का उपयोग करें:

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

स्टाइल एडजस्ट करना

आप पाते हैं कि आपके लैंडिंग पेज टेम्पलेट से साइडबार हटाकर, आपको कंटेंट के लिए स्टाइल एडजस्ट करने की आवश्यकता है। यदि कंटेंट एरिया अभी भी स्क्रीन के दो-तिहाई हिस्से को ले रहा है, तो आप इसे ठीक करने के लिए पेज टेम्पलेट के लिए WordPress द्वारा उत्पन्न body क्लास का उपयोग कर सकते हैं।

तो मान लीजिए कि आपके कंटेंट और साइडबार के लिए निम्न स्टाइल है:

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

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

अंतिम पेज

बिना किसी लिंक के मेरा लैंडिंग पेज यहां दिया गया है:

the landing page with all links removed

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

मुझे आशा है कि आपका लैंडिंग पेज आपके लिए बहुत सारा बिज़नेस लाएगा। गुड लक!

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.