theme.json के साथ कस्टम वर्डप्रेस ब्लॉक थीम कैसे बनाएं: एक चरण-दर-चरण गाइड

सारांश

फुल साइट एडिटिंग (FSE) के साथ कस्टम वर्डप्रेस ब्लॉक थीम बनाना कठिन हो सकता है, लेकिन theme.json प्रक्रिया को सरल बनाता है। यह गाइड आपको न्यूनतम ब्लॉक थीम स्थापित करने, theme.json में रंग और टाइपोग्राफी जैसी वैश्विक शैलियों को परिभाषित करने, और ब्लॉक मार्कअप का उपयोग करके कस्टम टेम्पलेट बनाने में मार्गदर्शन करता है। आप ब्लॉक पैटर्न और शैली विविधताएँ जोड़ना सीखेंगे, जिससे PHP टेम्पलेट फ़ाइलों के बिना पूरी तरह से डिज़ाइन करने योग्य साइट सक्षम होती है। हम सामान्य गलतियों को कवर करेंगे, जैसे क्लासिक और ब्लॉक थीम सुविधाओं का मिश्रण, और दिखाएंगे कि अपनी थीम का परीक्षण कैसे करें। अंत तक, आपके पास उत्पादन के लिए तैयार एक आधुनिक, विस्तार योग्य ब्लॉक थीम होगी। यह दृष्टिकोण तेज़, अधिक दृश्य विकास के लिए वर्डप्रेस की नवीनतम क्षमताओं का लाभ उठाता है।

परिचय

फुल साइट एडिटिंग (FSE) ने वर्डप्रेस थीम विकास में क्रांति ला दी है, जिससे आप अपनी साइट के हर भाग को दृश्य रूप से डिज़ाइन कर सकते हैं। लेकिन कई डेवलपर्स अभी भी क्लासिक थीम पर निर्भर हैं या स्क्रैच से ब्लॉक थीम बनाने में संघर्ष करते हैं। FSE की शक्ति को अनलॉक करने की कुंजी theme.json है - एक कॉन्फ़िगरेशन फ़ाइल जो वैश्विक शैलियों, सेटिंग्स और टेम्पलेट्स को नियंत्रित करती है। यह लेख theme.json का उपयोग करके कस्टम ब्लॉक थीम बनाने के लिए एक व्यावहारिक, चरण-दर-चरण मार्गदर्शिका प्रदान करता है। आप फ़ोल्डर संरचना स्थापित करना, रंग पैलेट और टाइपोग्राफी प्रीसेट परिभाषित करना, ब्लॉक मार्कअप के साथ कस्टम टेम्पलेट बनाना, और शैली विविधताएँ जोड़ना सीखेंगे। अंत तक, आपके पास एक उत्पादन-तैयार ब्लॉक थीम होगी जिसे बनाए रखना और विस्तारित करना आसान है। आइए गोता लगाएँ और FSE विकास को रहस्यमय बनाएँ।

FSE 2026 में वर्डप्रेस डिज़ाइन के भविष्य को कैसे आकार दे रहा है, इसके व्यापक दृष्टिकोण के लिए, देखें Gutenberg FSE: 2026 में वर्डप्रेस डिज़ाइन का भविष्य।

1. न्यूनतम ब्लॉक थीम सेट करना

एक ब्लॉक थीम के लिए कम से कम दो फ़ाइलों की आवश्यकता होती है: style.css और index.html। आइए उन्हें बनाएँ।

फ़ोल्डर संरचना

अपनी wp-content/themes/ निर्देशिका में my-block-theme नामक एक फ़ोल्डर बनाएँ। अंदर रखें:

• style.css
• index.html
• (वैकल्पिक) theme.json

style.css

भले ही ब्लॉक थीम CSS पर कम निर्भर करती हैं, थीम पहचान के लिए style.css अभी भी आवश्यक है:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: एक कस्टम ब्लॉक थीम theme.json के साथ बनाई गई।
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

Requires at least: 5.9 पंक्ति यह सुनिश्चित करती है कि थीम FSE सुविधा के साथ काम करे।

index.html

यह आपका फ़ॉलबैक टेम्पलेट है। इसे ब्लॉक मार्कअप से शुरू होना चाहिए। एक सरल लेआउट बनाएँ:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

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

चेतावनी: ब्लॉक थीम में header.php या footer.php जैसी PHP टेम्पलेट फ़ाइलें नहीं होनी चाहिए। क्लासिक और ब्लॉक टेम्पलेट्स को मिलाने से FSE टूट जाएगा।

थीम सक्रिय करना

फ़ोल्डर को FTP या zip इंस्टॉल के माध्यम से अपलोड करें, और इसे सक्रिय करें। आपको अपनी न्यूनतम संरचना के साथ एक खाली साइट दिखनी चाहिए। अगला, हम इसे theme.json के साथ स्टाइल करेंगे।

2. theme.json में महारत हासिल करना: वैश्विक शैलियाँ और सेटिंग्स

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

मूल संरचना

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "प्राथमिक"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "द्वितीयक"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "पृष्ठभूमि"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "सिस्टम"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "सेरिफ़"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "छोटा"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "मध्यम"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "बड़ा"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

यह एक रंग पैलेट, फ़ॉन्ट परिवार, फ़ॉन्ट आकार और वैश्विक शैलियों को परिभाषित करता है। var() फ़ंक्शन वर्डप्रेस द्वारा स्वचालित रूप से उत्पन्न CSS कस्टम गुणों को संदर्भित करते हैं। उपयोगकर्ता तब साइट एडिटर में इन्हें बदल सकते हैं।

टिप: स्थिरता के लिए CSS कस्टम गुणों का उपयोग करें। CSS फ़ाइलों में मानों को हार्डकोड करने से बचें; theme.json को एकमात्र सत्य स्रोत बनने दें।

3. कस्टम टेम्पलेट बनाना

ब्लॉक टेम्पलेट ब्लॉक मार्कअप के साथ HTML फ़ाइलें हैं। वे क्लासिक टेम्पलेट फ़ाइलों के समान एक पदानुक्रम का पालन करते हैं। उदाहरण के लिए, एकल पोस्ट के लिए single.html बनाएँ:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

इसी तरह, page.html, archive.html, आदि बनाएँ। आप क्वेरी लूप के अंदर wp:post-template ब्लॉक जोड़कर कस्टम टेम्पलेट भी बना सकते हैं।

उन्नत अनुकूलन के लिए, कस्टम ब्लॉक बनाने पर विचार करें। जानें कैसे Beyond Basic Blocks: Crafting Custom Gutenberg Blocks for Enhanced WordPress Functionality में।

टेम्पलेट भाग

पुन: प्रयोज्य भागों के लिए parts/ फ़ोल्डर बनाएँ। उदाहरण के लिए, header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

और footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 मेरी साइट</p>
<!-- /wp:paragraph -->

4. ब्लॉक पैटर्न और शैली विविधताएँ जोड़ना

ब्लॉक पैटर्न पूर्व-डिज़ाइन किए गए लेआउट हैं। उन्हें patterns/ फ़ोल्डर में परिभाषित करें। patterns/hero.php बनाएँ:

<?php
/**
 * Title: हीरो
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">स्वागत है</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">यह एक कस्टम हीरो सेक्शन है</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

शैली विविधताएँ उपयोगकर्ताओं को संपूर्ण लुक स्विच करने की अनुमति देती हैं। styles/default.json और styles/dark.json बनाएँ जो थीम सेटिंग्स को ओवरराइड करते हैं।

5. चेतावनियाँ और सर्वोत्तम अभ्यास

• प्रदर्शन: theme.json कैश किया जाता है। परिवर्तनों के बाद कैश साफ़ करें। यदि आवश्यक हो तो wp_register_theme_json हुक का उपयोग करें।
• पिछड़ी संगतता: ब्लॉक थीम केवल वर्डप्रेस 5.9 से काम करती हैं। यदि आपकी साइट को पुराने संस्करणों का समर्थन करना चाहिए, तो हाइब्रिड दृष्टिकोण पर विचार करें लेकिन टेम्पलेट फ़ाइलों को मिलाने से बचें।
• चाइल्ड थीम: ब्लॉक थीम का उपयोग क्लासिक चाइल्ड थीम के लिए पैरेंट थीम के रूप में किया जा सकता है, लेकिन इसके विपरीत नहीं। पैरेंट ब्लॉक थीम घोषित करने के लिए style.css में template का उपयोग करें।
• अंतर्राष्ट्रीयकरण: अनुवाद योग्य स्ट्रिंग के लिए PHP टेम्पलेट भागों के अंदर __() फ़ंक्शन का उपयोग करें। ब्लॉक मार्कअप में, textDomain विशेषता के माध्यम से टेक्स्ट डोमेन निर्दिष्ट करें।

प्लगइन विकास सर्वोत्तम अभ्यासों के बारे में अधिक जानकारी के लिए, देखें Building Robust WordPress Plugins: A Practical Guide to Best Practices।

निष्कर्ष

theme.json के साथ कस्टम ब्लॉक थीम बनाना आपको PHP को छुए बिना पूरी तरह से डिज़ाइन करने योग्य साइट बनाने में सक्षम बनाता है। इस गाइड का पालन करके, आपने एक न्यूनतम थीम स्थापित की है, वैश्विक शैलियों को परिभाषित किया है, कस्टम टेम्पलेट बनाए हैं, और पैटर्न जोड़े हैं। अच्छी तरह से परीक्षण करना याद रखें, विशेष रूप से संग्रह पृष्ठ या कस्टम पोस्ट प्रकार जैसे किनारे के मामलों के लिए। जैसे-जैसे वर्डप्रेस विकसित होता है, ब्लॉक थीम मानक बन जाएंगी। अपने वर्कफ़्लो को सुव्यवस्थित करने और ग्राहकों को अद्वितीय लचीलापन प्रदान करने के लिए आज ही FSE का लाभ उठाना शुरू करें।

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

अपनी ब्लॉक थीम को लाइव लेने के लिए तैयार हैं? एक सादे-पाठ विवरण के साथ, आप एक पूरी तरह कार्यात्मक लैंडिंग पृष्ठ या वेबसाइट उत्पन्न कर सकते हैं—कोई कोडिंग आवश्यक नहीं।