ورڈپریس ڪيئن سڏيندو ثانوي/ملٽي ليول نيويگيشن بار ڪسٽم مينيو؟

تمام گهڻوانٽرنيٽ مارڪيٽنگماڻهو چونڊيندا آهنWordPressاچڻهڪ ويب سائيٽ ٺاهيو, پر ڪجھه موضوعن جو نيويگيشن بار ثانوي/ملٽي-سطح مينيو کي سپورٽ نٿو ڪري. جيڪڏھن توھان مطمئن نه آھيو، توھان ڪوشش ڪري سگھو ٿا دستي طور تي موضوع جي مينيو انداز کي شامل ڪرڻ ۽ تبديل ڪرڻ جي.

تبديلي header.php کان شروع ٿئي ٿي. هن ٽيمپليٽ فائل ۾ هڪ اهم ڪم مينيو جي ڊسپلي آهي.

جيڪڏهن توهان ڪيٽيگري کي مينيو طور ڪال ڪرڻ لاءِ ڪوڊ استعمال ڪريو ٿا، اهو پڻ ممڪن آهي، پر مينيو شيون ترتيب ڏيڻ آسان ناهي.

ذيلي ڪيٽيگريز سان ڊائريڪٽيئرز کي سنڀالڻ آسان ناهي، ان ڪري مان پڻ ٻين موضوعن وانگر پنهنجي موضوع تي ڪسٽم مينيو فنڪشن شامل ڪرڻ چاهيان ٿو.

نئين ٺاهيل موضوع تي مينيو ڪسٽمائيزيشن فنڪشن شامل ڪرڻ ڏکيو ناهي، خاص طور تي 2 مرحلا آهن.

پهريون قدم، ورڈپریس مينيو رجسٽريشن

مينيو استعمال ڪرڻ لاءِ، توھان کي پھريون ڀيرو رجسٽر ڪرڻ گھرجي، ھوم جي ھيٺان فنڪشن فائل کوليو، ۽ ھيٺ ڏنل ڪوڊ شامل ڪريو ▼

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>

• جيڪڏهن موضوع جي تحت ڪا به functions.php فائل نه آهي، هڪ نئون ٺاهيو ۽ مٿي ڏنل ڪوڊ کي نقل ڪريو ان کي محفوظ ڪرڻ لاء.

لاگ انورڈپریس پس منظر، ۽ پوءِ وڃو ظاهر → مينيو.

جيڪڏھن توھان ھيٺ ڏنل اسڪرين کي ڏسي سگھو ٿا، ان جو مطلب آھي توھان رجسٽرڊ ڪيو آھي ▼ طور

مٿي ڏنل رجسٽرڊ 2 مينيو:

1. مٿي مينيو مٿي مينيو بار.
2. مکيه مينيو Main مينوبار.

ٻيو قدم، ورڈپریس مينيو ڪال

مينيو رجسٽر ٿيڻ کان پوءِ، ان کي ٿيم ٽيمپليٽ فائل ۾ سڏي سگھجي ٿو. ھيٺ ڏنل ڪوڊ کي header.php فائل ۾ وجھو، ۽ توھان ان کي ڪال ڪري سگھوٿا جتي توھان مينيو ڏيکارڻ چاھيو ٿا.

header.php فائل ۾، "مٿين مينيو" کي ڪال ڪريو ▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

header.php فائل ۾، "مين مينيو" کي ڪال ڪريو ▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

'menu_navi'))؛ ?>

فوٽر.php فائل▼ ۾ "هيٺ ڏنل مينيو" کي ڪال ڪريو

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

ٽيون قدم، سيٽنگون مينيو

مينيو رجسٽر ٿيڻ کان پوءِ ۽ مينيو جي ڊسپلي پوزيشن موضوع واري فائل ۾ بيان ڪئي وئي آهي، توهان ورڈپریس پس منظر ۾ هڪ نئون مينيو آئٽم ٺاهي سگهو ٿا.

ان کان پوء، نئين ٺاهيل مينيو آئٽم کي رجسٽرڊ مينيو ۾ تفويض ڪريو، ۽ لاڳاپيل تعلق جي صلاح ڏيو ▼

ورڈپریس ملٽي ليول مينيو نيويگيشن بار ٺاهيو

هاڻي اچو ته ڳالهايون ڪيئن ٺاهيو ورڈپریس ملٽي ليول مينيو:

پهريان پنهنجي پنهنجي ورڈپریس تھیم جي فنڪشن فائل ۾ اصل مينيو ڪوڊ حذف ڪريو.

يا هي ڪوڊ سڌو سنئون شامل ڪريو ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• نوٽ: ۾ هجڻ ضروري آهيٻاهر شامل ڪيو ويو.

پوءِ مينيو کي ڪال ڪرڻ لاءِ موضوع لاءِ PHP ڪوڊ ڳولھيو، جيڪڏھن اھو خام آھي، عام طور تي ھن طرح آھي ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

ان کي هٽايو ۽ ان کي ▼ سان تبديل ڪريو

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

• نوٽ: پڪ ڪريو ته هي ڪوڊ ٻين ڊويزنن تي مشتمل ناهي، ٻي صورت ۾ اهو ٻاهرئين ڊويزن طرفان پابند ڪيو ويندو.

اڳيون قدم ڊراپ ڊائون JS فنڪشن ڪوڊ شامل ڪرڻ ۽ ھيٺ ڏنل ڪوڊ کي موضوع جي JS فائل ۾ شامل ڪرڻ آھي ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

ورڈپریس مينيو سي ايس ايس انداز

آخرڪار، سي ايس ايس انداز جي خوبصورتي.

ڪهڙي قسم جو اثر هجڻ گهرجي، پنهنجي تخيل کي مڪمل راند ڏيو، CSS اهو ڪري سگهي ٿو ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}

• مٿي ڏنل CSS ڪوڊ شامل ڪريو موضوع جي style.css فائل ۾ ۽ ان کي محفوظ ڪريو.

محفوظ ڪرڻ کان پوء، پنهنجي ويب سائيٽ جي سامهون واري صفحي کي تازو ڪريو، توهان اثر ڏسي سگهو ٿا، ڇا اهو تمام آسان آهي؟