ورڈپریس څنګه د ثانوي / څو کچې نیویګ بار دودیز مینو ته زنګ ووهي؟

بیخي ډېرد انټرنیټ بازار موندنهخلک غوره کوي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 فایل شتون نلري، یو نوی جوړ کړئ او پورته کوډ کاپي کړئ ترڅو دا خوندي کړي.

څېرهد WordPress پس منظر، او بیا ظاهري → مینو ته لاړشئ.

که تاسو لاندې سکرین وګورئ، دا پدې مانا ده چې تاسو د ▼ په توګه راجستر شوي یاست

پورته 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 فایل کې اضافه کړئ او خوندي یې کړئ.

د خوندي کولو وروسته، د خپلې ویب پاڼې مخکینۍ پاڼه تازه کړئ، تاسو کولی شئ تاثیر وګورئ، ایا دا خورا ساده دی؟