Ahoana no iantsoan'ny WordPress ny menio fanamoriana faharoa / multi-level navigation bar?

be dia beInternet Marketingmifidy ny olonaWordPressAviamanangana tranonkala, fa tsy mahazaka menus secondaire/multi-level ny bar navigation an'ny lohahevitra sasany. Raha tsy afa-po ianao dia azonao atao ny manandrana manampy sy manova ny fomba sakafo amin'ny lohahevitra.

Ny fanovana dia manomboka amin'ny header.php. Ny asa lehibe amin'ity rakitra môdely ity dia ny fampisehoana ny sakafo.

Raha mampiasa ny kaody ianao hiantsoana ny sokajy ho toy ny sakafo, dia azo atao ihany koa izany, saingy tsy mety ny mandamina ny sakafo.

Ny lahatahiry misy zana-tsokajy dia tsy mora karakaraina, ka te-hanampy fonction menu mahazatra amin'ny lohaheviko tahaka ny lohahevitra hafa ihany koa aho.

Tsy sarotra ny manampy ny asa fanamboarana sakafo amin'ny lohahevitra vao vita, misy dingana 2 indrindra.

Ny dingana voalohany, fisoratana anarana menu WordPress

Raha te hampiasa ny sakafo dia tsy maintsy misoratra anarana aloha ianao, sokafy ny rakitra fonctions eo ambanin'ny lohahevitra, ary ampio ity code manaraka ity ▼

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

• Raha tsy misy rakitra functions.php eo ambanin'ny lohahevitra dia mamorona vaovao ary kopia ny code etsy ambony mba hamonjena azy.

Hita tao amin'nyWordPress backend, ary mandehana any amin'ny Appearance→Menu.

Raha hitanao ny efijery eto ambany dia midika izany fa nisoratra anarana ho ▼ ianao

Ity ambony ity dia mirakitra menus 2:

1. Safidy ambony Top Menubar.
2. ny main menu Main menubar.

Ny dingana faharoa, ny WordPress menu antso

Aorian'ny fisoratana anarana ny menio dia azo antsoina ao amin'ny rakitra môdely lohahevitra.Apetraho ao amin'ny rakitra header.php ity code manaraka ity, ary azonao atao ny miantso azy amin'ny toerana tianao hanehoana ny sakafo.

Ao amin'ny rakitra header.php, antsoy ny "menu ambony"▼

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

Ao amin'ny rakitra header.php, antsoy ny "menu lehibe"▼

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

Antsoy ny "menu ambany" ao amin'ny rakitra footer.php▼

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

Dingana XNUMX: Menu Settings

Aorian'ny fisoratana anarana ny menio ary voafaritra ao amin'ny rakitra lohahevitra ny toeran'ny fampisehoana ny menio, dia azonao atao ny mamorona singa menu vaovao ao amin'ny WordPress background.

Avy eo, tendreo ny sakafo vao noforonina ao amin'ny sakafo voasoratra anarana, ary soso-kevitra ny fifandraisana mifanaraka amin'izany ▼

Manaova wordpress multi-level menu navigation bar

Andeha isika hiresaka momba ny fomba fanaovana menu multi-level WordPress:

Fafao aloha ny kaody menu tany am-boalohany ao amin'ny rakitra fampiasa amin'ny lohahevitry ny WordPress anao manokana.

na ampio mivantana ity kaody ity ▼

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

• Fanamarihana: tsy maintsy ao anatinyNampiana ivelany.

Dia tadiavo ny kaody PHP ho an'ny lohahevitra hiantsoana ny menu, raha manta dia toy izao ▼

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

esory ary soloy ▼

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

• Fanamarihana: Ataovy azo antoka fa tsy misy div hafa ity code ity, raha tsy izany dia hofehezin'ny div ivelany.

Ny dingana manaraka dia ny manampy ny kaody fiasa JS midina ary ampio ity kaody manaraka ity amin'ny rakitra JS an'ny lohahevitra ▼

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

WordPress menu CSS styles

Farany, fanatsarana ny fomba CSS.

Inona no tokony ho vokany, omeo lalao feno ny eritreritrao, CSS afaka manao izany ▼

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

• Ampio ny kaody CSS etsy ambony amin'ny rakitra style.css an'ny lohahevitra ary tehirizo.

Rehefa avy mitahiry, havaozy ny pejy voalohan'ny tranokalanao, azonao jerena ny vokany, tena tsotra ve izany?