WordPress की Blocksy थीम: Companion से हेडर और ब्लॉग डिस्प्ले की सेटिंग

यह लेख जापानी मूल लेख का स्थानीयकृत संस्करण है। जापानी मूल लेख पढ़ें

Blocksy एक मुफ़्त और कई सुविधाओं वाली WordPress थीम है। ज़्यादातर सेटिंग “दिखावट” (Appearance) → “अनुकूलित करें” (Customize), यानी कस्टमाइज़र में प्रीव्यू देखते हुए की जा सकती हैं, और हेडर तथा फ़ुटर ड्रैग-एंड-ड्रॉप से बनाए जा सकते हैं। इस लेख में थीम और सहायक प्लगइन “Blocksy Companion” को इंस्टॉल करने, शुरू में तय किए जाने वाले रंग और फ़ॉन्ट, हेडर बनाने, ब्लॉग सूची और लेख पेज की डिस्प्ले सेटिंग, और चाइल्ड थीम तैयार करने तक की बातें सेटिंग के क्रम में समझाई गई हैं।

Blocksy की बनावट समझें

Blocksy तीन हिस्सों से मिलकर बना है।

• Blocksy (थीम का मुख्य हिस्सा): WordPress.org से मुफ़्त मिलता है। इसमें कस्टमाइज़र से डिज़ाइन सेटिंग और हेडर-फ़ुटर बिल्डर शामिल हैं
• Blocksy Companion (मुफ़्त प्लगइन): स्टार्टर साइट (डेमो डेटा) लोड करने और एक्सटेंशन जोड़ने का काम करता है
• Blocksy Pro (सशुल्क): अतिरिक्त हेडर तत्व, शर्त वाला डिस्प्ले, और ज़्यादा बारीक लेआउट सुविधाएँ जुड़ती हैं

पहले थीम और Companion के मेल से शुरू करें, और जब पता चले कि मुफ़्त दायरे में ज़रूरी सुविधा कम पड़ रही है तब Pro पर विचार करें, यही सही क्रम है (सुविधाओं का बँटवारा और क़ीमतें बदल सकती हैं, इसलिए अक्टूबर 2026 तक की आधिकारिक साइट की जानकारी से पुष्टि करें)।

साथ ही, Blocksy की बनावट क्लासिक थीम के क़रीब है और यह ब्लॉक एडिटर को भी सपोर्ट करती है। जो ब्लॉक थीम साइट एडिटर (“दिखावट” → “एडिटर”) से पूरा डिज़ाइन बनाती हैं, उनसे इसके काम करने की जगह अलग है। इसलिए याद रखें: “पूरे साइट का डिज़ाइन कस्टमाइज़र में, लेख और पेज की सामग्री ब्लॉक एडिटर में”, इससे उलझन नहीं होगी।

इंस्टॉल करना और Companion जोड़ना

1. “दिखावट” (Appearance) → “थीम” (Themes) → “नई थीम जोड़ें” (Add New Theme) में “Blocksy” खोजें, इंस्टॉल करें और सक्रिय करें
2. सक्रिय करने के बाद दिखने वाले सुझाव से, या एडमिन में जुड़ने वाले Blocksy के डैशबोर्ड से, Blocksy Companion को इंस्टॉल और सक्रिय करें

WP-CLI से इसे इस तरह इंस्टॉल किया जा सकता है।

wp theme install blocksy --activate
wp plugin install blocksy-companion --activate

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

स्टार्टर साइट इस्तेमाल करें या नहीं

Companion इंस्टॉल करने पर Blocksy के डैशबोर्ड से “स्टार्टर साइट” लोड की जा सकती है। डिज़ाइन किए हुए पेज, कस्टमाइज़र की सेटिंग और ज़रूरी प्लगइन एक साथ आ जाते हैं, इसलिए नई साइट में तैयार रूप का अंदाज़ा जल्दी लग जाता है।

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

शुरू में तय करने वाली सामान्य सेटिंग

“दिखावट” → “अनुकूलित करें” खोलने पर Blocksy की सेटिंग मदें दिखती हैं। मदों के नाम अक्सर हिंदी या स्थानीय भाषा में अनुवादित होते हैं, पर संस्करण के अनुसार लिखावट बदल सकती है। सबसे पहले पूरी साइट पर असर डालने वाली ये दो चीज़ें तय करें।

रंग (कलर पैलेट)

सामान्य सेटिंग में रंग की सेटिंग से साइट में इस्तेमाल होने वाला बुनियादी रंग पैलेट तय करें। Blocksy इस तरह बनी है कि टेक्स्ट का रंग, लिंक का रंग और बटन का रंग इसी पैलेट के रंगों का हवाला देते हैं, इसलिए पैलेट बदलने पर पूरी साइट की रंग-योजना एक साथ बदल जाती है।

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

फ़ॉन्ट (टाइपोग्राफ़ी)

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

वेब फ़ॉन्ट के रूप में जापानी फ़ॉन्ट लोड करने पर फ़ाइल बड़ी होती है और पेज की गति पर असर पड़ सकता है। इस्तेमाल करें तो वज़न (weight) के प्रकार कम रखें और PageSpeed Insights आदि से गति पर असर जाँच लें।

हेडर बनाना

कस्टमाइज़र में हेडर की मद खोलने पर स्क्रीन के नीचे की ओर हेडर बिल्डर दिखता है। हेडर ऊपरी, बीच की और निचली पंक्तियों में बँटा होता है, और लोगो (साइट का शीर्षक), मेन्यू, खोज, बटन जैसे तत्वों को हर पंक्ति के बाएँ, बीच और दाएँ में खींचकर रखा जाता है।

जहाँ लोग अक्सर अटकते हैं वह यह है कि कंप्यूटर और स्मार्टफ़ोन के हेडर की सेटिंग अलग-अलग होती हैं। बिल्डर के दृश्य को स्मार्टफ़ोन पर बदलने से दूसरी व्यवस्था दिखती है। स्मार्टफ़ोन में मेन्यू को हैमबर्गर आइकन (ट्रिगर) से खुलने वाले “ऑफ़-कैनवास” के अंदर रखना बुनियादी तरीका है। सिर्फ़ कंप्यूटर वाले की सेटिंग करके प्रकाशित कर दें तो स्मार्टफ़ोन में मेन्यू न दिखने जैसी समस्या हो सकती है, इसलिए दोनों दृश्यों में जाँच करें।

किसी तत्व पर क्लिक करने पर उसकी सेटिंग (अक्षर का आकार, रंग, मार्जिन आदि) बाईं ओर दिखती है। मेन्यू में कौन-सी मदें दिखेंगी, यह “दिखावट” → “मेन्यू” (Menus) में बनाएँ और हेडर के मेन्यू तत्व को असाइन करें।

फ़ुटर भी इसी सोच वाले फ़ुटर बिल्डर से बनता है। विजेट क्षेत्र या कॉपीराइट लिखावट की जगह बदलनी हो तो फ़ुटर की मद से संपादित करें।

ब्लॉग सूची और लेख पेज का डिस्प्ले

कस्टमाइज़र में पोस्ट सूची (ब्लॉग), अलग-अलग पोस्ट, पेज जैसे पेज के प्रकार के अनुसार सेटिंग मदें दी गई हैं।

• पोस्ट सूची: कार्ड प्रकार या सूची प्रकार जैसा क्रम, हर पंक्ति में कॉलम की संख्या, फ़ीचर्ड इमेज (Featured image) का अनुपात, अंश (Excerpt) की लंबाई, दिखाई जाने वाली पोस्ट जानकारी (प्रकाशन की तारीख़, श्रेणी आदि)
• अलग-अलग पोस्ट: सामग्री क्षेत्र की चौड़ाई, साइडबार है या नहीं और उसकी जगह, शीर्षक वाले हिस्से का प्रदर्शन, संबंधित लेख और लेखक की जानकारी का प्रदर्शन
• पेज: अलग-अलग पोस्ट की तरह चौड़ाई और साइडबार की सेटिंग

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

किसी ख़ास लेख का ही लेआउट बदलना हो तो पोस्ट की एडिट स्क्रीन के साइडबार में दिखने वाली Blocksy की सेटिंग से सिर्फ़ उस लेख का साइडबार हटाने जैसे निर्देश दिए जा सकते हैं।

चाइल्ड थीम तैयार करना

थीम की फ़ाइलें सीधे संपादित करने पर थीम अपडेट होते ही बदलाव मिट जाते हैं। थोड़ा CSS जोड़ना हो तो कस्टमाइज़र का “अतिरिक्त CSS” (Additional CSS) काफ़ी है। PHP का कस्टमाइज़ेशन या टेम्पलेट को ओवरराइड करना हो, तब चाइल्ड थीम बनाएँ।

Blocksy की आधिकारिक साइट पर चाइल्ड थीम का ढाँचा मिलता है। ख़ुद बनाना हो तो wp-content/themes/blocksy-child/ में यह style.css रखें,

/*
Theme Name: Blocksy Child
Template: blocksy
*/

और उसी फ़ोल्डर के functions.php में चाइल्ड थीम की स्टाइल लोड करें।

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'blocksy-child-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}, 20 );

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

अपडेट और संचालन की सावधानियाँ

Blocksy और Companion के अपडेट बार-बार आते हैं। अपडेट से पहले बैकअप लें और अपडेट के बाद हेडर, लेख पेज और स्मार्टफ़ोन डिस्प्ले की एक बार पूरी जाँच करें। डिस्प्ले बिगड़ा हो तो कैश प्लगइन या CDN का कैश हटाकर दोबारा जाँचें। CSS को जोड़ने-संपीड़ित करने वाले स्पीड प्लगइन इस्तेमाल हों तो पुरानी CSS रह जाने से डिस्प्ले बिगड़ा हुआ लग सकता है।

सारांश

• Blocksy को थीम और Blocksy Companion के मेल से शुरू करें, और कमी का पता चलने के बाद ही Pro पर विचार करें
• स्टार्टर साइट नई साइट या स्टेजिंग वातावरण में इस्तेमाल करें; मौजूदा साइट में सेटिंग के ओवरराइड होने से सावधान रहें
• रंग कलर पैलेट से और अक्षर टाइपोग्राफ़ी से पूरे साइट के लिए तय करें। जापानी साइट में लैटिन फ़ॉन्ट जापानी अक्षरों पर असर नहीं करता, यह ध्यान रखें
• हेडर बिल्डर में कंप्यूटर और स्मार्टफ़ोन की व्यवस्था अलग है। दोनों दृश्यों में जाँचें, और PHP छूना हो तो चाइल्ड थीम का इस्तेमाल करें

• Blocksy में कस्टम फ़ुटर बनाने का तरीका
• WordPress की थीम सुरक्षित रूप से बदलने का तरीका

WordPress के बारे में सवाल हैं? इस साइट के प्रकाशक जापान में हैं और जापानी में जवाब देते हैं। संपर्क (जापानी)