आपने WordPress Theme चुना; अब सवाल है कि Website का Logo, रंग, Font, Header और Footer कहाँ से बदलें? हर WordPress Site पर बटन एक जैसे नहीं होते। वजह है कि Block Theme और Classic Theme का Design Workflow अलग है। इस पाठ में दोनों रास्ते Classroom के उदाहरणों से समझेंगे।
सावधानी: हमारे उदाहरण सीखने के लिए हैं। DealYou.in पर चल रहे Astra Child Theme, Header, CSS या Live Templates को अभ्यास के लिए मत बदलें। किसी अलग Test Site या Offline Planning Sheet पर अभ्यास करें।
इस पाठ में आप क्या सीखेंगे?
- Block Theme और Classic Theme में Editor का सही रास्ता पहचानना
- Styles से Color, Typography और Layout समझना
- Templates, Template Parts और Patterns में अंतर
- Site Logo, Site Title और Site Icon का काम समझना
- Mobile Preview और सुरक्षित Save/Undo Workflow अपनाना
- Live Website बदले बिना एक Classroom Design Plan बनाना
1. दो तरह के Design रास्ते क्यों मिलते हैं?
WordPress में Appearance → Editor वाला Site Editor आम तौर पर सक्रिय Block Theme के साथ मिलता है। इससे Site के अलग-अलग हिस्से Blocks के रूप में बदलते हैं। Appearance → Customize वाला Customizer Classic Theme या उसके Support के आधार पर दिख सकता है। दोनों रास्ते हर Site पर एक साथ मिलना जरूरी नहीं।
इसका मतलब “Editor नहीं दिख रहा” कोई खराबी नहीं है। पहले Appearance → Themes में Active Theme देखिए। DealYou.in का उदाहरण Astra Child है, इसलिए उसके Classic/Customizer Workflow को Block Theme के Site Editor से न मिलाएँ।
2. Site Editor का नक्शा समझें
Block Theme की Test Site खोलकर Dashboard → Appearance → Editor जाएँ। Editor के Navigation में Site Identity, Styles, Templates, Patterns, Pages और Navigation जैसे Options दिख सकते हैं; स्क्रीन WordPress Version और Theme पर निर्भर करेगी।
इसे Classroom की अलमारी समझिए: Styles = पूरे स्कूल के रंग और Font; Templates = अलग कक्षाओं का Layout; Template Parts = हर कक्षा का साझा Header/Footer; Patterns = तैयार सजावट के हिस्से। ये चारों अलग काम करते हैं।
3. Styles: Colors और Typography
Styles से पूरे Theme या कुछ Blocks के सामान्य रंग, Typography और Spacing बदले जा सकते हैं। उदाहरण के लिए Brand के दो रंग तय करें—गहरा नीला Heading के लिए और नारंगी Buttons/Highlights के लिए। हर Section में नया रंग रखने से विद्यार्थी का ध्यान भटकता है।
Typography में Heading और Body Font के विकल्प Theme पर निर्भर करते हैं। हिंदी Website में ऐसा Font चुनें जिसमें Devanagari अक्षर सही दिखें। मोटे अक्षरों के साथ सही Line Height और Contrast पढ़ने को आसान बनाते हैं।
4. Font Library: कौन-सी Font जोड़ें?
WordPress Site Editor में समर्थित Setup पर Font Library से Fonts Manage या Install करने का विकल्प मिल सकता है। Library और Upload विकल्प Theme/Version/Permission पर निर्भर होते हैं; किसी Screen पर न दिखने से गलत Version का अनुमान न लगाएँ।
Font चुनते समय उसका License, हिंदी Glyph Support, Loading Performance और वास्तविक फोन पर Rendering जाँचें। एक अच्छी हिंदी Body Font और एक स्पष्ट Heading Font पर्याप्त हैं; हर Paragraph में अलग Font लगाने से Site Professional नहीं लगती।
5. Templates और Page Content का फर्क
Template कई Pages/Posts का ढाँचा तय करता है, जैसे Single Post या Page Template। Page/Post Content उस एक Article के शब्द और चित्र हैं। किसी Shared Single-Post Template में बदलाव कई Articles को एक साथ प्रभावित कर सकता है।
उदाहरण: यदि Single Post Template से Title छिपा दिया तो सिर्फ एक Lesson नहीं, अनेक Blog Posts पर असर हो सकता है। इसलिए पहले देखें कि आप एक Post Edit कर रहे हैं या उसका Global Template। बदलाव से पहले Preview और Backup रखें।
6. Template Parts: Header और Footer
Header में अक्सर Logo, Menu और कभी Search Button होता है। Footer में Contact, Privacy और दूसरे उपयोगी Links होते हैं। Block Theme में Header/Footer एक Template Part के रूप में Patterns या Templates के अंदर Manage हो सकते हैं।
Template Part साझा हिस्सा होता है। उसमें Logo या Navigation बदलना कई Pages पर असर डाल सकता है। Classroom Exercise में इसे सिर्फ Demo Theme पर देखें; DealYou.in के वास्तविक Header/Footer को स्वीकृति के बिना न छुएँ।
7. Patterns: तैयार Design Blocks
Pattern पहले से तैयार Blocks का समूह है—जैसे Hero Section, Features Grid या Call-to-Action। Pattern जोड़ने से शुरुआत आसान होती है; लेकिन उसे अपने पाठकों के हिसाब से Text, Images और Colors के साथ ठीक करें।
Synced Pattern के बदलाव उससे जुड़े कई स्थानों पर दिखाई दे सकते हैं, जबकि सामान्य Unsynced Pattern की Copy अलग रहती है। Pattern और Template Part को समान समझकर Global बदलाव न करें।
8. Site Identity: Logo, Title और Icon
Site Logo Header में Branding के लिए उपयोग हो सकता है। Site Title Website का नाम है, जबकि Site Icon Browser Tab या कुछ अन्य जगह दिखने वाला छोटा Symbol होता है। Google Search में Favicon दिखने के लिए Google की अतिरिक्त शर्तें भी लागू हो सकती हैं।
एक जैसा Logo हर जगह चिपकाने के बजाय उसका साफ और उचित आकार रखें। अनावश्यक भारी Image Page Speed कम कर सकती है। Site Icon छोटा होने पर भी पहचान में आने वाला होना चाहिए—बहुत छोटे अक्षर उसमें धुँधले हो जाते हैं।
9. Classic Themes में Customizer
Classic Theme Support होने पर Appearance → Customize खोलें। Site Identity, Colors, Menus, Widgets या Header Options Theme के हिसाब से दिख सकते हैं। कई Themes अपने अलग Panels भी देते हैं; इसलिए किसी Guide का हर Menu आपके Dashboard में मिलना अनिवार्य नहीं।
उदाहरण के लिए Astra जैसे Theme में Header Builder या दूसरे Design विकल्प मिल सकते हैं। उन्हें सिर्फ देखने का अभ्यास करें; Publish दबाने से पहले बदलावों की Preview और पूरे Site पर असर जाँचें।
10. Mobile, Tablet और Desktop के लिए Design
एक अच्छा Header Desktop पर सुंदर और 320px Phone पर बेकार नहीं होना चाहिए। Preview में Logo, Menu Button, Heading Wrap, Button Width, Footer Links और हिंदी Charts की Readability देखें। Responsive Preview उपयोगी है, पर असली Phone Test का विकल्प नहीं।
कुछ आधुनिक Versions और Themes में Viewport-specific Styling/Visibility Settings उपलब्ध होती हैं। लेकिन सभी Themes या सभी Blocks में समान Options नहीं मिलते। जरूरत से ज्यादा Mobile-specific Tricks लगाने के बजाय सरल Responsive Layout रखें।
11. Styles Revisions और सुरक्षित Undo
Site Editor में समर्थित Styles के लिए Revisions या Reset जैसे विकल्प मिल सकते हैं। हर प्रकार के Edit का Undo एक जैसा नहीं होता, इसलिए उन्हें पूर्ण Backup का विकल्प न मानें।
सही Workflow: पहले Backup या Staging → छोटे बदलाव → Desktop और Mobile Preview → Save → Frontend Check। यदि Template या Pattern साझा है तो उसके प्रभाव वाले दूसरे Pages भी देखें।
12. Practical Exercise: अपना Brand Design Sheet बनाएँ
Step 1: कागज़ पर Site के लिए दो मुख्य Colors लिखें। Step 2: हिंदी पढ़ने में अच्छा एक Body Font चुनें। Step 3: Header में Logo, Menu और Footer में तीन जरूरी Links का Sketch बनाएँ।
Step 4: Block Theme और Classic Theme का सही Edit Path लिखें। Step 5: 320px Screen के लिए Menu Button और Logo कितनी जगह लेंगे, यह तय करें। अभ्यास पूरा करने के लिए Live Site में कुछ बदलना जरूरी नहीं।
13. शुरुआती पाँच गलतियाँ
एक ही Page पर बहुत सारे Fonts; हल्का Text और हल्का Background; Hindi का Support न करने वाला Font; एक Post समझकर Shared Template बदल देना; और मोबाइल पर Menu या Footer बिना Test किए Save करना—ये पाँच सामान्य गलतियाँ हैं।
इनसे बचने का आसान नियम: Brand Colors सीमित रखें, Contrast जाँचें, किस Screen पर Edit कर रहे हैं पहचानें, Staging में Preview करें और Approval के बाद ही Site-wide बदलाव करें।
14. Quick Revision
Block Theme → Site Editor। Classic Theme → अक्सर Customizer/Theme Settings। Styles → रंग व Font। Templates → Page का Layout। Template Parts → साझा Header/Footer। Patterns → पहले से तैयार Block Designs।
याद रखें: Design बदलना ≠ सिर्फ Article Edit करना। Site-wide बदलाव से पहले Backup और पूरी Website पर असर समझना जरूरी है।
अक्सर पूछे जाने वाले सवाल (FAQs)
Appearance में Editor क्यों नहीं दिखता?
Site Editor आम तौर पर Block Theme में उपलब्ध होता है। Classic Theme में Customizer या Theme Settings का रास्ता हो सकता है; कुछ Plugins अतिरिक्त विकल्प भी देते हैं।
Customizer में Logo कैसे बदलें?
यदि Theme Support करता है तो Appearance → Customize → Site Identity या Theme के Logo/Header Panel से। Save/Publish से पहले Preview और Backup रखें।
Templates और Template Parts में क्या अंतर है?
Template पूरे Page प्रकार का Layout तय करता है; Template Part जैसे Header/Footer कई Templates में साझा हिस्सा हो सकता है।
क्या WordPress में Hindi Font इस्तेमाल कर सकते हैं?
हाँ, ऐसी Font चुनें जिसमें Devanagari अक्षर पूरे और साफ दिखते हों; License तथा Loading Speed भी जाँचें।
Site Editor का बदलाव वापस कैसे लें?
Supported Styles Revisions या Reset विकल्प देखें; Shared Template बदलावों के लिए अलग Restore की जरूरत पड़ सकती है। Backup रखें।
निष्कर्ष और अगला पाठ
इस पाठ में आपने Site Editor / Customizer को आसान उदाहरणों में समझा। अब अगले पाठ में इसी जानकारी को आगे बढ़ाएँगे। अपने Live WordPress की महत्वपूर्ण Settings बदलने से पहले हमेशा Backup और जाँच करें।
पिछला पाठ: पाठ 13 — WordPress Theme चुनना और Install करना
अगला पाठ: पाठ 15 — WordPress Menu कैसे बनाएँ?
संबंधित पढ़ें: पाठ 5 — WordPress का परिचय
Official Sources और आगे की पढ़ाई
- Site Editor — WordPress.org — Official Documentation
- Styles Overview — WordPress.org — Official Documentation
- Site Editor Patterns — WordPress.org — Official Documentation
- Customizer — WordPress.org — Official Documentation
- Google Favicon Guidelines — Official Documentation
नोट: Interface WordPress Version, Theme, Plugins और User Permissions के अनुसार अलग हो सकता है। चित्र शिक्षण के लिए बनाए गए हैं, वास्तविक WordPress Screenshots नहीं।