WordPress Theme Development with Bootstrap in Hindi (Part 3)

WordPress Theme Development with Bootstrap in Hindi

WordPress Theme Development with Bootstrap in Hindi Hello Gyanians, कहते है बूंद-बूंद से घड़ा भरता है, ठीख ऐसे ही हम और आप WordPress Theme Development with Bootstrap in Hindi की Series के Part 3 में आ गये हैं और इस part में अपनी WordPress Theme Development के process को ओर आगे बढ़ाएंगे. अगर आपने इस series के Part 1 और 2 को नही पढ़ा है तो पहले आप उन्हें अच्छे से पढ़कर समझ लीजिये और उनके सभी practical work को सफलतापूर्वक पूरा कर लीजिये.

अगर आपने WordPress Theme Development with Bootstrap in Hindi  series के part 1 और part 2 को study कर भी लिया है तो भी मैं आपको suggest करूंगा की आप एक बार फिर Part 1 और 2 को revise कर लें जिससे की आपको इस part को अच्छे से समझने में ओर help मिलेगी.

इस part में पहले हम अपनी Theme में Text और Image Logo कैसे लगाते है ये सीखेंगे और फिर अपने theme में Responsive Dropdown Menu बनायेंगे. इसके अलावा functions.php file से WordPress Dashboard के कुछ features को activate और use करेंगे.

 

 

WordPress Blog Header Me Text Logo Kaise Lagaye?

Blog Header में Logo almost सभी blogs पर होता है. कुछ bloggers Logo Simple Text में लगाते है और कुछ Image की form में. इस post में आपको मैं दोनों ही तरह से लोगो लगाना बताऊंगा. Text Logo में हम अपने blog का Site Title और Tagline use करते है. अगर आप भी Text Logo लगाना चाहते हो तो पहले WordPress Admin Dashboard में Settings >> General में जाकर अपने blog के लिए Site Title और Tagline Set कर लीजिये.

WordPress Theme Development Tutorial from Scratch in Hindi

अब header.php file को notepad++ में open कर लीजिये. मैंने यहाँ 2 columns create किये है, पहले column में हम Text या Picture Logo लगायेंगे और second column को बाद में ads banner लगाने लिए blank छोड़ देंगे. Text Logo कैसे लगाते है इसका code snippet नीचे दिया है.

जिसमे मैंने bloginfo() function का use किया है जिसे बारे में आपको part 2 में बता दिया है. यहाँ मैंने bloginfo() function से site का home address, site का title और description को print कराया है.

अब आप अपनी site को visit करके देखें. आपको आपकी site का title नजर आएगा जिसको मैंने site के home page के साथ link कर दिया है यानी जब भी कोई उस पर click करेगा वो आपकी site के home page पर आ जायेगा. Site title के नीचें site tagline नजर आएगी.

आप Site title और tagline को style.css file में CSS code करके कोई भी style दे सकते है. मुझे उम्मीद है की आप WordPress Theme Development with Bootstrap in Hindi  series में WordPress Blog Header Me Text Logo Kaise Lagaye ये अच्छे से समझ गये होंगे.

 

WordPress Blog Header Me Image Logo Kaise Lagaye?

Image Logo लगाने के लिए बहुत से तरीके है लेकिन यहाँ मैं आपको best तरीका बताने बाला हूँ, जिससे आप कभी भी बहुत आसानी से अपना Logo set और change कर सकते हो. इस तरीके में हम WordPress के in-built Custom Header theme feature का use करेंगे. इस feature को WordPress dashboard मे activate (add) करने के लिये आपको add_theme_support() को functions.php मे use करना होगा.

जैसा की मैंने आपको part 1 में बता दिया है की functions.php file से आप WordPress theme में custom functionality add करते हो. functions.php file में सभी code <?php  ?> के बीच में आता है. अब आप functions.php file को open करिए और उसमे उसमे नीचे दिए गये code को copy paste कर दीजिये. अब आपको WordPress dashboard में Appearance के अंदर Header feature नजर आएगा.

Header option पर click करने से आपकी theme का customizing mode open हो जाएगा. अब आपको Header Image option पर click करना है और उसके बाद Add New Image पर click करके अपने computer से अपनी site का Logo select करना है और अंत में Saved button पर click करना है.

इसी तरह जब भी आप अपना Logo change करना चाहो कर सकते हो. अब हमने Logo select करना तो सीख लिया लेकिन अभी हमारा Logo theme में नजर नही आ रहा है उसके लिए आपको कुछ code करना होगा.

WordPress Theme Development Training In Hindi

अब आप header.php file open करिए और जहाँ हमने पहले Text Logo लगाया था उस code को remove करने नीचे दिए code को copy-paste कर दीजिये. इस code में मैंने WordPress के php function से dynamic code करके Logo image का src, width, height attributes set किये हैं.

अब जैसे ही आप अपनी theme को reload करेंगे आपको अपना Image Logo नजर आने लगेगा. मुझे उम्मीद है की आप WordPress Theme Development with Bootstrap in Hindi  series में WordPress Blog Header Me Image Logo Kaise Lagaye ये अच्छे से समझ गये होंगे.

 

 

WordPress Theme Me Bootstrap Navbar Add Kaise Kare?

जैसा की मैंने आपको अपनी Bootstrap Post में बताया था की Bootstrap framework आपके theme development process को fast करता है क्योंकि Bootstrap में आपको अपनी site में लगाने के लिए ready to use responsive component मिल जाते है. हम भी WordPress Theme में Responsive Navbar लगाने के लिए Bootstrap Navbar component का use करेंगे.

Bootstrap Navbar को WordPress menu management system के साथ integrated (जोड़ने) के लिए हम “Custom Navwalker Class” का use करेंगे, इसलिए इस दिए गये link पर click करके Custom Navwalker Class को download कर लीजिये.

जब आप इसे download करेंगे तो इसकी zip file में other बहुत सारी files होंगी लेकिन आपको सिर्फ wp-bootstrap-navwalker.php को copy करके अपने theme को root folder में paste करना हैं जहाँ सभी files (index, header etc) create की है.

Download WordPress Theme Development Course in Hindi

Custom WordPress Theme Development - Hindi

WordPress Theme में Bootstrap Navbar add करने के लिए अब आपको functions.php file में Custom Navwalker Class को register करना होगा. नीचे code दिया है जिसे आप copy करके अपने functions.php में paste कर दीजिये. याद रखें functions.php में सभी code <?php ?> के बीच में आता है,  यानी नीचे दिए गये code को आप add_theme_support() function के नीचें और php closing ?> से पहले paste कर दीजिये.

अब हम WordPress Dashboard  में menu management feature को activate (add) करेंगे, जहाँ से आप categories और pages को अपने navbar में add कर सकते हो. Menus feature को activate करने के लिए आपको functions.php में add_theme_support(‘menus’) function का use करना होता है.

WordPress theme में Menu create करने से पहले हमे menus को functions.php file registered करना होता है. Menus registered करने के लिए हम register_nav_menu(‘menu_name’,’description’) का use करते है.  नीचें code snippets में मैंने menu को activate और 2 menus को registered किया है, इस code को आप functions.php में copy-paste कर दीजिये.

 

WordPress Theme Me Navigation Menu Bar Kaise Create Kare?

ऊपर दिए code को करके हमने अपनी theme के Menu Bar के लिए एक तरह का foundation तैयार कर लिया है. अब हम WordPress Dashboard से Menu Bar create करेंगे. Menu Bar में हम लोग Categories and Pages को add करते है. इसलिए आप अपने blog niche अनुसार Categories and Pages create कर लें और नीचे बताये तरीके को follow करके उन्हें Menu Bar में add कर लें.

अब आप Appearance >> Menus में जाकर किसी भी name से एक Menu Create कर लीजिये. अब आप जो भी pages और categorise Header menu bar में show करना चाहते हो उन्हें add कर लीजिये. Add करने के बाद Display Location में  This Menu for Header पर click करके Save Menu button पर click कर दीजिये.

Theme Development in Hindi

How to create wordpress theme in hindi

अब हम header.php file में bootstrap का navbar create कर रहें है जिसमे wp_nav_menu() और wp_bootstrap_navwalker() functions की help से हमने WordPress dashboard में जो menu create किया है उसे show करेंगे.

नीचें दिए code को आप header.php में copy-paste कर दीजिये. अब हमने WordPress Theme Development with Bootstrap in Hindi  series के इस part के process को पूरा कर लिया है आप सभी changes code को नीचें देख सकते है.

 

Look all Changed in Header File: Theme Development in Hindi

 

Look all Changed in Functions File: Theme Development in Hindi

 

Conclusion: WordPress Theme Development with Bootstrap in Hindi

Gyanians, इस post में हमने Text और Image Logo को लगाना सिखा, Bootstrap Responsive Navbar को अपनी theme में कैसे लगायें ये सिखा और इसके अलावा functions.php file से अपने WordPress dashboard के कुछ features को activate और use किया.

इस series के next part WordPress Theme Development with Bootstrap in Hindi (Part 4) में हम footer.php file में हम Dynamic copyright text with date और important pages (Home, About Us, Privacy Policy etc) को footer में add करना सीखेंगे और इसके अलावा अभी तक किये code को style.css file में CSS code से style (design) देंगे.

 

 

Hello Gyanians, आशा करता हूँ की आपको ये “ WordPress Theme Development with Bootstrap in Hindi (Part 3) ” post पसंद आई होगी. अगर आपको इस post से related कोई सवाल या सुझाव है तो नीचे comment करें और इस post को अपने दोस्तों के साथ जरुर share करें.

12 responses to “WordPress Theme Development with Bootstrap in Hindi (Part 3)”

  1. Nitesh Kumar says:

    GREAT

  2. Naveen says:

    Good Word Keep It…

  3. rahul says:

    Where’s the 4th part of WordPress Theme Development with Bootstrap in Hindi ….????

  4. vashist narayan singh says:

    sir upload the 4th pat as soon as possible

Leave a Reply

Your email address will not be published. Required fields are marked *