अगर हम ब्राउज़ करते हैं वर्डप्रेस थीम डायरेक्टरी, अधिकांश थीम कवर छवियों को प्रदर्शित करती हैं। यह लोकप्रिय मांग में एक विशेषता है। कवर पेज की प्रवृत्ति में भी सच है ब्लॉक थीम निर्देशिका स्क्रीनशॉट भी।
आइए निम्नलिखित उदाहरण पर विचार करें बीस बीस (एक क्लासिक थीम) जिसमें a . शामिल है कवर टेम्पलेट जिसका उपयोग एकल पोस्ट और पेज दोनों में प्रदर्शित करने के लिए किया जा सकता है, जहां पोस्ट की चुनिंदा छवि शीर्ष पर प्रदर्शित होती है जो ब्राउज़र स्क्रीन पर फैली हुई है, जिसमें पोस्ट शीर्षक और अन्य वांछित मेटा डेटा नीचे है। कवर टेम्प्लेट सामग्री को प्रदर्शित करने की पारंपरिक बाधाओं से अलग सामग्री बनाने की अनुमति देते हैं।
कवर टेम्प्लेट बनाने के लिए वर्तमान में PHP कोड लिखने की आवश्यकता है जैसा कि यहां कैप्चर किया गया है ट्वेंटी ट्वेंटी डिफ़ॉल्ट थीम का कवर टेम्प्लेट. अगर हम देखें template-parts/content-cover.php फ़ाइल, इसमें शामिल है कोड सामग्री प्रदर्शित करने के लिए जब cover-template प्रयोग किया जाता है।
इस प्रकार, यदि आपके पास PHP का गहरा ज्ञान नहीं है, तो एक अनुकूलित कवर पेज बनाना संभव नहीं है। कई सामान्य वर्डप्रेस उपयोगकर्ताओं के लिए, प्लगइन का उपयोग करने का एकमात्र विकल्प है जैसे Custom Post Type UI में वर्णित है यह लघु वीडियो.
ब्लॉक विषयों में अनुभागों को कवर करें
जबसे WordPress के 5.8, थीम लेखक शीर्ष नायक अनुभाग का उपयोग करके कस्टम टेम्पलेट (जैसे एकल पोस्ट, लेखक, श्रेणी, और अन्य) बना सकते हैं ब्लॉक संपादक कवर ब्लॉक और न्यूनतम या बिना किसी कोड के उनके विषयों में बंडल किया गया।
ब्लॉक थीम टेम्प्लेट में शीर्ष बड़े कवर अनुभाग कैसे बनाए जाते हैं, इसमें गोता लगाने से पहले, आइए संक्षेप में दो ब्लॉक थीम देखें ट्वेंटी-ट्वेंटी और Wabi रिच ताबोर द्वारा (पूर्ण समीक्षा यहाँ उत्पन्न करें).
परदे के पीछे, ट्वेंटी ट्वेंटी द्वारा एक बड़ा हेडर लागू किया जाता है एक पैटर्न के रूप में संग्रहीत एक छिपी हुई छवि जोड़ना में header-dark-large भागों। जबकि, वाबी थीम में, एक ही पोस्ट में बड़े हेडर बैकग्राउंड कलर को लागू किया जाता है उच्चारण पृष्ठभूमि रंग और एक 50px ऊंचाई स्पेसर ब्लॉक (पंक्तियाँ: 5-9)। उच्चारण रंग द्वारा प्रबंधित किए जाते हैं assets/js/accent-colors.js फ़ाइल.
कई अन्य लोगों ने उपयोग करके एक शीर्ष कवर अनुभाग बनाना चुना कवर ब्लॉक, जिसने उपयोगकर्ताओं को पृष्ठभूमि का रंग बदलने और मीडिया लाइब्रेरी से एक स्थिर छवि जोड़ने या मीडिया उपकरणों से अपलोड करने की अनुमति दी - बिना कोई कोड लिखे। इस दृष्टिकोण के साथ, से छवियां पोस्ट फीचर्ड इमेज ब्लॉक यदि आप चाहते हैं कि पोस्ट को एकल पोस्ट में पृष्ठभूमि छवि के रूप में चित्रित किया जाए तो प्रत्येक एकल पोस्ट में मैन्युअल रूप से जोड़ा जाना था।
डायनामिक पोस्ट फीचर्ड इमेज के साथ कवर ब्लॉक
वर्डप्रेस 6.0 ने एक और बढ़िया उपलब्ध कराया विशेष रुप से प्रदर्शित छवि कवर ब्लॉक फीचर, जो किसी भी पोस्ट या पेज की फीचर्ड इमेज को कवर ब्लॉक में बैकग्राउंड इमेज के रूप में उपयोग करने की अनुमति देता है।
निम्नलिखित में लघु वीडियो, Automattic इंजीनियरों ने उदाहरण के साथ ब्लॉक को कवर करने के लिए चुनिंदा छवियों को जोड़ने पर चर्चा की आर्चियो विषय:
पोस्ट फीचर्ड इमेज ब्लॉक सहित इमेज ब्लॉक का उपयोग करके और अधिक अनुकूलित किया जा सकता है duotone में रंग theme.json जैसा कि इस संक्षिप्त में चर्चा की गई है बिंदुओं को कनेक्ट करना YouTube वीडियो (ऑटोमैटिक की ऐनी मैकार्थी)।
केस उदाहरणों का उपयोग करें (वी, ब्राइट मोड)
अगर हम थंबनेल छवियों को ब्राउज़ करते हैं ब्लॉक थीम निर्देशिका, हम देखते हैं कि उनमें से अधिकांश में बड़े कवर हेडर अनुभाग शामिल हैं। यदि हम उनकी टेम्प्लेट फ़ाइलों में खुदाई करते हैं, तो वे स्थिर छवि पृष्ठभूमि वाले कवर ब्लॉक का उपयोग करते हैं।
हाल ही में विकसित कुछ थीम डायनामिक पोस्ट फीचर्ड इमेज बैकग्राउंड (जैसे, आर्कियो, वी, फ्रॉस्ट, ब्राइट मोड, आदि) के साथ कवर ब्लॉक का उपयोग कर रहे हैं। नई सुविधा का संक्षिप्त अवलोकन यहां उपलब्ध है यह छोटा गिटहब वीडियो.
की गतिशील उच्चारण रंग सुविधाओं का संयोजन Wabi कवर और पोस्ट फीचर्ड इमेज ब्लॉक के साथ थीम, Rich Tabor अपनी रचनात्मकता को अपने नए . में और विस्तारित करता है वी विषय (पूर्ण समीक्षा उपलब्ध यहाँ उत्पन्न करें) एक ही पोस्ट से गतिशील कवर छवियों को प्रदर्शित करने के लिए।
अपने वी घोषणा पोस्ट में, रिच ताबोर लिखते हैं: "पर्दे के पीछे, the single.html टेम्प्लेट एक कवर ब्लॉक का उपयोग कर रहा है जो पोस्ट की विशेष रुप से प्रदर्शित छवि का लाभ उठाता है। फिर डुओटोन को पद को सौंपी गई रंग योजना द्वारा लागू किया जाता है। इस तरह, लगभग कोई भी छवि ठीक लगेगी ”।
यदि आप वी थीम के हेडर कवर ब्लॉक में गहराई से जाना चाहते हैं और सीखना चाहते हैं कि अपना खुद का कैसे बनाना है, तो यहां एक है लघु वीडियो से फ़्रैंक क्लेन (WP विकास पाठ्यक्रम) जो चरण-दर-चरण बताते हैं कि इसे कैसे बनाया गया था।
वी थीम के समान, ब्रायन गार्डनर अपने हालिया में पोस्ट फीचर्ड इमेज ब्लॉक के साथ कवर ब्लॉक का भी उपयोग करता है उज्ज्वल मोड स्टैंडआउट सामग्री प्रदर्शित करने के लिए थीम जीवंत रंग.
ब्रायन ने WPTavern . को बताया: "वह विषय के बारे में सबसे अधिक प्यार करता है जिस तरह से कवर ब्लॉक का उपयोग किया जाता है एकल पृष्ठ. यह चित्रित छवि को कवर ब्लॉक में खींचता है और छाया और पूर्ण-ऊंचाई विकल्पों के लिए कस्टम ब्लॉक शैली भी प्रदान करता है। [...] मुझे लगता है कि यह वास्तव में आधुनिक वर्डप्रेस के साथ क्या संभव है प्रस्तुत करता है।"
अधिक विवरण के लिए, यहाँ इसकी है डेमो साइट और ब्रायन की ब्राइट मोड थीम की पूरी समीक्षा.
ब्लॉक संपादक के साथ जटिल लेआउट डिजाइन करना
हाल ही में, वर्डप्रेस ने डिज़ाइन किया गया एक नया ब्लॉक संपादक लॉन्च किया है लैंडिंग होमपेज और एक पेज डाउनलोड. उद्घोषणा मिश्रित प्रतिक्रियाएं आकर्षित इसके पाठकों से, सहित मैट मुललेनवेग (ऑटोमैटिक) जिन्होंने इस तरह के "सरल पेज" को डिजाइन और लॉन्च करने में लगे 33 दिनों पर टिप्पणी की। तुम खोज सकते हो यहाँ परदे के पीछे अतिरिक्त चर्चा.
जवाब में, पूटलप्रेस के जेमी मार्सलैंड ने बनाया यह यूट्यूब वीडियो जहां वह लगभग 20 मिनट में लगभग समान मुखपृष्ठ को पुन: प्रस्तुत करता है।
मार्सलैंड वीडियो पर टिप्पणी करते हुए, WP ट्रैवर्न की सारा गुडिंग लिखती हैं: "वह वही है जिसे कोई ब्लॉक संपादक के साथ एक शक्ति उपयोगकर्ता के रूप में वर्णित कर सकता है। वह जल्दी से पंक्तियों, स्तंभों और समूहों को चारों ओर से फेरबदल कर सकता है, आवश्यकतानुसार पैडिंग और मार्जिन को समायोजित कर सकता है, और प्रत्येक अनुभाग को डिजाइन के लिए संबंधित रंग प्रदान कर सकता है। इस बिंदु पर, यह ऐसा कुछ नहीं है जो अधिकांश औसत वर्डप्रेस उपयोगकर्ता कर सकते हैं। ”
हालांकि ब्लॉक संपादक ने एक लंबा सफर तय किया है, फिर भी अधिकांश थीम डेवलपर्स और सामान्य उपयोगकर्ताओं को इसके साथ जटिल लेआउट बनाने और डिजाइन करने के लिए दर्द बिंदु बढ़ रहे हैं।
TT2 गोफर ब्लॉक में वृद्धि जोड़ना
इस खंड में, मैं आपको बताऊंगा कि कैसे मैंने इसमें एन्हांसमेंट जोड़े हैं TT2 गोफर ब्लॉक थीम जिसका जिक्र मैंने अपने पिछले लेख में किया था। जिन विषयों का मैंने पहले वर्णन किया था, उनके कवर ब्लॉक से प्रेरित होकर, मैं थीम में तीन कवर टेम्प्लेट (लेखक, श्रेणी और सिंगल-कवर) जोड़ना चाहता था।
वेबसाइट ब्राउज़ करते समय, हम दो प्रकार के कवर हेडर देखते हैं। सबसे अधिक देखा जाने वाला शीर्षलेख कवर खंड है जो साइट शीर्षलेख (साइट शीर्षक और शीर्ष नेविगेशन) के साथ कवर ब्लॉक (जैसे, ट्वेंटी ट्वेंटी, ट्वेंटी ट्वेंटी-टू, वी, वाबी, फ्रॉस्ट, ब्राइट मोड, आदि) में मिश्रित है। हमें हेडर कवर सेक्शन भी मिलता है जो साइट हेडर के साथ मिश्रित नहीं होता है और ठीक नीचे स्थित होता है, जैसे कि: बीबीसी फ़्यूचर वेबसाइट। TT2 गोफर ब्लॉक थीम के लिए, मैंने बाद वाले को चुना।
कवर हेडर पैटर्न बनाना
सबसे पहले, आइए लेखक, एकल और अन्य (श्रेणियों, टैग) टेम्प्लेट के लिए कवर ब्लॉक का उपयोग करके कवर हेडर पैटर्न बनाएं। फिर हम उन्हें पैटर्न में बदल देंगे (जैसा कि बताया गया है यहाँ पहले) और संबंधित हेडर कवर पैटर्न को टेम्प्लेट में कॉल करें।
यदि आप ब्लॉक एडिटर के साथ काम करने से परिचित हैं, तो साइट एडिटर में कवर ब्लॉक्स का उपयोग करके अपने हेडर सेक्शन को डिज़ाइन करें और फिर कवर हेडर कोड को पैटर्न में बदलें। हालाँकि, यदि आप FSE संपादक से परिचित नहीं हैं, तो सबसे आसान तरीका है कि आप इससे पैटर्न कॉपी करें पैटर्न निर्देशिका एक पोस्ट में, आवश्यक संशोधन करें और इसे एक पैटर्न में परिवर्तित करें।
मेरे में पिछला सीएसएस-ट्रिक्स लेख, मैंने ब्लॉक पैटर्न बनाने और उपयोग करने पर विस्तार से चर्चा की। यहाँ वर्कफ़्लो का एक संक्षिप्त अवलोकन दिया गया है जिसका उपयोग मैं सिंगल पोस्ट कवर हेडर पैटर्न बनाने के लिए कर रहा हूँ:
सिंगल पोस्ट कवर हेडर पैटर्न
चरण 1: FSE इंटरफ़ेस का उपयोग करते हुए, चलिए एक नई रिक्त फ़ाइल बनाते हैं और बाएँ पैनल पर दिखाए गए अनुसार ब्लॉक संरचना का निर्माण शुरू करते हैं।
वैकल्पिक रूप से, यह पहले किसी पोस्ट या पेज में किया जा सकता है, और फिर मार्कअप को बाद में एक पैटर्न फ़ाइल में कॉपी और पेस्ट करें।
चरण 2: अगला, उपरोक्त मार्कअप को एक पैटर्न में बदलने के लिए, पहले हमें इसके कोड मार्कअप को कॉपी करना चाहिए और एक नए में पेस्ट करना चाहिए /patterns/header-single-cover.php हमारे कोड संपादक में। हमें आवश्यक पैटर्न फ़ाइल हेडर मार्कअप भी जोड़ना चाहिए (उदाहरण के लिए, शीर्षक, स्लग, श्रेणियां, डालने वाला, आदि)।
यहाँ का संपूर्ण कोड है /patterns/header-single-cover.php फ़ाइल:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
चरण 3: इस डेमो के लिए, मैंने इस्तेमाल किया है फोटो निर्देशिका से यह छवि एक भराव पृष्ठभूमि छवि के रूप में, और लागू किया आधी रात डुओटोन रंग। पोस्ट फीचर्ड इमेज को गतिशील रूप से उपयोग करने के लिए, हमें जोड़ना चाहिए "useFeaturedImage":true उपरोक्त फिलर छवि लिंक को के ठीक पहले बदलकर कवर ब्लॉक में "dimRatio":50 जैसे कि लाइन 10 को निम्न जैसा दिखना चाहिए:
वैकल्पिक रूप से, फिलर छवि को क्लिक करके भी बदला जा सकता है बदलें और चयन चुनिंदा छवि का प्रयोग करें विकल्प:
अब, हेडर कवर पैटर्न टेम्प्लेट, पोस्ट और पेज में कहीं भी उपयोग के लिए पैटर्न इंसर्टर पैनल में दिखाई देना चाहिए।
पुरालेख कवर शीर्षलेख
से प्रेरित होकर यह WP मधुशाला पोस्ट और लेखक टेम्पलेट हेडर बनाने के लिए चरण-दर-चरण वॉकथ्रू, मैं एक समान कवर हेडर बनाना चाहता था और TT2 गोफर थीम में भी जोड़ना चाहता था।
सबसे पहले, आइए इसके लिए आर्काइव कवर हेडर पैटर्न बनाएं author.html उपरोक्त कार्यप्रवाह का पालन करते हुए टेम्पलेट भी। इस मामले में, मैं इसे एक नए रिक्त पृष्ठ में बना रहा हूं, ब्लॉक जोड़कर (जैसा कि सूची दृश्य में नीचे दिखाया गया है):
कवर के लिए बैकग्राउंड में, मैंने सिंगल पोस्ट हेडर कवर में इस्तेमाल की गई उसी इमेज का इस्तेमाल किया।
चूंकि हम लेखक ब्लॉक पर एक लघु लेखक जीवनी प्रदर्शित करना चाहते हैं, इसलिए उपयोगकर्ता प्रोफ़ाइल पृष्ठ में एक जीवनी संबंधी विवरण भी जोड़ा जाना चाहिए, अन्यथा फ्रंट-एंड में एक रिक्त स्थान प्रदर्शित किया जाएगा।
निम्नलिखित का मार्कअप कोड है header-author-cover, कि हम अगले चरण में पैटर्न का उपयोग करेंगे:
Published by:
मार्कअप को a . में गुप्त करने के लिए header-author-cover पैटर्न, हमें पहले बताए अनुसार आवश्यक पैटर्न फ़ाइल हेडर मार्कअप जोड़ना चाहिए। संपादित करके header-author-cover.php पैटर्न, हम टैग, टैक्सोनॉमी और अन्य कस्टम टेम्प्लेट के लिए समान हेडर कवर बना सकते हैं।
RSI header-category-cover.php my . के लिए पैटर्न category.html टेम्पलेट GitHub पर उपलब्ध है.
हेडर कवर ब्लॉक के साथ टेम्पलेट बनाना
WordPress के 6.0 और हाल ही में गुटेनबर्ग 13.7 विस्तारित टेम्पलेट ब्लॉक संपादक में सुविधाओं का निर्माण करता है, इस प्रकार कई वर्डप्रेस उपयोगकर्ताओं के लिए कोडिंग के गहन ज्ञान के बिना, उनके अनुकूलित टेम्पलेट बनाने के लिए संभव बनाता है।
अधिक विस्तृत जानकारी और उपयोग के मामलों के लिए, यहां एक है जस्टिन टैडलॉक द्वारा पूरी तरह से अनुकूलन नोट.
ब्लॉक संपादक कवर टेम्प्लेट सहित विभिन्न प्रकार के टेम्प्लेट बनाने की अनुमति देता है। आइए संक्षेप में देखें कि संयोजन कैसे होता है कवर ब्लॉक और पोस्ट फीचर्ड इमेज ब्लॉक नए टेम्प्लेट के साथ UI बिना या कम कोडिंग कौशल के भी विभिन्न प्रकार के कवर कस्टम टेम्प्लेट बनाना आसान बनाता है।
गुटेनबर्ग 13.7 के साथ टेम्पलेट बनाना बहुत आसान बना दिया गया है। ब्लॉक टेम्प्लेट कैसे बनाएं कोड के साथ और साइट संपादक में में वर्णित है थीम हैंडबुक में और मेरा पिछला लेख.
कवर ब्लॉक के साथ लेखक टेम्पलेट
शीर्ष (शीर्षलेख अनुभाग) का मार्कअप author.html टेम्पलेट नीचे दिखाया गया है (पंक्ति 6):
...
...
...
... यहां कवर हेडर के स्क्रीनशॉट हैं author.html और category.html टेम्पलेट्स:
पूरा दोनों टेम्प्लेट के लिए कोड GitHub पर उपलब्ध है.
कवर ब्लॉक के साथ सिंगल पोस्ट
हमारे सिंगल पोस्ट में कवर ब्लॉक प्रदर्शित करने के लिए, हमें कॉल करना होगा header-cover-single pattern शीर्ष लेख अनुभाग के नीचे (पंक्ति 3):
....
....
....यहां एक स्क्रीन कैप्चर है जो हेडर कवर सेक्शन के साथ सिंगल पोस्ट का फ्रंट-एंड व्यू दिखा रहा है:
पूरा single-cover.html टेम्पलेट GitHub पर उपलब्ध है.
आप a . बनाने पर अतिरिक्त चरण-दर-चरण पूर्वाभ्यास ट्यूटोरियल पा सकते हैं हीरो हेडर पोस्ट सेक्शन और पोस्ट फीचर्ड इमेज बैकग्राउंड कवर ब्लॉक का उपयोग करना on WP मधुशाला और पूरी साइट संपादन वेबसाइट।
ये लो!
सहायक संसाधन
विशेष रुप से प्रदर्शित छवि कवर ब्लॉक
ब्लॉग पोस्ट
भले ही सामान्य रूप से ब्लॉक थीम हैं WordPress समुदाय के सदस्यों से बहुत सारे पुशबैक प्राप्त करना, मेरी राय में, वे वर्डप्रेस का भविष्य हैं, बहुत। ब्लॉक थीम के साथ, शौकिया थीम लेखक, गहरी कोडिंग कौशल और PHP और जावास्क्रिप्ट भाषाओं की महारत के बिना, अब इस लेख में वर्णित हीरो कवर सेक्शन के साथ जटिल लेआउट के साथ थीम बना सकते हैं। पैटर्न उपयोग करें और शैली भिन्नता.
एक शुरुआती गुटेनबर्ग उपयोगकर्ता के रूप में, मैं नए थीमिंग टूल जैसे . के साथ अधिक उत्साहित नहीं हो सकता था ब्लॉक थीम बनाएं प्लगइन और अन्य जो थीम लेखकों को बिना कोई कोड लिखे सीधे ब्लॉक एडिटर UI से निम्नलिखित प्राप्त करने की अनुमति देते हैं:
- (I) बनाना
- (ii) थीम फाइलों को अधिलेखित करना और निर्यात करना
- (iii) ब्लैंक या चाइल्ड थीम जेनरेट करें, और
- (iv) वर्तमान थीम की शैली भिन्नता को संशोधित और सहेजना
इसके अतिरिक्त, गुटेनबर्ग प्लगइन के हालिया पुनरावृत्तियों को सक्षम करने की अनुमति मिलती है द्रव टाइपोग्राफी और लेआउट संरेखण और अन्य शैलीगत नियंत्रणों का उपयोग केवल theme.json जावास्क्रिप्ट के बिना फ़ाइल और सीएसएस नियमों की एक पंक्ति।
नीचे अपनी टिप्पणियों और विचारों को पढ़ने और साझा करने के लिए धन्यवाद!