Paano tinatawag ng WordPress ang pangalawang/multi-level na navigation bar na custom na menu?

maramingpagmemerkado gamit ang internetpinipili ng mga taoWordPressHalikaBumuo ng istasyon, ngunit ang navigation bar ng ilang tema ay hindi sumusuporta sa pangalawang/multi-level na mga menu. Kung hindi ka nasisiyahan, maaari mong subukang manu-manong idagdag o baguhin ang istilo ng menu ng tema.

Nagsisimula ang pagbabago sa header.php. Ang isang mahalagang function sa template file na ito ay ang pagpapakita ng menu.

Kung gagamitin mo ang code upang tawagan ang kategorya bilang isang menu, posible rin, ngunit hindi maginhawang pag-uri-uriin ang mga item sa menu.

Ang direktoryo na may mga subcategory ay hindi madaling pangasiwaan, kaya gusto ko ring magdagdag ng custom na function ng menu sa aking tema tulad ng ibang mga tema.

Hindi mahirap magdagdag ng function ng pagpapasadya ng menu sa bagong ginawang tema, higit sa lahat mayroong 2 hakbang.

Ang unang hakbang, pagpaparehistro ng menu ng WordPress

Upang magamit ang menu, kailangan mo munang magparehistro, buksan ang file ng mga function sa ilalim ng tema, at idagdag ang sumusunod na code ▼

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

• Kung walang functions.php file sa ilalim ng tema, lumikha ng bago at kopyahin ang code sa itaas upang i-save ito.

mag-log inWordPress backend, at pagkatapos ay pumunta sa Hitsura→Menu.

Kung makikita mo ang screen sa ibaba, nangangahulugan ito na nakarehistro ka bilang ▼

Ang nasa itaas ay nagrerehistro ng 2 menu:

1. Isang tuktok na menu Nangungunang Menubar.
2. isang pangunahing menu Main menubar.

Ang ikalawang hakbang, ang WordPress menu call

Matapos mairehistro ang menu, maaari itong tawagan sa file ng template ng tema. Ilagay ang sumusunod na code sa header.php file, at maaari mo itong tawagan kung saan mo gustong ipakita ang menu.

Sa header.php file, tawagan ang "top menu"▼

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

Sa header.php file, tawagan ang "main menu"▼

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

Tawagan ang "bottom menu" sa footer.php file▼

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

Hakbang XNUMX: Menu ng Mga Setting

Matapos mairehistro ang menu at ang posisyon ng pagpapakita ng menu ay tinukoy sa file ng tema, maaari kang lumikha ng bagong item ng menu sa background ng WordPress.

Pagkatapos, italaga ang bagong likhang menu item sa nakarehistrong menu, at imungkahi ang kaukulang relasyon ▼

Gumawa ng wordpress multi-level na navigation bar sa menu

Ngayon ay pag-usapan natin kung paano gumawa ng WordPress multi-level na menu:

Una, tanggalin ang orihinal na code ng menu sa file ng mga function ng iyong sariling tema ng WordPress.

o direktang idagdag ang code na ito ▼

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

• Tandaan: dapat ay nasaIdinagdag sa labas.

Pagkatapos ay hanapin ang PHP code para sa tema upang tawagan ang menu, kung ito ay hilaw, ito ay karaniwang ganito ▼

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

tanggalin ito at palitan ng ▼

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

• Tandaan: Siguraduhin na ang code na ito ay hindi naglalaman ng iba pang mga div, kung hindi, ito ay malilimitahan ng panlabas na div.

Ang susunod na hakbang ay idagdag ang dropdown na JS function code at idagdag ang sumusunod na code sa JS file ng tema ▼

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

Mga estilo ng CSS ng menu ng WordPress

Panghuli, CSS style beautification.

Anong uri ng epekto ang dapat, bigyan ng buong laro ang iyong imahinasyon, magagawa ito ng 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;}

• Idagdag ang CSS code sa itaas sa style.css file ng tema at i-save ito.

Pagkatapos i-save, i-refresh ang front page ng iyong website, makikita mo ang epekto, napaka-simple ba nito?