Ingaba i-WordPress ibiza njani imenyu yesiko lebhari yokukhangela yenqanaba lesibini/elininzi?

EzininziIntengiso ye-Intanethiabantu bayakhethaWordPressYizaukwakha iwebhusayithi, kodwa ibar yokukhangela yeminye imixholo ayizixhasi iimenyu zesibini/ezikumgangatho omninzi.

Ukuguqulwa kuqala kwi-header.php Umsebenzi obalulekileyo kule fayile ye template kukuboniswa kwemenyu.

Ukuba usebenzisa ikhowudi ukubiza udidi njengemenyu, kunokwenzeka kwakhona, kodwa akulungele ukuhlela izinto zemenyu.

Uluhlu olunamacandelo angaphantsi alululanga ukuluphatha, ngoko ke ndifuna ukongeza umsebenzi wemenyu yesiko kumxholo wam njengeminye imixholo.

Akunzima ukongeza umsebenzi wokwenza imenyu kumxholo osanda kwenziwa, kukho amanyathelo ama-2.

Isinyathelo sokuqala, ukubhaliswa kwemenyu ye-WordPress

Ukusebenzisa imenyu, kufuneka uqale ubhalise, uvule ifayile yemisebenzi phantsi komxholo, kwaye udibanise le khowudi ilandelayo ▼

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

• Ukuba akukho fayile yemisebenzi.php phantsi komxholo, yenza entsha kwaye ukopishe ikhowudi engentla ukuyigcina.

登录I-WordPress backend, kwaye emva koko uye kwi-Imbonakalo→Imenyu.

Ukuba uyasibona isikrini esingezantsi, oko kuthetha ukuba ubhalisile njengo-▼

Oku ngasentla kubhalisa iimenyu ezi-2:

1. Imenyu ephezulu yeMenubar.
2. imenyu engundoqo Main menubar.

Isinyathelo sesibini, ifowuni yemenyu ye-WordPress

Emva kokuba imenyu ibhalisiwe, ingabizwa kwifayile yetemplate yomxholo.Faka ikhowudi elandelayo kwifayile ye-header.php, kwaye ungayibiza apho ufuna ukubonisa khona imenyu.

Kwifayile yeheader.php, biza "imenyu ephezulu"▼

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

Kwifayile yeheader.php, biza "imenyu ephambili"▼

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

'imenyu_navi')); ?>

Biza "imenyu esezantsi" kwifayile ye-footer.php▼

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

Inyathelo XNUMX: Useto lwemenyu

Emva kokuba imenyu ibhalisiwe kwaye indawo yokubonisa imenyu ichazwe kwifayile yomxholo, unokwenza into entsha yemenyu kwimvelaphi ye-WordPress.

Emva koko, yabela into entsha eyenziwe kwimenyu kwimenyu ebhalisiweyo, kwaye ucebise ubudlelwane obuhambelanayo ▼

Yenza i-wordpress yebar yokukhangela yemenyu enemigangatho emininzi

Ngoku makhe sithethe malunga nendlela yokwenza imenyu ye-WordPress yamanqanaba amaninzi:

Okokuqala cima ikhowudi yemenyu yokuqala kwifayile yemisebenzi yeyakho i-WordPress theme.

okanye yongeza le khowudi ngqo ▼

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

• Qaphela: kufuneka ungeneYongezwe ngaphandle.

Emva koko fumana ikhowudi ye-PHP yomxholo ukubiza imenyu, ukuba ikrwada, ihlala inje ▼

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

yisuse kwaye ubeke endaweni yayo ▼

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

• Qaphela: Qinisekisa ukuba le khowudi ayiqulathanga ezinye ii-divs, kungenjalo iya kubotshwa yi-div yangaphandle.

Inyathelo elilandelayo kukudibanisa ikhowudi yokusebenza ye-JS eyehlayo kwaye wongeze le khowudi ilandelayo kwifayile ye-JS yomxholo ▼

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

Imenyu ye-WordPress izimbo zeCSS

Ekugqibeleni, ukuhonjiswa kwesitayela seCSS.

Loluphi uhlobo lwesiphumo esifanele ukuba, nika umdlalo opheleleyo kwintelekelelo yakho, iCSS ingayenza ▼

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

• Yongeza ikhowudi ye-CSS engentla kwifayile ye-style.css yomxholo kwaye uyigcine.

Emva kokugcina, hlaziya iphepha elingaphambili lewebhusayithi yakho, uyayibona isiphumo, ngaba ilula kakhulu?