Sidee WordPress u wacdaa heerka sare/heerka badan ee navigation bar menu caadada?

badan ooSuuqgeynta Internetkadadku doortaanWordPressKaalaydhisa website, laakiin bar navigation ee mawduucyada qaar ma taageerto liiska sare/multi-levels.Haddii aadan ku qanacsanayn, waxaad isku dayi kartaa inaad gacanta ku darto oo aad wax ka beddesho qaabka menu ee mawduuca.

Wax ka beddelku wuxuu ka bilaabmaa header.php. Shaqada muhiimka ah ee faylka template-ka ah waa bandhiga menu-ka.

Haddii aad isticmaasho koodka si aad ugu wacdo qaybta menu ahaan, sidoo kale waa suurtogal, laakiin kuma habboona inaad kala soocdo alaabta menu.

Hagayaasha leh qaybo-hoosaadyadu ma fududa in la maareeyo, sidaa darteed waxaan sidoo kale rabaa in aan ku daro hawlaha menu-ka caadiga ah mawduucayga sida mawduucyada kale.

Ma adka in lagu daro shaqada habaynta menu-ka mawduuca cusub ee la sameeyay, inta badan waxa jira 2 tillaabo.

Tallaabada ugu horreysa, diiwaangelinta menu WordPress

Si aad u isticmaasho menu-ka, waa in aad marka hore is-diiwaangeliso, furto faylka hawlaha hoostiisa mawduuca, oo aad ku dhejiso koodka soo socda ▼

<?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' => __('底部菜单') ) );
}
?>

• Haddii aanu jirin faylka functional.php ee mawduuca hoos yimaada, samee mid cusub oo koobi ka samee koodka sare si aad u badbaadiso.

Log inDhabarka dambe ee WordPress, ka dibna tag Appearance→Menu.

Haddii aad arki karto shaashadda hoose, waxay la macno tahay inaad isu diiwaangelisay sida ▼

Midka kore wuxuu ka diiwaan gashan yahay 2 menus:

1. Liiska sare ee Menubar-ka.
2. menu ugu weyn Main menubar.

Talaabada labaad, wac menu-ka WordPress

Ka dib marka la diiwaan geliyo menu-ka, waxaa lagu magacaabi karaa feylka template theme, geli code-kan soo socda faylka header.php, oo waxaad wici kartaa meesha aad rabto inaad ku muujiso menu-ka.

Faylka header.php, wac "menu top"▼

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

Faylka header.php, wac "menu main"▼

//主菜单调用
<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'));?>

Wac "menuga hoose" ee ku jira faylka footer.php▼

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

Talaabada XNUMX: Settings menu

Ka dib marka liiska la diiwaan geliyo oo booska bandhiga ee liiska lagu qeexay faylka mawduuca, waxaad samayn kartaa shay cusub oo ku yaal asalka WordPress.

Dabadeed, shayga menu ee cusub ee la sameeyay ku wareeji liiska diiwaangashan, oo soo jeedi xidhiidhka u dhigma ▼

Samee wordpress heerar badan oo ka mid ah menu navigation bar

Hadda aan ka hadalno sida loo sameeyo WordPress menu-heer badan:

Marka hore tirtir koodhka menu-ka asalka ah ee faylka hawlaha mawduucaaga WordPress.

ama si toos ah ugu dar koodkan ▼

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

• Xusuusin: waa in lagu jiraaBanaanka lagu daray.

Ka dib u hel code-ka PHP mawduuca si aad ugu wacdo menu-ka, haddii ay cayriin tahay, badanaa waa sidan ▼

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

ka saar oo ku beddel ▼

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

• Fiiro gaar ah: Hubi in koodkan aanu ku jirin divs kale, haddii kale waxa xadayn doona div-ga dibadda ah.

Talaabada xigta waa in lagu daro hoos u dhigista koodka shaqada JS oo lagu daro koodhka soo socda faylka JS ee mawduuca ▼

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

Qaababka menu-ka WordPress ee CSS

Ugu dambeyntii, qurxinta qaabka CSS.

Saamayn noocee ah ayaa noqon kara, sii ciyaar buuxda mala-awaalkaaga, CSS ayaa sameyn karta ▼

#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;}

• Ku dar koodhka sare ee CSS faylka mawduuca style.css oo kaydi.

Ka dib markaad kaydiso, dib u cusboonaysii bogga hore ee shabakadaada, waxaad arki kartaa saamaynta, ma mid aad u fudud?