ورڈپریس ثانوی/ملٹی لیول نیویگیشن بار کو کسٹم مینو کیسے کال کرتا ہے؟

بہت网络 营销لوگ منتخب کرتے ہیں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>

'مینو_نوی'))؛ ?>

footer.php فائل میں "نیچے مینو" کو کال کریں▼

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

مرحلہ XNUMX: ترتیبات کا مینو

مینو کے رجسٹر ہونے کے بعد اور تھیم فائل میں مینو کی ڈسپلے پوزیشن کی وضاحت ہو جانے کے بعد، آپ ورڈپریس کے پس منظر میں ایک نیا مینو آئٹم بنا سکتے ہیں۔

پھر، نئے بنائے گئے مینو آئٹم کو رجسٹرڈ مینو میں تفویض کریں، اور متعلقہ رشتہ تجویز کریں ▼

ورڈپریس کو ملٹی لیول مینو نیویگیشن بار بنائیں

اب بات کرتے ہیں کہ ورڈپریس کو ملٹی لیول مینو کیسے بنایا جائے:

پہلے اپنے ورڈپریس تھیم کی فنکشن فائل میں اصل مینو کوڈ کو ڈیلیٹ کریں۔

یا اس کوڈ کو براہ راست شامل کریں ▼

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

• نوٹ: اندر ہونا ضروری ہے۔باہر شامل کیا گیا۔

پھر مینو کو کال کرنے کے لیے تھیم کے لیے پی ایچ پی کوڈ تلاش کریں، اگر یہ خام ہے، تو یہ عام طور پر اس طرح ہوتا ہے ▼

<?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>

• نوٹ: یقینی بنائیں کہ اس کوڈ میں دیگر divs شامل نہیں ہیں، بصورت دیگر یہ بیرونی div کے پابند ہو جائیں گے۔

اگلا مرحلہ یہ ہے کہ ڈراپ ڈاؤن JS فنکشن کوڈ شامل کریں اور مندرجہ ذیل کوڈ کو تھیم کی JS فائل میں شامل کریں ▼

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

ورڈپریس مینو سی ایس ایس اسٹائل

آخر میں، CSS طرز کی خوبصورتی.

کس طرح کا اثر ہونا چاہیے، اپنے تخیل کو مکمل کھیل دیں، 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 فائل میں شامل کریں اور اسے محفوظ کریں۔

محفوظ کرنے کے بعد اپنی ویب سائٹ کے فرنٹ پیج کو ریفریش کریں، آپ اثر دیکھ سکتے ہیں، کیا یہ بہت آسان ہے؟