Home / WordPress में LOGO कैसे लगाए, Theme Responsive कैसे बनाएं

WordPress में LOGO कैसे लगाए, Theme Responsive कैसे बनाएं

Gyanians | In: 09-18-23 | WordPress | 4 Minutes Read

WordPress Theme Development Tutorial के Part 3 में हम सीखेंगे Theme में Text, Image, Logo इत्यादि Add कैसे करें, इसके साथ ही Responsive Dropdown Menu कैसे बनाए, Functions.php File के Features को Activate कैसे करें की पूरी जानकारी विस्तार में जानेंगे.

WordPress Me Logo Kaise Lagaye

WordPress में Logo लगाने के लिए सबसे पहले WordPress Admin Dashboard >> Settings >> General में जाएँ. फिर वहां अपने Blog का Title और Tagline Set करें. अब Header.php File को Open करें.

WordPress Theme Development Tutorial from Scratch in Hindi

पहले Column में Text या Picture लगाएं और Second Column को Ads Banner के लिए Blank छोड़ दें. Logo का Code Snippet नीचे दिया है. इसमें Bloginfo() Function का Use Home Address, Site का Title और Description Show कराने के लिए किया गया है.

<div class="row" id="logobar">
	<div class="col-lg-3 col-md-3 col-sm-3">
		<h1> <a href="<?php bloginfo('wpurl'); ?>"> <?php bloginfo('name'); ?> </a> </h1>
		<p> <?php bloginfo('description'); ?> </p>		
	</div>
	<div class="col-lg-9 col-md-9 col-sm-9">
		<!-- 729x90 Size Ads banner area -->
	</div>
</div>

अब आप अपनी Site का Title आपके Home Page पर देख सकते हैं. जब भी कोई उसपर Click करेगा वो आपकी Site के Home Page पर आ जाता है. Site Title के नीचे आपको Site Tagline भी देखने को मिल जाता है. आप Site Title और Tagline को Style.css File में Edit कर सकते हैं.

WordPress Me Image Logo Kaise Lagaye

WordPress में Image LOGO लगाने के लिए आप WordPress के In-Built Custom Header Feature का Use कर सकते हैं. इस Feature को Activate करने के लिए आपको add_theme_support() को Functions.php मे Use करना होगा. आप Functions.php File को Open करके उसमें नीचे दिए Code को Paste कर दें.

//Activate Header feature
$defaults = array(
	'default-image'         => '',
	'width'                 => 0,
	'height'                => 0,
	'flex-height'           => true,
	'flex-width'            => true,
	'uploads'               => true,
);
add_theme_support( 'custom-header', $defaults );

अब आपको WordPress में Appearance के अंदर Header Feature नजर आएगा. Header पर Click करते से Customize Mode Open हो जाता है. आपको Header Image >> Add New Image >> Select Logo करके इसे Save करना होता है. इस तरह आप कभी भी अपना Logo Change कर सकते हैं.

WordPress Theme Development Training In Hindi

अब इस LOGO को Theme में Add करने के लिए Header.php File Open करें. फिर जहाँ हमने पहले Text Logo लगाया था उस Code को हटाकर नीचे दिए Code को Paste कर दें.

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" class="img-responsive" alt="gyanians_logo" />

अब आप जैसे ही अपनी Theme Reload करेंगे आपको आपका Image Logo नजर आने लगेगा.

WordPress Theme Me Navbar Add Kaise Kare

WordPress में Responsive Navbar के लिए आप Bootstrap Navbar का Use कर सकते हैं. इसके लिए आपको Custom Navwalker Class को Download करना होगा.

Download WordPress Theme Development Course in Hindi

इसके बाद Zip File में आपको कई सारी Files देखने को मिल जायेंगे, पर आपको सिर्फ Wp-Bootstrap-Navwalker.php को Copy करके आपके Theme के Root Folder में Paste करना है.

Custom WordPress Theme Development - Hindi

इसके बाद WordPress में Navbar Add करने के लिए आपको Functions.php File में Custom Class को Add करना होगा. इसके लिए आप नीचे दिए Code का इस्तेमाल कर सकते हैं. आपको नीचे दिए Code को add_theme_support() Function के Closing से पहले Paste करना है.

// Register Custom Navigation Walker
require_once('wp-bootstrap-navwalker.php');

अब हम WordPress में Menu Management Feature को Activate करेंगे. इस Feature को Activate करने के लिए आपको Functions.php में add_theme_support (‘menus’) का Use करना है. आपको Menu Create करने से पहले, Menu को Functions.php File में Add करना होगा.

Menu Add करने के लिए आप नीचे दिए Code Snippet को आपके Functions.php में Paste कर दें.

//Active Menu Feature
function gyanians_theme_menus()
{
	add_theme_support('menus');
	register_nav_menu('primary',"This Menu for Header");
	register_nav_menu('secondary',"This Menu for Footer");
}
add_action('init','gyanians_theme_menus');

WordPress Navigation Bar Me Content Kaise Add Kare

अब आप Appearance >> Menus में जाकर किसी भी Name से Menu Create कर सकते हैं. आप जो भी Page/ Category, Header में Show कराना चाहते हैं, उन्हें यहाँ Add कर सकते हैं.

इसके बाद Display Location >> This Menu for Header पर Tick करें और Save Button पर Click करके Save करदें.

How to Change WordPress Logo, Customize Login Page

अब Header.php File में Navbar Create करने के लिए आपको नीचे दिए Code को Header.php में Paste करना होगा.

<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<div class="row nav-row">
			<header>
				<div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
				</div>
			</header>
			<div class="collapse navbar-collapse" id="navbar-collapse-1">
			<?php
                wp_nav_menu( array(
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => '',
                    'menu_class'        => 'nav navbar-nav',
                    'walker' 			=> new wp_bootstrap_navwalker())
                );
            ?>                
			</div>
		</div>
	</div>
</nav>

1. Header File

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset' ); ?>"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="<?php bloginfo('description') ?>">
	<title> 
		<?php 
		if(is_home()) { bloginfo('name'); echo ' - ';  bloginfo('description'); }
		else { wp_title(''); echo ' - '; bloginfo('name'); }
		?>
	</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
	<?php wp_head(); ?>
</head>
<body>
<div class="container" id="holder">

<div class="row" id="logobar">
	<div class="col-lg-3 col-md-3 col-sm-3">
		<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" class="img-responsive" alt="gyanians_logo" />
	</div>
	<div class="col-lg-9 col-md-9 col-sm-9">
		<!-- 729x90 Size Ads banner area -->
	</div>
</div> 

<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<div class="row nav-row">
			<header>
				<div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
				</div>
			</header>
			<div class="collapse navbar-collapse" id="navbar-collapse-1">
			<?php
                wp_nav_menu( array(
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => '',
                    'menu_class'        => 'nav navbar-nav',
                    'walker' 			=> new wp_bootstrap_navwalker())
                );
            ?>                
			</div>
		</div>
	</div>
</nav>

2. Functions File

<?php

//Activate Header feature
$defaults = array(
	'default-image'         => '',
	'width'                 => 0,
	'height'                => 0,
	'flex-height'           => true,
	'flex-width'            => true,
	'uploads'               => true,
);
add_theme_support( 'custom-header', $defaults );

// Register Custom Navigation Walker
require_once('wp-bootstrap-navwalker.php');


//Active Menu Feature
function gyanians_theme_menus()
{
	add_theme_support('menus');
	register_nav_menu('primary',"This Menu for Header");
	register_nav_menu('secondary',"This Menu for Footer");
}
add_action('init','gyanians_theme_menus');

?>

इस Series Next part में हम Footer.php File में Dynamic Texts, Date और Important Pages (Home, About Us, Privacy Policy) को Footer में Add करना सीखेंगे.

आशा करते हैं आपको WordPress Me Logo Kaise Lagaye और WordPress Theme Development From Scratch पोस्ट पसंद आई होगी.

अगर आपको इस Post से Related कोई सवाल या सुझाव है तो नीचे Comment करें. अगर आपको यह Post पसंद आई तो अपने दोस्तों के साथ जरुर Share करें.

You may also like these: