स्टार्टर थीम से कस्टम WordPress थीम कैसे बनाएँ

एक पल हर WordPress डिज़ाइनर जानता है। आपने 40 डेमो साइट, एक पेज बिल्डर और वेब ब्राउज़र से भी ज़्यादा टैब वाले सेटिंग पैनल के साथ एक और मल्टीपर्पज़ थीम इंस्टॉल की है। आपको बस अपने क्लाइंट के रंगों वाला एक साफ़ ब्लॉग चाहिए था, और अब आप थीम से उन चीज़ों को हटाने के लिए जूझ रहे हैं जो आपने कभी माँगी ही नहीं। साइट धीमी है, और हर अपडेट जोखिम भरा लगता है।

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

थीम असल में क्या है

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

कम से कम, एक क्लासिक थीम को सिर्फ़ दो फ़ाइलें चाहिए: style.css, जिसमें ऐसी हेडर टिप्पणी हो जिसे WordPress पहचानता है, और index.php। बाक़ी सब इन्हीं पर बनता है।

/*
Theme Name: Acme Studio
Author: Acme
Description: A lightweight custom theme for Acme Studio.
Version: 1.0.0
License: GPL v2 or later
Text Domain: acme-studio
*/

मुख्य टेम्पलेट फ़ाइलें

दो फ़ंक्शन कॉल ज़रूरी हैं: header.php में head टैग बंद होने से ठीक पहले wp_head(), और footer.php में body टैग बंद होने से ठीक पहले wp_footer()। प्लगइन अपनी स्क्रिप्ट और स्टाइल जोड़ने के लिए इन पर निर्भर रहते हैं, और इनके बिना कई प्लगइन टूट जाते हैं।

टेम्पलेट हायरार्की, सरल शब्दों में

जब कोई किसी URL पर आता है, WordPress सबसे ख़ास उपलब्ध टेम्पलेट ढूँढता है और एक मिलने तक क़दम-दर-क़दम पीछे लौटता है। एक ब्लॉग पोस्ट के लिए यह मोटे तौर पर ऐसे जाँचता है: उस ख़ास पोस्ट का टेम्पलेट, फिर single-post.php, फिर single.php, फिर singular.php, फिर index.php।

यह बहुत काम का है। आप सिर्फ़ index.php से शुरू कर सकते हैं और डिज़ाइन की ज़रूरत के हिसाब से ज़्यादा ख़ास टेम्पलेट जोड़ सकते हैं। page.php या archive.php के बिना भी स्टार्टर थीम बिल्कुल ठीक चलती है: जब तक आप वे फ़ाइलें नहीं बनाते, पेज और लिस्टिंग बस index.php इस्तेमाल करते हैं, और ये फ़ाइलें आम तौर पर index.php को कॉपी करके और लेआउट बदलकर बनाई जाती हैं। book नाम का कस्टम पोस्ट टाइप, अगर single-book.php मौजूद है तो उसे अपने-आप इस्तेमाल करता है, और इसी तरह कस्टम कंटेंट को अपना लेआउट मिलता है; WordPress कस्टम पोस्ट टाइप पर हमारी गाइड इसे विस्तार से बताती है।

functions.php: जहाँ थीम सेट होती है

functions.php फ़ीचर चालू करती है और एसेट लोड करती है। एक आम सेटअप फ़ंक्शन:

function acme_studio_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'acme_studio_setup' );

title-tag WordPress (और SEO प्लगइन) को पेज टाइटल संभालने देता है, post-thumbnails फ़ीचर्ड इमेज चालू करता है, custom-logo लोगो का विकल्प जोड़ता है, और html5 कोर मार्कअप को आधुनिक HTML पर ले जाता है। स्टाइलशीट और स्क्रिप्ट wp_enqueue_scripts हुक पर wp_enqueue_style() और wp_enqueue_script() से लोड की जाती हैं, हेडर में कभी सीधे नहीं लिखी जातीं।

स्टार्टर थीम से शुरुआत

हर फ़ाइल शून्य से लिखना अच्छा अभ्यास है, लेकिन असली प्रोजेक्ट के लिए स्टार्टर थीम घंटों बचाती है। WordPress Theme Generator एक साफ़ क्लासिक थीम बनाता है, जिसमें आपका नाम, विवरण, लेखक, वर्ज़न, text domain और लाइसेंस पहले से भरे होते हैं। इसमें मुख्य टेम्पलेट (index, header, footer, sidebar, single और 404), पोस्ट के लिए दोबारा इस्तेमाल होने वाले template parts, एक मुख्य JavaScript फ़ाइल और एक README शामिल हैं। हर फ़ंक्शन और कॉन्स्टेंट के आगे आपकी थीम का स्लग लगा होता है ताकि वह प्लगइन से न टकराए।

आप वैकल्पिक अतिरिक्त चीज़ें भी चुन सकते हैं:

• विजेट एरिया: एक मुख्य साइडबार और एक फ़ुटर विजेट एरिया।
• Customizer सेटिंग: एक Theme Options पैनल, जिसमें CSS वेरिएबल से लागू होने वाला एक्सेंट रंग और फ़ुटर टेक्स्ट का फ़ील्ड है।
• inc/post-types.php में एक स्टार्टर कस्टम पोस्ट टाइप, इस नोट के साथ कि लंबे समय तक रहने वाला कंटेंट प्लगइन में होना चाहिए।

यह थीम फ़ोल्डर वाली ZIP के रूप में डाउनलोड होती है, Appearance → Themes → Add New → Upload Theme के लिए तैयार।

तैयार डिज़ाइन तक का व्यावहारिक रास्ता

1. लोकल पर काम करें

किसी लोकल डेवलपमेंट टूल से अपने कंप्यूटर पर WordPress इंस्टॉल करें, और थीम को wp-content/themes में रखें। आप फ़ाइलें एडिट करके तुरंत रीफ़्रेश कर सकते हैं, लाइव साइट को जोखिम में डाले बिना।

2. ग्लोबल स्टाइल से शुरू करें

बनी हुई स्टाइलशीट :root में --color-primary, --color-text और --spacing-base जैसे CSS वेरिएबल इस्तेमाल करती है। पहले वहाँ अपने ब्रांड के रंग, फ़ॉन्ट और स्पेसिंग सेट करें; पूरी थीम उन्हें अपना लेती है।

3. हेडर और फ़ुटर बनाएँ

ये हर पेज पर दिखते हैं, इसलिए इन्हें जल्दी सही करने से पूरी साइट को उसका चरित्र मिल जाता है। wp_head() और wp_footer() अपनी जगह रहने दें।

4. कंटेंट को स्टाइल करें

किसी साइट के ज़्यादातर पेज पोस्ट और पेज होते हैं। सजावटी चीज़ें जोड़ने से पहले मुख्य टेक्स्ट को पढ़ने में आरामदायक बनाएँ, समझदार लाइन लंबाई, साफ़ हेडिंग और अच्छी स्पेसिंग के साथ।

5. ख़ास टेम्पलेट तभी जोड़ें जब ज़रूरत हो

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

6. इसे तेज़ रखें

कस्टम थीम किसी भी मल्टीपर्पज़ थीम से हल्का होने का मौक़ा है। सिर्फ़ वही CSS और JavaScript लोड करें जो इस्तेमाल होती है, इमेज का साइज़ सही रखें, और लेआउट खिसकने से बचाने के लिए उन्हें आयाम दें। नतीजा Core Web Vitals Checker से जाँचें; हमारी Core Web Vitals गाइड बताती है कि पहले क्या ठीक करें।

थीम में क्या होना चाहिए और क्या नहीं

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

सुरक्षा और अच्छी आदतें

थीम बहुत सारा डेटा दिखाती हैं, इसलिए एस्केप करना ज़रूरी है: जब भी कुछ ऐसा आउटपुट करें जो किसी यूज़र या डेटाबेस से आ सकता है, तो टेक्स्ट के लिए esc_html(), एट्रिब्यूट के लिए esc_attr() और लिंक के लिए esc_url() इस्तेमाल करें। WordPress Functions Reference में झटपट उदाहरण हैं।

कुछ और आदतें जो जल्दी अपनानी चाहिए: पहले दिन से थीम को वर्ज़न कंट्रोल में रखें, text domain को थीम फ़ोल्डर के नाम से मेल खाता रखें ताकि अनुवाद काम करें, और जब आपको अपनी थीम बनाने के बजाय सिर्फ़ किसी और की थीम में बदलाव करना हो, तो child theme को प्राथमिकता दें।

आपकी अपनी थीम, आपकी अपनी रफ़्तार

कस्टम थीम का महत्वाकांक्षी होना ज़रूरी नहीं। एक साफ़ स्टार्टर से शुरू करें, अपने रंग और फ़ॉन्ट सेट करें, हेडर, फ़ुटर और पोस्ट टेम्पलेट बनाएँ, और ज़्यादा तभी जोड़ें जब साइट को उसकी ज़रूरत हो। नतीजा एक ऐसी साइट है जो जल्दी लोड होती है, ठीक वही करती है जो उसे करना चाहिए, और आपको कभी उन सेटिंग से नहीं जूझना पड़ता जो आपने माँगी ही नहीं थीं।