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

हैडर किसी भी साईट का वो हिस्सा होता है जो सबसे पहले रीडर की नजर में आता है। इसी हैडर से लोग शायद ये भी अनुमान लगाते हों कि उन्हें किस तरह के कंटेंट पढने को मिलेंगे। चलिये पहले हैडर की अंदरूनी बातें थोडा समझ लेते हैं उसके बाद बात करेंगे हैडर को कस्टमाईज करने की।

वर्डप्रेस हैडर वास्तव में कुछ लाईनों के कोड से बनता है लेकिन हैडर के लुक को बदलने के लिये आपका कोड से कुछ लेना देना नही है, इसलिये प्रोग्रामिंग नही भी आती है तो चलेगा, घबराने की कोई बात नही है। आप वर्डप्रेस की कोई भी थीम सलेक्ट करेंगे आपको हैडर अपने आप ही मिल जायेगा उस थीम के साथ। आपको सिर्फ अपनी साईट या चिट्ठे (ब्लोग) का टाईटल और उसके बारे में थोडा बताना होता है जो कि आप एडमिन->आप्शन पैनल में जाके कर सकते हैं।

आपकी थीम के फोल्डर में एक फाईल होती है headers.php, जिसे अगर आप एडिटर में देखेंगे तो कुछ इस तरह का कोड नजर आयेगा। थीम के हिसाब से इसमें थोडा बहुत फेर बदल भी हो सकता है।

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

<? और ?> के बीच का कोड पी. एच. पी (PHP) में है और बाकि एच टी एम एल (HTML)। bloginfo() एक पी. एच. पी फंक्शन है जिसमें दो अलग अलग वेल्यू पास की हैं, url पास करने में ये फंक्शन आपकी साईट का वेब एड्रेस लौटाता है जबकि name पास करने में आपकी ब्लोग का नाम। तो उपरोक्त दिया गया कोड विस्तार से कुछ इस तरह से भी हो सकता है -

<div id="header">
<div id="headerimg">
<h1>
<a href="<?php echo get_settings('home'); ?>">
<?php bloginfo('name'); ?></a>
</h1>
<div class="description">
<?php bloginfo('description'); ?>
</div>
</div>
</div>

दोनों ही उदाहरण में, स्टाईल शीट पे जाके आप हैडर के लिये ईमेज का उपयोग कर सकते हैं, लेकिन बाद वाले में आपको थोडा ज्यादा स्वतंत्रता रहती है। अब स्टाईल को सेट करने और उससे छेडछाड करने के लिये आपको जाना होगा style.css के कोड में। आपको ये फाईलम लिस्ट में सबसे ऊपर दिखेगी। किसी किसी थीम में आपके हैडर की स्टाईल आपको header.php में भी मिल सकती है।

आपको अपने हैडर के लिये CSS, #header नाम के सलेक्टर में मिलेगा और कुछ कुछ ऐसा होगा -

#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}

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

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

background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/wc_header.jpg”) no-repeat bottom center;

किसी किसी थीम में हैडर की बैकग्राउंड ईमेज headerimg वाले सलेक्टर या टैग में दी होती है तो आप वहाँ जाके अपनी नयी ईमेज का नाम दे सकते हैं।

काम की टिपः स्टाईल शीट में कुछ भी बदलने से पहले आप उस सलेक्टर या टैग को कॉपी करके वहीं पे अगली लाईन में पेस्ट कर दीजिये और फिर उसको कमेंट कर दीजिये। जिससे की अगर आपसे कुछ गलत हो गया तो आप वापस पुराने वाली वेल्यु उपयोग में ला सकें। उदाहरण के लिये मैं background: url(”<php bloginfo(’stylesheet_directory’); ?>/images/wc_header.jpg”) no-repeat bottom center; को बदलना चाहता हूँ तो मैं कोड को इस तरह से लिखूँगा स्टाईलशीट में

/* background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/wc_header.jpg”) no-repeat bottom center; */
background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/_header.jpg”) no-repeat bottom center;

/* और */ का उपयोग स्टाईलशीट (CSS) में कमेंट शुरू और बंद करने के लिये होता है, बस एक बात ध्यान रखियेगा कि आपकी नई हैडर ईमेज जा साईज पुराने जितना ही हो, अगर ये बडा होता है तो फिर आपको content और sidebar जैसे सलेक्टर के साथ भी कुछ छेडखानी करनी पड सकती है।

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

अब चलते चलते एक बात और बता देते हैं कि आप अपने हैडर के टाईटिल के कोड को हटाये बिना कैसे छुपा सकते हैं। इसके लिये आपको अपनी CSS में थोडा सा चेंज करना पडेगा। और वो है display:none, जी हाँ बस कोड के इस पीस को जोड दीजिये h1 सलेक्टर में, जोड के h1 सलेक्टर कुछ ऐसा लगेगा -

h1 {
display:none;
font-size: 230%;
color: blue;…….
}

इससे आपका हैडर टाईटिल तो अब भी अपनी जगह रहेगा लेकिन रीडर को दिखायी नही देगा, और अगर आप h1 टैग को पूरी तरह से ओझल करना चाहते हैं तो ये ट्राई कर सकते हैं - कोड तो अभी भी रहेगा लेकिन दिखेगा नही।

h1 {position: absolute;
font-size: 0;
left: -1000px; }

अब अगर आप अपने पूरे हैडर को क्लिक करने लायक बनाना चाहते हैं तो कुछ ऐसा कर सकते हैं अपनी header.php फाईल में-

पहला उदाहरणः

<a href=” <h1 id="header">
<?php bloginfo('name'); ?>
</h1>
</a>

या दूसरा उदाहरणः

<div id="header">
<a href="<?php echo get_settings('home'); ?>">
<div id="headerimg">
<h1><?php bloginfo('name'); ?></h1>
<div class="description">
<?php bloginfo('description'); ?>
</div>
</div>
</a>
</div>

या ये भी उपयोग में लाके देख सकते हैं:

>div id=”header” onclick=”location.href=’http://readers-cafe.net/nc’;” style=”cursor: pointer;”<

बस, अब पढ‌ना छोडिये और शुरू हो जाइये हैडर बदलने के लिये। अगले भाग में पढिये हैडर की ईमेज खुद ब खुद कैसे बदलती रहे, मेरे हैडर की तरह।

Google