Je, WordPress huitaje menyu maalum ya upau wa urambazaji wa sekondari/ ngazi nyingi?

mengi yaUuzaji wa mtandaowatu kuchaguaWordPressNjootengeneza tovuti, lakini upau wa kusogeza wa baadhi ya mandhari hautumii menyu za ngazi ya upili/ngazi nyingi. Ikiwa haujaridhika, unaweza kujaribu kuongeza au kurekebisha mtindo wa menyu ya mandhari wewe mwenyewe.

Marekebisho huanza kutoka header.php.Jukumu muhimu katika faili hii ya kiolezo ni onyesho la menyu.

Ikiwa unatumia msimbo kuita kategoria kama menyu, inawezekana pia, lakini si rahisi kupanga vitu vya menyu.

Saraka iliyo na vijamii sio rahisi kushughulikia, kwa hivyo ninataka pia kuongeza kitendaji cha menyu maalum kwenye mada yangu kama mada zingine.

Sio ngumu kuongeza kitendaji cha ubinafsishaji cha menyu kwenye mada mpya, kuna hatua 2.

Hatua ya kwanza, usajili wa menyu ya WordPress

Ili kutumia menyu, lazima kwanza ujiandikishe, ufungue faili ya utendaji chini ya mada, na uongeze nambari ifuatayo ▼

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

• Ikiwa hakuna faili ya function.php chini ya mandhari, unda mpya na unakili msimbo hapo juu ili uihifadhi.

kuingia katikaWordPress backend, na kisha nenda kwa Mwonekano→Menyu.

Ikiwa unaweza kuona skrini iliyo hapa chini, inamaanisha kuwa umejiandikisha kama ▼

Hapo juu husajili menyu 2:

1. Menyu ya juu Menubar ya Juu.
2. menyu kuu ya Main upau wa menyu.

Hatua ya pili, simu ya menyu ya WordPress

Baada ya orodha kusajiliwa, inaweza kuitwa katika faili ya kiolezo cha mandhari.Weka msimbo ufuatao kwenye faili ya header.php, na unaweza kuiita mahali unapotaka kuonyesha menyu.

Katika faili ya header.php, piga "menyu ya juu"▼

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

Katika faili ya header.php, piga "menu kuu"▼

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

Piga "menyu ya chini" katika faili ya footer.php▼

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

Hatua ya XNUMX: Menyu ya mipangilio

Baada ya menyu kusajiliwa na nafasi ya kuonyesha ya menyu imefafanuliwa kwenye faili ya mandhari, unaweza kuunda kipengee kipya cha menyu kwenye usuli wa WordPress.

Kisha, kabidhi kipengee kipya cha menyu kwenye menyu iliyosajiliwa, na upendekeze uhusiano unaolingana ▼

Tengeneza upau wa kusogeza wa menyu ya viwango vingi vya wordpress

Sasa hebu tuzungumze juu ya jinsi ya kutengeneza menyu ya viwango vingi vya WordPress:

Kwanza futa msimbo asili wa menyu katika faili ya utendaji ya mandhari yako mwenyewe ya WordPress.

au ongeza msimbo huu moja kwa moja ▼

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

• Kumbuka: lazima iwe ndaniImeongezwa nje.

Kisha tafuta msimbo wa PHP ili mandhari iite menyu, ikiwa ni mbichi, kawaida huwa hivi ▼

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

iondoe na uibadilishe na ▼

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

• Kumbuka: Hakikisha nambari hii haina div zingine, vinginevyo itafungwa na div ya nje.

Hatua inayofuata ni kuongeza msimbo wa kazi wa kunjuzi wa JS na kuongeza nambari ifuatayo kwenye faili ya JS ya mada ▼

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

Mitindo ya CSS ya menyu ya WordPress

Hatimaye, urembo wa mtindo wa CSS.

Ni aina gani ya athari inapaswa kuwa, toa uchezaji kamili kwa mawazo yako, CSS inaweza kuifanya ▼

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

• Ongeza msimbo wa CSS hapo juu kwenye faili ya style.css ya mandhari na uihifadhi.

Baada ya kuhifadhi, onyesha upya ukurasa wa mbele wa tovuti yako, unaweza kuona athari, ni rahisi sana?