अपनी पोस्ट की सामग्री का लेआउट कस्टमाइज़ करना


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

सीखने के परिणाम

  1. साइट एडिटर और पोस्ट टेम्पलेट तक पहुँचना।
  2. अपने थीम’ के पोस्ट टेम्पलेट के डिफ़ॉल्ट लेआउट को पहचानना।
  3. सिंगल पोस्ट का लेआउट बनाने के लिए उपयोग किए जाने वाले विभिन्न थीम ब्लॉक्स की पहचान करना।
  4. अपनी आवश्यकताओं के अनुसार पोस्ट टेम्पलेट को संशोधित करना।
  5. विभिन्न प्रकार के ब्लॉक्स को स्थानांतरित और नेस्ट करना।

समझ से जुड़े प्रश्न

  1. आप अपनी पोस्ट की सामग्री को किस तरह प्रदर्शित करना चाहेंगे?
  2. आमतौर पर किन थीम ब्लॉक्स का सबसे अधिक उपयोग किया जाता है?

ट्रांसक्रिप्ट

नमस्ते और Learn WordPress में आपका स्वागत है। आज’ के सत्र में, हम आपकी पोस्ट सामग्री के लेआउट को कस्टमाइज़ करने के तरीके पर नज़र डालेंगे। हर ब्लॉक थीम में सिंगल पोस्ट टेम्पलेट होता है, जो यह संरचना या डिज़ाइन प्रदान करता है कि सिंगल पोस्ट किस तरह प्रदर्शित की जाती है। और निश्चित रूप से, आपके पास अपनी आवश्यकताओं के अनुसार इसे संशोधित करने की क्षमता होती है।

फिलहाल, मैंने Twenty Twenty-Two थीम इंस्टॉल की हुई है, और साइट एडिटर में टेम्पलेट संपादित करते समय पोस्ट डिफ़ॉल्ट रूप से इस तरह संरचित होती है। आइए List View पर क्लिक करें, ताकि हमें पेज की संरचना बेहतर ढंग से दिखाई दे, और अब आप देखेंगे कि हमारे पास Post Title ब्लॉक, Post Featured Image ब्लॉक, Post Content ब्लॉक और सबसे नीचे Post Date ब्लॉक, Post Author ब्लॉक, Post Categories ब्लॉक तथा Post Tags ब्लॉक हैं। कृपया ध्यान दें कि यह डिफ़ॉल्ट लेआउट आपके द्वारा उपयोग की जा रही थीम के आधार पर अलग-अलग होगा। आइए देखें कि आपकी वेबसाइट के फ्रंट एंड से यह कैसा दिखाई देता है। आप देखेंगे कि हमारे पास पोस्ट का शीर्षक, पोस्ट की फीचर्ड इमेज, पोस्ट की सामग्री, पोस्ट की तारीख, पोस्ट का लेखक और फिर कोई टैग या श्रेणी है।

आइए मैं आपको दिखाता हूँ कि आप इस डिफ़ॉल्ट डिज़ाइन को दो अलग-अलग तरीकों से कैसे बदल सकते हैं। मेरे पहले उदाहरण में, आप देखेंगे कि मैंने साइट शीर्षक का संरेखण बदल दिया है और Post Date, Author तथा Categories ब्लॉक्स को साइट शीर्षक के नीचे और पोस्ट की फीचर्ड इमेज के ऊपर ले आया हूँ। मैंने Post Featured Image और Post Content ब्लॉक्स को उसी स्थान पर रखा है।

दूसरे उदाहरण में, मैंने एक कस्टम पोस्ट हेडर बनाया। मैंने Cover ब्लॉक का उपयोग किया और उसमें नेविगेशन मेनू, फीचर्ड इमेज, Post Title ब्लॉक तथा Post Date और Author ब्लॉक को एक साथ नेस्ट किया।

आइए आगे बढ़ते हैं और देखते हैं कि आप अपने पोस्ट टेम्पलेट को कैसे कस्टमाइज़ कर सकते हैं और इन उदाहरणों को फिर से कैसे बना सकते हैं। पहले उदाहरण में दिखाई देने वाला लेआउट प्राप्त करने के लिए Appearance और फिर Editor पर क्लिक करें। WordPress आइकन या साइट आइकन पर क्लिक करें और Templates तक जाएँ, फिर Single Post Template चुनें। पेज की संरचना को बेहतर ढंग से देखने के लिए List View पर क्लिक करें और सबसे पहले, हम पोस्ट शीर्षक का संरेखण बीच में करेंगे। फिर नीचे स्क्रॉल करें और अपने अन्य थीम ब्लॉक्स को खोजें, तथा पैरेंट Row ब्लॉक चुनें। अब हम List View में Row ब्लॉक को ऊपर खींचकर Post Title ब्लॉक के नीचे ले जाएँगे और फिर संरेखण को बीच में बदलेंगे। यह हो जाने के बाद Save पर क्लिक करें। अब हम अपनी वेबसाइट के फ्रंट एंड पर वापस जाकर देख सकते हैं कि आपकी साइट पर आने वाले किसी व्यक्ति को यह कैसी दिखाई देगी। और यह रहा।

दूसरे उदाहरण को फिर से बनाने के लिए, हम साइट एडिटर में वापस हैं और Templates तक जाएँगे, फिर दोबारा Single Post Template चुनेंगे। अब सबसे पहले हम हेडर, Post Title ब्लॉक, Post Featured Image ब्लॉक तथा अन्य सभी थीम ब्लॉक्स को हटा देंगे। इसके बाद हम अपने पेज के सबसे ऊपर एक Cover ब्लॉक जोड़ेंगे। ब्लॉक टूलबार में मीडिया जोड़ने का विकल्प होता है और बाईं ओर फीचर्ड इमेज का उपयोग करने का विकल्प होता है। Use featured image पर क्लिक करें और फिर एक ओवरले रंग चुनें। Cover ब्लॉक चुनें और फिर अपारदर्शिता को 80 पर बदलें। यह हो जाने के बाद Inserter पर क्लिक करें और एक Row ब्लॉक जोड़ें। फिर Row ब्लॉक के भीतर हम साइट लोगो, साइट शीर्षक और फिर Navigation ब्लॉक जोड़ेंगे। मैं अपने द्वारा पहले से बनाए गए मेनू में से एक चुनूँगा। यह हो जाने के बाद, Site Logo और Site Title ब्लॉक्स चुनें और उन्हें एक Row में एक साथ समूहित करें।

इसके बाद, पैरेंट Row ब्लॉक को फिर से चुनें और Justification के आगे Space between items चुनें। अंत में, Navigation ब्लॉक चुनें और सुनिश्चित करें कि Allow to wrap to multiple lines विकल्प बंद है। फिर हम ब्लॉक चुनेंगे और उसे Cover ब्लॉक के सबसे ऊपर भेज देंगे। अब मैं अपना Post Title ब्लॉक जोड़ूँगा और उसका संरेखण बीच में करूँगा। अब मैं अपनी पोस्ट की तारीख और लेखक को एक साथ समूहित करने के लिए एक और Row ब्लॉक जोड़ूँगा। सबसे पहले, मैं Post Date ब्लॉक और फिर Post Author ब्लॉक जोड़ूँगा। मैं पैरेंट ब्लॉक को फिर से चुनूँगा और Justification को बीच में बदलूँगा। इसके बाद हम इनके बीच एक पैराग्राफ जोड़ेंगे, उसमें पूर्णविराम डालेंगे और उसे बोल्ड करेंगे। फिर मैं सुनिश्चित करूँगा कि पैरेंट ब्लॉक दोबारा चुना हुआ हो और ब्लॉक स्पेसिंग को 10 पिक्सेल पर बदलने के लिए साइडबार सेटिंग्स का उपयोग करूँगा, ताकि यह एक-दूसरे के करीब आ जाए। इसके बाद मैं साइडबार सेटिंग्स और List View बंद करूँगा और सुनिश्चित करूँगा कि मैं अपने Cover ब्लॉक का आकार बढ़ा दूँ। अंत में, आप Cover ब्लॉक के ठीक नीचे मौजूद Separator ब्लॉक को हटाने का निर्णय भी ले सकते हैं। फिर आप वेबसाइट के फ्रंट एंड पर वापस जाकर अपने बदलावों को लागू हुआ देख सकते हैं।

यदि आपने किसी टेम्पलेट को संशोधित किया है, तो आप देखेंगे कि आपकी थीम के नाम के पास इमेज के ऊपर एक छोटा-सा बिंदु दिखाई देता है। यदि आप अपने बदलावों से खुश नहीं हैं, तो तीन लंबवत बिंदुओं पर क्लिक करें और Clear customizations चुनें। अब टेम्पलेट अपनी मूल स्थिति में वापस आ गया है। इसके साथ ही यह ट्यूटोरियल समाप्त होता है।

अपने पोस्ट टेम्पलेट को कस्टमाइज़ करने के लिए आपको ढेरों शुभकामनाएँ, और अधिक ट्यूटोरियल तथा प्रशिक्षण सामग्री के लिए Learn WordPress पर जाएँ।