Kiel WordPress nomas sekundaran/multnivelan navigadstangon kutiman menuon?

multe daInterreta Merkatadohomoj elektasWordPressVenukonstrui retejon, sed la navigadbreto de iuj temoj ne subtenas sekundarajn/plurnivelajn menuojn.Se vi ne estas kontenta, vi povas provi permane aldoni aŭ modifi la menustilon de la temo.

La modifo komenciĝas de header.php Grava funkcio en ĉi tiu ŝablono dosiero estas la montrado de la menuo.

Se vi uzas la kodon por voki la kategorion kiel menuon, ankaŭ eblas, sed ne konvenas ordigi la menuaĵojn.

Dosierujoj kun subkategorioj ne estas facile manipuleblaj, do mi ankaŭ volas aldoni kutimajn menufunkciojn al mia temo same kiel aliaj temoj.

Ne estas malfacile aldoni menuan personigo-funkcion al la nove farita temo, estas ĉefe 2 paŝoj.

La unua paŝo, WordPress menua registriĝo

Por uzi la menuon, vi unue devas registriĝi, malfermi la funkciodosieron sub la temo, kaj aldoni la sekvan kodon ▼

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

• Se ne ekzistas functions.php-dosiero sub la temo, kreu novan kaj kopiu la supran kodon por konservi ĝin.

ensalutuWordPress backend, kaj poste iru al Apero→Menuo.

Se vi povas vidi la ekranon sube, tio signifas, ke vi registris kiel ▼

Ĉi-supra registras 2 menuojn:

1. Supra menuo Supra Menubreto.
2. ĉefa menuo Main menubreto.

La dua paŝo, la WordPress-menuvoko

Post kiam la menuo estas registrita, ĝi povas esti nomita en la temo ŝablono dosiero.Metu la sekvan kodon en la header.php dosiero, kaj vi povas nomi ĝin kie vi volas montri la menuon.

En la header.php dosiero, voku la "supran menuon"▼

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

En la header.php dosiero, voku la "ĉefmenuon"▼

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

Voku la "malsupran menuon" en la footer.php dosiero▼

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

Paŝo XNUMX: Agorda menuo

Post kiam la menuo estas registrita kaj la montra pozicio de la menuo estas difinita en la temodosiero, vi povas krei novan menueron en la WordPress-fono.

Poste, asignu la nove kreitan menueron al la registrita menuo, kaj sugestu la respondan rilaton ▼

Faru wordpress plurnivela menua navigadbreto

Nun ni parolu pri kiel fari WordPress plurnivela menuo:

Unue forigu la originalan menukodon en la funkciodosiero de via propra WordPress-temo.

aŭ aldonu ĉi tiun kodon rekte ▼

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

• Notu: devas esti enenAldonita ekstere.

Tiam trovu la PHP-kodon por la temo por voki la menuon, se ĝi estas kruda, ĝi kutime estas tiel ▼

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

forigu ĝin kaj anstataŭigu ĝin per ▼

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

• Noto: Certigu, ke ĉi tiu kodo ne enhavas aliajn div-ojn, alie ĝi estos limigita de la ekstera div.

La sekva paŝo estas aldoni la menuan funkcion JS kaj aldoni la sekvan kodon al la JS-dosiero de la temo ▼

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

WordPress-menuo CSS-stiloj

Fine, CSS-stila plibeligo.

Kia efiko devus esti, donu plenan ludon al via imago, CSS povas fari ĝin ▼

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

• Aldonu la supran CSS-kodon al la dosiero style.css de la temo kaj konservu ĝin.

Post konservado, refreŝigu la ĉefpaĝon de via retejo, vi povas vidi la efikon, ĉu ĝi estas tre simpla?