Giunsa pagtawag sa WordPress ang secondary/multi-level navigation bar custom menu?

daghan saMarketing sa Internetgipili sa mga tawoWordPressUmari kaPagtukod ug estasyon, apan ang navigation bar sa pipila ka mga tema dili mosuporta sa sekondarya/multi-level nga mga menu. Kung dili ka matagbaw, mahimo nimong sulayan nga mano-mano ang pagdugang ug pag-usab sa estilo sa menu sa tema.

Nagsugod ang pagbag-o gikan sa header.php. Usa ka hinungdanon nga function sa kini nga template file mao ang pagpakita sa menu.

Kung gigamit nimo ang code aron tawagan ang kategorya ingon usa ka menu, mahimo usab kini, apan dili kombenyente ang paghan-ay sa mga butang sa menu.

Ang mga direktoryo nga adunay mga sub-kategorya dili sayon ​​nga dumalahon, mao nga gusto ko usab nga idugang ang custom nga mga function sa menu sa akong tema sama sa ubang mga tema.

Dili lisud ang pagdugang function sa pag-customize sa menu sa bag-ong gihimo nga tema, adunay panguna nga 2 nga mga lakang.

Ang unang lakang, WordPress menu registration

Aron magamit ang menu, kinahanglang magparehistro ka una, ablihi ang functions file ubos sa tema, ug idugang ang mosunod nga 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 walay functions.php file ubos sa tema, paghimo og bag-o ug kopyaha ang code sa ibabaw aron ma-save kini.

log saWordPress backend, ug dayon adto sa Appearance→Menu.

Kung makita nimo ang screen sa ubos, nagpasabot nga nakarehistro ka isip ▼

Ang sa ibabaw nagrehistro sa 2 nga mga menu:

1. Usa ka taas nga menu Top Menubar.
2. usa ka main menu Main menubar.

Ang ikaduhang lakang, ang WordPress menu call

Human marehistro ang menu, matawag kini sa theme template file.Ibutang ang mosunod nga code sa header.php file, ug mahimo nimo kining tawgon kung asa nimo gustong ipakita ang menu.

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

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

Sa header.php file, tawga 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')); ?>

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

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

Ang ikatulo nga lakang, ang menu sa mga setting

Pagkahuman narehistro ang menu ug ang posisyon sa pagpakita sa menu gihubit sa file sa tema, mahimo ka maghimo usa ka bag-ong item sa menu sa background sa WordPress.

Dayon, i-assign ang bag-ong nahimo nga menu item sa rehistradong menu, ug isugyot ang katugbang nga relasyon ▼

Paghimo sa wordpress multi-level menu navigation bar

Karon hisgutan naton kung giunsa paghimo ang usa ka multi-level nga menu sa WordPress:

Una, kuhaa ang orihinal nga code sa menu sa function file sa imong kaugalingon nga tema sa WordPress.

o idugang kini nga kodigo direkta ▼

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

• Note: kinahanglan naa saGidugang sa gawas.

Unya pangitaa ang PHP code alang sa tema nga tawgon ang menu, kung kini hilaw, kasagaran sama niini ▼

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

kuhaa ug pulihan ug ▼

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

• Mubo nga sulat: Siguroha nga kini nga code wala maglangkob sa uban nga mga div, kung dili kini mabugkosan sa gawas nga div.

Ang sunod nga lakang mao ang pagdugang sa dropdown JS function code ug idugang ang mosunod nga code sa JS file sa tema ▼

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

Mga Estilo sa CSS sa Menu sa WordPress

Sa katapusan, CSS style beautification.

Unsa nga matang sa epekto kinahanglan nga, paghatag og bug-os nga dula sa imong imahinasyon, CSS makahimo niini ▼

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

• Idugang ang CSS code sa ibabaw sa style.css file sa tema ug i-save kini.

Human sa pag-save, i-refresh ang front page sa imong website, makita nimo ang epekto, simple ra ba kaayo?